Você está na página 1de 106

ISBN: 978-85-915938-0-4

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

NILSON GOMES

APRENDA A CRIAR WEBSITES

1 edio 2013
2

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Agradeo aos meus queridos pais e irmos, aos meus amigos on e off-line. Um agradecimento especial s pessoas que me apoiam incondicionalmente nesse projeto e fazem parte de todas as minhas conquistas, minha esposa Meridiane e filha Isadora.

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Sumrio
PREFCIO ................................................................................................................ 7 O QUE O WIX ........................................................................................................ 9 POR QUE CRIAR ESSE E-BOOK SOBRE O WIX? .................................................................... 10 O QUE UM WEBSITE ................................................................................................... 11 O QUE O PROJETO DELIVERY FISH ................................................................................. 12 DICAS IMPORTANTES ANTES DA CRIAO DO WEBSITE ......................................................... 13 CRIANDO UM ESBOO DO SEU WEBSITE............................................................................ 14 PRIMEIROS PASSOS COM O WIX ............................................................................ 17 ACESSANDO O WIX ..................................................................................................... 18 CRIANDO UMA CONTA NO WIX...................................................................................... 19 CRIANDO O WEBSITE A PARTIR DO ZERO ........................................................................... 19 VAMOS DAR INCIO NO NOSSO PROJETO CLICANDO NO BOTO EM BRANCO. ........................ 20 REA DE TRABALHO DO WIX ......................................................................................... 22 BARRA DE FERRAMENTAS DO WIX .................................................................................. 23 INICIANDO A CRIAO DO WEBSITE DO DELIVERY FISH ........................................................ 28 SALVANDO SEU WEBSITE ............................................................................................... 28 CONFIGURANDO A PGINA DE FUNDO ............................................................................. 30 INSERINDO UMA IMAGEM NA PGINA DE FUNDO ............................................................... 30 REMOVENDO CORES DA PGINA DE FUNDO ...................................................................... 31 TROCANDO A COR DO CABEALHO .................................................................................. 32 INSERINDO UMA IMAGEM DE FUNDO NO CABEALHO ......................................................... 33 INSERINDO MENUS ................................................................................................ 34 MUDANDO CORES E ESTILO DO MENU ............................................................................. 35 ALTERANDO O NOME DOS MENUS E ADICIONANDO NOVAS PGINAS ...................................... 36 ADICIONANDO PGINA EM BRANCO ..................................................................... 37 INSERINDO CLIP ART E FORMAS E LINHAS .......................................................................... 38 INSERINDO LOGO DA EMPRESA E FINALIZANDO O CABEALHO ............................................... 38 DEIXANDO UMA IMAGEM ARREDONDADA ........................................................................ 40 INSERINDO CAIXAS DE TEXTOS ........................................................................................ 41 INSERINDO BOTES E CONFIGURANDO FORMAS ................................................................. 42 TROCANDO O ESTILO DO BOTO CADASTRE-SE .................................................................. 43

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br CRIANDO HIPERLINK PARA AS PGINAS ............................................................................. 44 ADICIONANDO O MENU DE CARDPIO DO DELIVERY FISH..................................................... 45 Inserindo caixa transparente ............................................................................. 47 INSERINDO UMA IMAGEM SLIDESHOW ............................................................................. 48 ADICIONANDO AS PGINAS DO MENU PRINCIPAL ................................................ 48 INSERINDO LINK DO MENU CARDPIO .............................................................................. 52 CONFIGURANDO O AUTOPLAY DAS IMAGENS ..................................................................... 53 INSERINDO VDEOS....................................................................................................... 55 CRIANDO SUA LOJA VIRTUAL ................................................................................. 57 REMOVENDO E ADICIONANDO CATEGORIAS ...................................................................... 59 EXCLUINDO E ADICIONANDO PRODUTOS ........................................................................... 60 CADASTRANDO PRODUTOS ............................................................................................ 60 INSERINDO IMAGEM DO PRODUTO .................................................................................. 61 SELECIONANDO MLTIPLAS IMAGENS .............................................................................. 62 ADICIONANDO INFORMAES DO PRODUTO ..................................................................... 62 CONFIGURANDO LAYOUT DOS PRODUTOS ......................................................................... 63 DEFININDO QUANTIDADE DE LINHAS E COLUNAS ................................................................ 64 DEFININDO O ESTILO DA PGINA DO PRODUTO .................................................................. 66 ALTERANDO CONFIGURAES AVANADAS DA PGINA DE PRODUTOS .................................... 67 CONFIGURAO DO CARRINHO DE COMPRAS .................................................................... 67 ALTERANDO AS CONFIGURAES DO CHECKOUT ................................................................ 68 INSERINDO LINK DA IMAGEM PARA O CARRINHO DE COMPRAS .............................................. 69 DEFININDO A FORMA DE PAGAMENTO ............................................................................. 70 CALCULANDO O VALOR DO FRETE .................................................................................... 71 COMO ADICIONAR UM FORMULRIO DE CONTATOS ............................................................ 72 INSERINDO CDIGOS HTML .......................................................................................... 73 VISUALIZANDO O WEBSITE PRONTO ................................................................................. 75 INSERINDO APPS ......................................................................................................... 76 FAZENDO UM UPGRADE NO SEU WEBSITE ............................................................ 76 REGISTRANDO UM DOMNIO ................................................................................ 80 PREENCHA O ID E A SENHA PARA ACESSAR O GERENCIADOR DE REGISTROS .............................. 82 CADASTRANDO UM NOVO DOMNIO ................................................................................ 83

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br CONFIGURANDO O WEBSITE PARA MOBILE........................................................... 84 SUA LOJA VIRTUAL NO FACEBOOK ......................................................................... 87 ADICIONANDO A PGINA............................................................................................... 88 CRIEI MEU WEBSITE, E AGORA? ............................................................................. 90 CRIANDO UM LANDING PAGE ......................................................................................... 90 ESTIMULE O USURIO A UMA AO NO SEU WEBSITE .......................................................... 91 10 PASSOS PARA COMEAR UM NEGCIO NA WEB............................................... 93 VOCABULRIO WEB ............................................................................................... 98 CONSIDERAES FINAIS ...................................................................................... 101 DADOS ESTATSTICOS DO E-COMMERCE NO BRASIL ............................................ 102 O QUE A E-BIT ........................................................................................................ 102 FATURAMENTO ANUAL DO E-COMMERCE NO BRASIL 2001 2012 ................................... 102 TABELA DE EVOLUO DAS VENDAS NO NATAL 2001 2012 ........................................... 103 GRFICO ESTATSTICO DE E-CONSUMIDORES NO BRASIL 2001 2012 ................................ 103 ESCOLARIDADE - QUANTIDADE DE TRANSAES .............................................................. 104 FAIXA ETRIA E QUANTIDADE DE TRANSAES ................................................................. 104 PERFIL DO CONSUMIDOR - EBIT ................................................................................... 104 REFERNCIAS ....................................................................................................... 105 SITES USADOS COMO FONTES E REFERNCIAS ..................................................... 105

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Prefcio
Escrever um livro ou e-book, no importa como ns chamamos, um sonho que acredito ser da maioria das pessoas. Eu no lembro quem o autor desta frase: Plante uma rvore, tenha um(a) filho(a) e escreva um livro, segui este provrbio durante anos, e aos poucos fui conquistando cada um deles, estava me faltando apenas o livro, e no final dessas 100 pginas vai ser mais uma conquista. O website deve ter um objetivo, uma meta, e, para alcanar esses objetivos, vamos ter que entender de tudo um pouco, no apenas de como criar o website, mas tambm de como divulg-lo na web, por isso abordo outros assuntos que no tem a ver com a criao do websites, mas vrias dicas de como promover seu negcio na web. O cenrio do marketing digital tem mudado nos ltimos anos, embora todos concordaremos que Marketing Marketing, no importa se no papel, na mdia ou no rdio, fazer marketing na web uma forma de poder integrar todas essas mdias, e acaba se tornando comum, ao mencionarmos a propaganda na internet, como marketing digital. A chamada presena digital no significa simplesmente ter uma pgina institucional. Hoje em dia, grandes empresas investem pesado no seu quadro funcional para trabalharem diretamente com desenvolvimento do ecommerce, anncios, SEO, mdias sociais, e da por diante. Com sistemas sofisticados, essas empresas sabem quantas vezes voc acessou a sua loja virtual, quanto tempo ficou, o que gostou, e, na prxima vez que acessar o seu website, adivinhe: o produto que voc estava procurando j vem com desconto especial. Mensurao, persuaso, funil de vendas so palavras fortes no mundo web, mas at pouco tempo atrs esse vocabulrio era um privilgio de agncias digitais, ou de grandes empresas, como Magazine Luiza, Submarino ou Walmart. No que o tema fosse algum segredo ou tivesse aqum das pequenas empresas, mas o marketing digital necessitava de grandes equipes de TI, especialistas na web e ferramentas para desenvolvimento, recursos que uma pequena empresa no poderia dispor.

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

H algum tempo, temos excelentes frameworks gerenciadores de contedo (CMS) que agilizam muito na construo de lojas virtuais e websites. Dentre eles, podemos citar o Joomla, Drupal e Wordpress, mas, mesmo assim, a lacuna existente para com o usurio sem experincia em computao era muito grande, pois todas essas ferramentas que citei acima necessitavam de algum conhecimento em programao. Contudo, para nossa sorte, nos ltimos anos criar um pequeno e-commerce ficou to simples como usar um editor de texto. Hoje, mesmo sem ter qualquer conhecimento em linguagem de programao, possvel criar websites institucionais e pequenas lojas virtuais com recursos incrveis. Nessa linha de plataformas virtuais, onde o usurio no necessita de conhecimento de programao, est o WIX. Essa plataforma responsvel pela construo de mais de 30 milhes de websites no mundo todo, e pode acreditar: voc vai usufruir o que tem de mais sofisticado em tecnologia web com plano totalmente gratuito. Mas, mesmo para usar um editor de textos, muitas vezes precisamos de um bom guia ou tutorial, para realizarmos as tarefas mais rapidamente. E por isso que escrevi esse e-book. Na criao desse e-book, utilizei toda a minha experincia adquirida como instrutor de informtica e responsvel pela criao dos tutoriais e apostilas. Recentemente, com minha graduao em licenciatura em computao, consegui trabalhar ainda mais as prticas pedaggicas do ensino-aprendizagem e as usabilidades necessrias na construo do conhecimento, e com isso construir um e-book rico em detalhes, para que o entendimento do leitor fosse mais fcil. Este e-book vai ensinar voc a construir um website completo de uma empresa que trabalha com tele-entrega de fils de tilpias e derivados de peixes (Delivery Fish). Esse website ser criado desde a parte institucional at a integrao da loja virtual com o Facebook. Isso mesmo: vamos aprender e-commerce tambm. Ser um case, em que teremos a cada etapa a possibilidade de visualizar o que j foi realizado na construo desse website.

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

O que o WIX

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

O que o WIX
Como falei anteriormente, esse projeto vai ser criado utilizando a plataforma WIX. Mas, afinal, o que o WIX? WIX uma plataforma 100% web, que lhe permite criar um website grtis em HTML5 ou Flash. Sua interface simples e seu funcionamento basicamente atravs dos recursos de arrastar e soltar, sem a necessidade de programao ou conhecimento de design. uma excelente plataforma para voc criar um website pessoal, ou para o seu negcio. Hoje em dia, muitos usurios preferem criar o seu comrcio virtual primeiro, para depois lanar mo da loja fsica, pois o custo e os riscos so bem menores. Ento, qualquer que seja o seu negcio, ele pode comear por um website.

Por que criar esse e-book sobre o WIX?


No meu entendimento, o melhor que existe no momento, no quesito criao de websites. Antes de optar por essa plataforma, pesquisei diversas outras ferramentas para esse tipo servio. Intuitividade para mim era a palavra-chave nas minhas pesquisas, e, se o objetivo trabalhar com usurio sem muita experincia, esse o primeiro ponto que devemos avaliar. Quando descobri os incrveis recursos que o WIX oferece atravs de APPs, foi fcil de eleg-lo como nmero um no quesito criao de websites. O WIX tem os princpios de usabilidade, que todo o website deveria ter. Seu ambiente de trabalho traz recursos e facilidades que o usurio espera, sua rea de trabalho limpa e as ferramentas aparecem apenas no momento necessrio para o seu uso.

10

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

O que um website
Os websites nasceram na dcada de 90, criados por Tim Berners-Lee e Robert Cailliau. Basicamente, chamamos de documentos em hipermdias que so interligados (links) e executados num navegador. Esses documentos podem estar na forma de fotos, textos ou vdeos e seguindo as interligaes desses hiperlinks, cria-se ento o conceito de navegar ou surfar na web. Atualmente, to importante quanto ter o endereo da nossa casa ter uma conta de e-mail. Para o empreendedor web, serve a mesma regra, ter um website hoje, significa ter o endereo da sua empresa estampado para o mundo, a famosa identidade digital que muito ouvimos falar. Se voc seguir o passo a passo ilustrado neste e-book, poder ter um website com um alto padro de qualidade superior aos que usam ferramentas caras ou vrias horas de programao, sem ter que contratar designer ou programador.

11

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

O que o projeto Delivery Fish


Quando decidi criar este e-book para ensinar usurios sem experincia a criar websites na plataforma WIX, pensei em desenvolver algo real, nada de exemplos fictcios. Foi a que nasceu o Delivery Fish. Inicialmente, o nome desse projeto seria Delivery Grelhados, mas nesse meio tempo acabei conhecendo a empresa fsica do Delivery Fish, e a ideia de desenvolver um projeto real ficou ainda mais fcil, pois poderia ser testada na prtica toda sua funcionalidade. Nasceu a o case Delivery Fish. Esse e-book, vai nos ensinar a criar um website com e-commerce passo a passo a partir do zero, e o nosso cliente ser a empresa Delivery Fish. Vou atribuir a esse projeto requisitos fundamentais, para que nosso website tenha uma presena digital diferente do que vemos em outros websites. Recursos como: Sistema de atendimento on-line Pgina inicial com vdeo institucional e banner com cardpios Cadastro de produtos (com at 10 fotos) Pedidos on-line (podendo optar por pratos (pequeno, mdio, grande)) Pagamentos via PagSeguro com opes de frete Inventrio de produtos Integrao da loja virtual com Facebook Integrao com as principais redes sociais (Google+, Twitter, Facebook Blogger).

Alm da loja on-line, onde o usurio poder realizar os seus pedidos, teremos o atendimento virtual atravs do chat, o website pode oferecer ainda um servio de franquias, em que outras pessoas podem adquirir o know-how da empresa para futuros empreendedores que queiram usufruir desse servio na web.

12

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Dicas importantes antes da criao do website


Antes de iniciarmos o website, necessrio realizar algumas tarefas, para evitar retrabalhos, ou desperdcio de tempo. Caso voc ainda no tenha criado uma conta no Gmail, crie agora. Embora outros servidores de e-mail ofeream o mesmo servio, ter uma conta no Gmail vai ser til mais adiante, quando necessitar utilizar os servios gratuitos que o Google oferece, como G+, Google Analytics e outros. Todos esses servios podero interagir com o seu website posteriormente, ento, mesmo que j possua uma conta de email em outro provedor, aproveite e crie no Gmail agora, para realizar o cadastro no WIX j com sua conta nova. 1 => Primeiro, voc deve criar uma pasta no seu computador ou em alguma unidade de armazenamento para adicionar todas as imagens que voc pretende usar no seu website. Crie uma pasta com o nome imagens do Website. Nada de sair catando na web a imagem que voc precisa, na hora de estar montando o seu cardpio, por exemplo. Nesse endereo, http://www.public-domain-photos.com/, voc poder adquirir centenas de imagens totalmente grtis. O fato de as Imagens estarem na internet no significa que so livres de direitos autorais. O ideal mesmo que voc componha seu prprio banco de imagens para trabalhar tranquilo. Vai perder um pouco de tempo agora, mas vai recuper-lo mais tarde. 2=> Aps criar as pastas e deixar as imagens predefinidas, voc poder compor os textos das demais pginas principais, por exemplo: (Pgina Principal Quem Somos FAQ (principais perguntas) Contato etc.). Enfim, o contedo das pginas que vo compor seu website deve ser criado antes de botar a mo na massa. Assim, quando for adicionar o contedo da pgina Quem Somos, basta acessar o seu editor de textos e copiar o contedo para o seu website, fazendo apenas ajustes de cores e fontes. 3=> Quando criamos uma conta no WIX, ele permite utilizar um subdomnio do prprio WIX sem custo nenhum. Por exemplo, o nome do nosso projeto Delivery Fish, logo, o endereo criado como subdomnio dentro do WIX dever ficar assim: deliveryfish.wix.com. Veja que, dessa maneira, o nosso domnio continua hospedado dentro do WIX com o domnio (wix.com) no final.

13

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Mesmo que o website seja pessoal, importante termos um domnio prprio, pois, alm de ficar mais fcil a identificao para o seu pblico, essa identidade digital representa uma maior segurana para o usurio, principalmente se ela vier acompanhada com a terminao do seu pas, no nosso caso o .br, essa terminao poder mais credibilidade para o seu negcio. 4=> O prximo passo criar um esboo desse projeto. Pode ser rabiscado de forma manual mesmo, s para ter uma viso de como ficar a disposio do contedo, j que a proposta do tipo FAA VOC MESMO. Por isso, no existe a necessidade de contratar webs designers, pois o Wix tem centenas de modelos prontos j organizados por categoria, para que voc possa escolher o template mais adequado ao seu projeto.

Criando um esboo do seu website


Mesmo tendo uma biblioteca de pginas modelos (templates), que podem auxiliar na criao do nosso projeto, neste e-book no utilizaremos templates. Vamos construir o website a partir de um modelo em branco, para que voc consiga acompanhar cada etapa do seu desenvolvimento. Quando no se utiliza template, importante que voc crie um esboo do seu projeto antes de comear a implementar o website, por isso montei o esboo em um editor de textos para usarmos como guia. Esse esboo um prottipo ao qual no precisamos segui-lo ao p da letra, mas pelo menos servir como base para dar sequencia na criao do seu projeto.

14

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Imprima a imagem acima, para utilizar como modelo na criao do Website.

Figura 1-Esboo da Pgina Inicial

O contedo das demais pginas (Tabela Nutricional-Quem somos- franquias - Contato) que vo compor o website devem ser criadas antes de iniciarmos a implementao na plataforma WIX. Utilizando um editor de texto, podemos editar o contedo de cada uma e deixar salvas em uma pasta, para posteriormente copiar para as pginas na plataforma WIX. A seguir, vamos criar trs esboos de pginas do nosso website: Quem Somos, Incio, Carrinho de Compras. Assim como na pgina principal, a ideia que, no final deste e-book, seja possvel comparar nosso projeto inicial feito no editor de texto, com o do website pronto.

15

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Sugesto para pgina Quem Somos:

Figura 3 - Pgina quem Somos

Sugesto para pgina Menu Cardpio:

Figura 4 - Pgina Menu Cardpio

16

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Aqui mais um modelo de como poder ser a nossa pgina de pedidos do Delivery Fish. Esta a pgina que vai anteceder a entrada dos produtos no carrinho de compras. Aps clicar o usurio clicar no produto, dever aparecer uma janela com detalhamentos de cada cardpio. Sugesto para pgina Produtos:

Figura 5 - Pgina de Produtos

Sugesto para pgina Carrinho de Compras:

Figura 6 - Pgina Carrinho de Compras

17

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Primeiros passos com o WIX Acessando o WIX


Para acessar o WIX atravs do website oficial, utilize esse endereo: www.wix.com. Em seguida, ele encaminha para o portal do seu idioma, no nosso caso portugus, e, automaticamente, ele vai para esse endereo: pt.wix.com. A pgina fica um pouco diferente, mas os recursos so os mesmos. As ilustraes deste e-book seguem uma sequncia de setas numeradas, para ficar mais fcil de acompanhar o passo a passo. Inicie clicando sobre o boto (1) COMECE AGORA!.

Passo 1

18

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Criando uma conta no WIX


Na tela inicial do WIX, clique no boto Login/Registre-se, no canto superior direito. Caso voc ainda no seja cadastrado, basta clicar em (2) CRIAR UMA NOVA CONTA para realizar o cadastro, ou apenas realizar o LOGIN, digitando e-mail e senha. Aps preencher os campos com seu e-mail e senha, clique no boto IR.

19

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Criando o website a partir do zero


Dependendo da maneira com que o WIX acessado, ele pode aparecer em uma pgina inicial diferente dessa que estou mostrando abaixo. Na maioria das vezes que os usurios chegam at o portal do WIX, atravs de direcionamento de afiliados, ou seja, link de outros sites. Aps realizado o login, a prxima janela a de categorias de templates. O WIX oferece dezenas de websites modelos, no entanto vou ensinar voc a criar um website a partir de uma pgina em branco. A sequncia bem simples, pois ele dividido em (3) grupos e (4) categorias, e os modelos j vm com temas de cada rea de atuao.

Para voc criar um website a partir de uma pgina em branco, requer mais trabalho do que usando templates, onde praticamente tudo est pronto. Nesse caso, teremos de criar toda a estrutura do nosso website, desde as pginas e links at as caixas de textos, ao invs de peg-las prontas. Vamos dar incio no nosso projeto clicando no boto Em branco.

20

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Aps escolher um template (5) Em Branco, ele oferece ainda algumas opes de layout. Vou optar em utilizar o primeiro da lista: Comece do Zero HTML. Esse modelo nos traz um design bsico onde j vem definido o cabealho e rodap da pgina. Para iniciar a edio do nosso website, clique no boto (6) Editar abaixo do modelo.

21

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

rea de trabalho do WIX


Ao acessar o WIX, vemos uma rea com poucas ferramentas, mas elas existem e so muitas, sendo que uma das qualidades do WIX a de no poluir o ambiente de trabalho, por isso ele traz um campo de viso praticamente limpo. Na caixa de dilogo (1) Pgina, podemos visualizar todas as pginas criadas, inclusive as ocultas. Temos os botes (2) Desfazer e Refazer, para voltar ao estgio anterior de alguma tarefa. Podemos utilizar a opo (3) Copiar e Colar apenas de contedo dentro do nosso projeto, com exceo de textos que podem ser colados de locais externos, por exemplo, de editores de textos. Mas no permitido colar uma imagem da Web, ou alguma caixa de texto do LibreOffice Writer, por exemplo.

Os botes (4) Gridlines servem para visualizar as dimenses da nossa pgina. Esse tamanho sugerido pelo WIX, e, embora possamos posicionar objetos fora desse pontilhado, fundamental utilizar as medidas, pois elas permitem que o website seja visualizado em outros dispositivos menores, como smartphones e tablets. O boto (5) Pr-visualizar utilizado sempre que houver alteraes no website, e precisarmos ver o resultado.

22

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Utilize o boto (6) Salvar com frequncia. Lembre-se que o trabalho realizado totalmente dependente de conexo com a internet, por isso no espere o trmino das tarefas para salv-las. Ento, use e abuse do boto salvar. Devemos utilizar o boto (7) Publicar para realizar testes de funcionamento do website. Cuide para no divulgar nos motores de busca (Google), porque, com isso, ele estar visvel para o mundo todo, e deixar que visualizem um website incompleto no conveniente.

Barra de ferramentas do WIX


As principais ferramentas do WIX ficam na barra lateral esquerda. Elas so os eixos principais do WIX, e tudo que criado comea por ali. Depois de inserir uma caixa de texto ou uma imagem no seu website, voc tem a possibilidade de usar o clique sobre esse objeto e aparecero novas funcionalidades. Isso o legal do WIX. a simplicidade com que ele mostra os recursos, sem ter de dar dezenas de cliques em menus suspensos, para realizar uma tarefa. A seguir, vamos visualizar as principais funes das ferramentas do WIX. No vou descrever suas funes agora; apenas para se familiarizar com o ambiente.

23

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Pginas: nesse boto, voc tem a possibilidade de excluir e duplicar uma pgina, alm de realizar diversas configuraes.

24

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Design: nesta aba, podemos trabalhar com trs guias de formatao: Background (plano de fundo), Cores e Tipos de Fontes.

25

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Adicionar: esse menu o mais utilizado, pois possui a maioria dos recursos importantes para construo do website. Nesta guia, temos as ferramentas de Texto, Imagem, Galeria, Mdia, Formas e Linhas, Botes e Menus, Loja Online e Apps.

26

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Configuraes: na guia de configuraes, alguns recursos s so permitidos depois do usurio fazer um upgrade, ou seja, adquirir uma conta premium (plano pago), onde ele consegue remover os anncios do WIX e tambm gerenciar o domnio. Mais frente, quando realizarmos o upgrade do Delivery Fish, vou mostrar como configuramos todos esses itens.

27

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

App Market: uma das opes mais usadas tambm. Atravs desta funo, possvel adicionar inmeros recursos no website e, com isso, agregar funcionalidades que em outros sistemas necessitariam de vrias horas de programao. So dezenas de Apps e as principais so gratuitas, como integrao com o Blogger e Facebook. Tudo isso possvel fazer, apenas com alguns cliques.

Iniciando a criao do website do Delivery Fish


Agora que conhecemos a maioria das ferramentas do WIX, vamos dar incio construo do Website. O modelo que vamos trabalhar basicamente se divide em trs partes: cabealho, centro e rodap. importante o visualizarmos agora enquanto ele est em branco, e percebermos os avanos que sero feitos a cada etapa.

28

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Salvando seu website


Antes de prosseguir com a construo do website, vamos salv-lo. Para isso, utilize a barra superior e clique no boto Salvar.

29

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Configurando a pgina de fundo Inserindo uma imagem na pgina de fundo


O prximo passo inserir uma imagem de fundo do website. Como definimos no incio do projeto, uma imagem de cardpio far a composio de fundo da pgina. Para inserir esta imagem, siga os passos a seguir atravs do menu Ferramentas: (1) Design (2) Background (3) Fazer Upload (4) Personalizar Background (5) Adicionar Imagem (6) Fazer Upload.

30

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Obs.: no item dicas importantes, sugeri que deixasse uma pasta no seu computador ou pendrive com as imagens que voc vai usar. Seu website obviamente no ser igual ao do Delivery Fish se as imagens forem diferentes, pois elas podem serem baixadas no website da www.infobook.com.br/downloads.

Removendo cores da pgina de fundo


Aps inserir a imagem de fundo, sua pgina ficar como na figura abaixo. Note que no centro e no cabealho ainda permanece as cores de fundo que o Wix trouxe automaticamente. Para remover as cores de fundo do cabealho e do centro, clique com o boto do mouse sobre o centro da pgina. Vai aparecer o menu Pginas e, aps isso, voc deve clicar em (7) Trocar Estilo. Ele vai mostrar mais uma caixa com o nome Trocar Estilo, e, clicando no Boto (8) Editar Estilo, a cor sobre a imagem de fundo ser removida.

31

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Trocando a cor do cabealho


O nosso cabealho ser composto por uma imagem. Ela foi criada num editor de textos e depois importada como imagem para o nosso website.

Perceba que o nosso cabealho tem trs partes onde ser adicionada a cor verde, mas no centro ter uma imagem. Ento, ao invs de remover a cor do centro dele, vamos pr cores em todo o cabealho. Para fazer isso, clique com o mouse sobre o cabealho. Ir aparecer o menu (9) pginas e voc deve clicar em trocar estilo. Na caixa Trocar Estilo, clique no boto (10) Editar Estilo, e na sequncia voc deve escolher as cores do centro do cabealho (11) Background Centro e Background.

32

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo uma imagem de fundo no cabealho


Para inserir uma imagem no cabealho, v at o menu Ferramentas: (12) adicionar, (13) imagem e (14) Trocar imagem. Aps clicar em trocar imagem, vai aparecer uma janela com a galeria de imagens do WIX. Nesta janela, ser possvel escolher entre as imagens grtis do WIX e as imagens que voc importar do seu computador, que aparecem na aba Minhas imagens. A imagem que queremos inserir a que vai compor o fundo do cabealho. J tenho esta imagem salva no meu computador em uma pasta, e ela ser a barra ao fundo do cabealho que vamos inserir. Para fazer isso, vamos executar o seguinte procedimento: (15) Upload seleciona a imagem do seu computador (16) d 2 cliques ok. Aps ela aparecer na galeria de imagens, d mais dois cliques a fim de transferi-la para sua pgina:

33

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Aps inserir a imagem, voc deve redimension-la e arrast-la at o cabealho, deixando como na figura abaixo. Observe ainda que possvel aumentar e diminuir o espao do cabealho, clicando nas guias de ajustes. Obs.: O formato desse objeto que vai compor um fundo amarelo no cabealho foi desenhado num editor de texto e depois salvo como imagem. Voc no precisa de editores de imagem caros ou sofisticados, podendo utilizar o LibreOffice 3.6 ou o Microsoft Word 2010.

34

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo menus
Para inserir menus no cabealho, clique na barra de ferramentas: (1) Adicionar Botes de Menus e em botes de menus selecione: (2) Menu de Botes. Aps inserir os menus, eles ficam no centro da tela. (3) arraste o menu at o cabealho e posicione-o como mostra no passo 4. Esse menu composto inicialmente por cinco botes, (4) Home-Page2-Page3-Page4Contact. O nome desses menus ser alterado posteriormente, seguindo o esboo inicial que foi feito no editor de textos.

Mudando cores e estilo do menu


Primeiramente, clique sobre qualquer parte da (5) barra de menus que acabamos de criar. Home Page 2 Page 3 Page 4 Contact

Aparecer uma janela, onde voc poder seguir a sequncia ilustrada da imagem abaixo: (6) Troca de estilo (7) Editar estilo (8) trocar aparncia (9) selecionar cores.

35

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Alterando o nome dos menus e adicionando novas pginas

Para alterar o nome dos botes do menu Home-Page2-Page3-Page4Contact, podemos dar dois cliques sobre o menu principal ou clicar na (10) Ferramenta Pginas. Aps isso, aparece um janela com todos os nomes das pginas que compem o menu, e tambm as que ficam ocultas, pois nem todas as pginas tm a necessidade de aparecer no menu principal. Em seguida, clicamos no boto (11) Configuraes de pgina. Podemos alterar os campos (12) Nome da Pgina (nome que aparecer no menu), (13) Endereo da Pgina (nome que o sistema identifica para chamar a pgina). A caixa de seleo (14) Ocultar do Menu evita que a pgina aparea no menu principal, pois vo existir pginas que sero chamadas atravs de outros botes ou hiperlinks. Podemos definir tambm a primeira pgina a ser exibida ao abrir o nosso website. Para isso, devemos marcar a caixa (14) Definir como Pgina Inicial. A caixa de seleo (14) Proteger pgina

36

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

impede que pginas sejam acessadas por usurios que no sejam do grupo de administrador. Nessa mesma janela, podemos ainda definir as (15) Configuraes de SEO. Nesses campos, devemos descrever a rea de atuao do website, bem como o objetivo a que ele se prope, outro item muito importante inserirmos no campo de Palavras-chave, palavras referentes ao contedo ou segmento que o website vai ser usado, pois o contedo desse campo, visualizado pelos motores de busca do Google.

Passo 15

15

Adicionando pgina Em branco


Podemos ainda adicionar uma nova pgina, no menu Adicionar Pgina. Aps isso, o WIX mostra uma lista de Layouts de Pginas. Devemos escolher o modelo, que melhor se adequa ao contedo que iremos postar, os modelos mais usados so: lista de preos, galerias de imagens ou vdeos.

37

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo clip art e formas e linhas


Nesta etapa, vamos finalizar o cabealho do website, inserindo um clip art, uma imagem e uma linha vertical. Para inserir o clip art, vamos at a guia ferramentas (1) Adicionar (2) Clip Art e (3) selecionar a figura desejada e (4) OK.

Para Inserir a linha vertical no nosso cabealho, v at a opo (1) Adicionar da barra de ferramentas. E clique em (2) Formas e linhas (3) Linha Vertical.

38

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo logo da empresa e finalizando o cabealho


Nesta etapa, vamos refazer o mesmo procedimento que utilizamos para inserir a imagem de fundo do cabealho, inserindo o logotipo Delivery Fish, a imagem da Atendente on-line, uma caixa de texto com a frase Ainda no fez nenhum pedido ? e pedido via chat on-line, incluindo tambm um boto Cadastre-se. A imagem a ser inserida ser da galeria de imagens do WIX. Segue-se o mesmo procedimento visto anteriormente: Adicionar Imagem Imagens Grtis WIX, e so dados dois cliques sobre a imagem.

39

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Deixando uma imagem arredondada


O objetivo a seguir ser deixar a imagem do atendimento on-line arredondada. Para isso, (1) clique sobre a imagem. Ir aparecer a janela Imagem com cinco opes de configurao. Antes de trocar o estilo, clique sobre a opo configuraes Esticar, para que ela ocupe toda a rea da moldura. Aps esticar a imagem, selecione-a novamente e escolha a opo (2) Trocar Estilo. Aps isso, aparece uma janela com vrias opes de estilo. Selecione (3) Personalize essa Imagem e em (4) Estilos Avanados mova com as setas at aparecer o estilo (5) circular, e pronto. Sua figura est com um formato arredondado. Podemos ainda alterar a (6) Largura da borda.

40

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo caixas de textos


As caixas de textos so utilizadas para inserimos descries das pginas ou ttulos. Elas oferecem vrias formas de configuraes, como tamanho da fonte, cor, alinhamento e a possibilidade de inserir links. Na ferramenta Adicionar (1) Texto, temos a possibilidade de inserir o texto como um ttulo, onde o seu tamanho ser maior, atravs da opo (2) Ttulo, ou para descries com fontes menores, com a opo Pargrafos. Aps inserir o texto, possvel selecion-lo para que possamos configurar ainda mais detalhes, utilizando a (4) barra de ferramentas de cores, fontes, tamanhos e alinhamentos, que aparecem logo aps clicar na opo (3) Editar Texto da janela Texto.

O prximo passo inserir o logo da Delivery Fish. Para fazer isso, utilizaremos o mesmo processo realizado anteriormente, quando aprendemos a inserir a barra de fundo do menu principal. Podemos tambm criar mais uma caixa de texto e acrescentar a frase Ainda no fez nenhum pedido?.

41

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo botes e configurando formas


No cabealho do nosso website, temos um boto que direciona o usurio para nossa pgina de cadastros, vamos inserir o link que vai chamar a pgina de cadastros como demonstra a sequncia abaixo.

No decorrer desse projeto, vamos inserir vrios botes de links, pois a teia da web basicamente se baseia nisso, em hiperlinks de uma pgina a outra. Ento, vamos inserir nosso primeiro boto de menu. Para inserir um Boto de menu, clique na guia de ferramentas: (1) Adicionar (2) Boto de Menu 3) Botes Grande. Aps inserir o boto, aparecer na descrio do menu a palavra (4) MY BUTTON. O prximo passo alterar para CADASTRE-SE e posicionar esse boto no nosso cabealho.

42

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Trocando o estilo do boto Cadastre-se


Para alterar o estilo de um boto, devemos (1) seleciona-lo. Na janela de botes, temos a opo (2) Trocar Estilo, e na janela Trocar Estilo clique no boto (3) Editar Estilo. Em Estilos Avanados, selecione um (4) boto com sombra, para ficar com a mesma aparncia do nosso projeto inicial.

Aps finalizar esta tarefa, o cabealho do Delivery Fish dever ficar como na imagem abaixo. Lembre-se de que, embora o menu de cardpio contenha vrios produtos, vamos ensinar a criar apenas um. No entanto, o procedimento ser o mesmo para as demais pginas.

43

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Criando hiperlink para as pginas


No nosso cabealho, temos o boto Cadastre-se. Esse boto tem o objetivo de levar os clientes que pretendem efetuar um compra a se cadastrar no PagSeguro. O cadastro no PagSeguro ser explicado mais adiante, por isso, nesse exemplo, vamos ensinar como abrir nossa pgina de CONTATO, pois o procedimento para linkar com o PagSeguro o mesmo, mudando apenas o endereo da pgina. Vamos agora fazer a ligao entre o nosso boto CADASTRE-SE e a pgina CONTATO.

Primeiramente, clique sobre o boto (1) CADASTRE-SE. Em seguida, Passo 4 aparece a janela botes. Siga a sequncia (2) Link para, e na janela Link selecione (3) Pgina e (4) Selecionar Pgina e OK. Agora, sempre que for clicado no boto Cadastre-se, abrir a pgina CONTATO.

44

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Adicionando o menu de cardpio do Delivery Fish

Aps inserir a caixa, (1) clique sobre ela e siga a sequncia de etapas, conforme imagem ao lado: janela. Na janela Trocar Estilos, selecione (2) Trocar Estilo. Na janela Trocar Estilo, selecione (3) Editar Estilo, e na janela Estilos Avanados=>Cores=> em (4) Background, selecione a cor amarela. Optei por deixar um pouco diferente do esboo inicial, por isso, desmarque a opo (5) Juntar cantos e altere o valor da opo (6) Tamanho dos cantos. Com isso, cada canto pode ser modificado. Agora mude o valor para 20 nos campos do lado direito e 0 do lado esquerdo.

Inicialmente, vamos criar uma caixa atravs do Menu Adicionar => Formas e linhas => Caixa, aps inserir a caixa e dimensionar o tamanho correto, alm de configurar tambm o formato da caixa, para ficar mais arredondada

45

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

e alterar cores e bordas, a fim de deixar com aparncia do nosso esboo inicial. A prxima etapa inserir um caixa de texto e digitar a lista de cardpio dos produtos da Delivery Fish. Aps digitar os itens do cardpio, alinhe-os esquerda. Os passos para inserir uma caixa de texto e configur-la so os mesmos passos que vimos no tpico (9) Inserindo caixas de textos. Terminados esses passos, o menu de cardpio fica como na imagem abaixo. No se esquea de deixar marcada a opo (10) Mostrar em todas as pginas, caso contrrio ele aparecer apenas na primeira pgina apenas, e no isso o que queremos. A ideia deixar o menu visvel em todas elas, pois facilita o acesso dos usurios.

46

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo caixa transparente


O contedo das pginas do menu principal como Tabela Nutricional, Sobre Ns, franquias e Contato, e do menu cardpio devero ficar sobre uma caixa transparente no centro da nossa pgina. Para realizar esta tarefa, execute o procedimento ilustrado na sequncia abaixo. Aps inserir e dimensionar a caixa, clique novamente sobre ela e sigas os passos do 1 a 4, deixando com transparncia de 80%, marcando tambm a opo Mostrar em todas as pginas. Aps inserir a caixa transparente, clique sobre ela, e na janela Caixa clique em (1) Trocar Estilo. Na janela Trocar Estilo, clique sobre o boto (2) Editar Estilo, em seguida, para alterar a transparncia da caixa, clique sobre (3) Background e na Janela (4) Personalizar Cor deixe a transparncia de 80%.

47

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo uma imagem slideshow


Seguindo nosso projeto esboo, no lado direito da pgina inicial (INCIO), queremos mostrar imagens de alguns cardpios em forma de transio, ou seja, alternando 3 ou 4 imagens em um ponto fixo da tela, com intervalo de alguns segundos entre elas. Para inserir uma imagem slideshow, clique em (1) Adicionar, Imagem Imagem Slideshow. Aps isso, (2) clique sobre a imagem e (3) Organizar Imagens e (4) Adicionar Imagem. Selecione a imagem que quer inserir.

48

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Adicionando Pginas

49

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Adicionando as pginas do menu principal


Nesta etapa, vamos ver como inserirmos os links nas pginas do menu Principal. Vou ensinar como realizar esse procedimento apenas para a pgina SOBRE NS, nas demais pginas, voc deve fazer o mesmo procedimento que vamos descrever abaixo.

Passo 1

Para executar esta tarefa, clique no menu principal Pgina. Em seguida, selecione a pgina Sobre ns. O prximo passo a fazer ir at a guia de ferramentas Adicionar Texto. Digite o ttulo e contedo que dever aparecer na pgina Sobre ns, e, caso j tenha esse texto digitado em um editor de texto, como orientado no incio deste e-book, poder copiar e colar na caixa de texto, ao invs de digit-lo novamente. Ajuste a caixa de texto, o pargrafo e as cores da fonte e clique em Prvisualizar. Nossa pgina dever ficar como na imagem abaixo, e, aps visualizar o website, clique no boto no canto superior Voltar Edio.

50

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Veja como nosso website est tomando forma. Esta a imagem da pgina SOBRE NS.

Agora que criamos a pgina SOBRE NS, execute o mesmo procedimento para criar as demais pginas TABELA NUTRICIONAL FRANQUIAS CONTATO e teste todos os links, inclusive o Cadastre-se, que deve abrir a mesma pgina do menu CONTATO.

51

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo link do menu cardpio


O menu Cardpio o menu lateral que j criamos no assunto Adicionando menu de Cardpio e dever aparecer em todas as pginas do website. O que falta agora apenas interligar cada cardpio do menu com a pgina correspondente. uma tarefa bem simples, mas primeiramente devemos criar as pginas de cada item que esses links vo chamar. Vamos criar e executar esse procedimento para apenas para um dos links. Para as demais pginas, sero os mesmos passos. Para realizar esta tarefa, clique na guia de ferramentas menu: (1) Adicionar (2) Adicionar Pgina (3) Em branco, e digite o nome da pgina em (1) Nomeie sua Pgina.

52

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Em seguida, comece a inserir o texto da pgina, a imagem do produto (Salmo) e o Boto QUERO FAZER O PEDIDO, conforme definida no nosso esboo inicial. Aps realizar esta tarefa, a pgina do Salmo dever ficar como na imagem ao lado.

No momento, o link do boto QUERO FAZER O PEDIDO ainda no est funcional, pois precisamos criar a pgina de e-commerce primeiro.

Configurando o autoplay das imagens


O autoplay tem o objetivo de deixar vrias imagens em transio. Atravs dessa configurao, podemos definir quanto tempo cada imagem vai ficar esttica. Esse um recurso muito usado na maioria dos websites, pois, com isso, vrias imagens ocupam o mesmo espao da tela. Para realizar essa configurao, devemos (1) Clicar sobre a imagem (2) configuraes, onde podemos configurar o tipo de (3) Transies, se a imagem vai aparecer na vertical ou entra e sai, marcar o (4) autoplay e, principalmente, o tempo que ela vai pausar em segundos.

53

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Outro recurso interessante que para cada imagem que aparecer na pgina de produtos, poder ser direcionado para um link em especfico ou deixar a imagem no modo expanso como mostra no passo (4). Para fazer isso, devese selecionar a caixa (5) Quando clicar em uma imagem.

54

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo vdeos
Nesta etapa, vamos adicionar o que podemos chamar de cereja no bolo para o nosso website. Os vdeos so responsveis pelas maiores converses da web nos ltimos anos. Por que usar textos quando voc pode falar diretamente com o seu cliente? Ele pode ser usado em vrios momentos do seu website, seja para destacar o seu produto ou para receber o visitante com um vdeo de boas-vindas. Voc poder tambm criar uma landing page com depoimento de seus clientes. Enfim, so vrias opes de uso, dependendo apenas da sua criatividade. Veja, nos passos a seguir, como vamos inserir um vdeo na pgina inicial do Delivery Fish. Inicialmente, clique na barra de ferramentas: Adicionar, (1) Mdia- (2) Vdeo, e no endereo da (3) URL do Vdeo devemos inserir o endereo do website onde est hospedado o vdeo.

55

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Podemos configurar a (4) Barra de Controle, utilizando o autoplay (inicia automtico quando acessar o website). Tambm podemos alterar o formato da janela onde aparecer o vdeo. Para fazer isso, clique sobre o vdeo e na janela Trocar Estilo. Clique em (5) Personalize esse Vdeo, e na janela (6) Estilos Avanados escolha um dos modelos que mais se adequar ao seu website. Aps inserir e posicionar o vdeo, configure a margem e o (7) tamanho dos cantos.

56

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

E-commerce

57

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Criando sua Loja Virtual


O carrinho de compras uma excelente ferramenta dentro dos recursos do WIX. Alm de podermos criar um website institucional de qualidade, esta opo permite agregar mais funcionalidades ao nosso. Porm, os recursos de e-commerce do WIX no so gratuitos e, tambm, no indicado para grandes empresas. Por exemplo, no possvel integrar o sistema de estoque da sua loja fsica com a loja virtual do WIX, ou seja, se voc tem 1.000 produtos no sistema da sua loja fsica, ter de cadastr-los todos novamente no seu website, o que pode inviabilizar a gesto e controle da sua loja fsica, causando retrabalho ao fazer o inventrio. A seguir vamos acompanhar a sequencia para criao do carrinho de compras.

58

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Para iniciar a criao do carrinho de compras, clique em Adicionar Pgina, e, na categoria loja On-line, selecione (1) Loja e Carrinho. No boto (2) Configuraes da pgina, na janela Configuraes de SEO, devemos deixar marcada a opo (3) Ocultar do menu, pois a pgina do carrinho de compras ser acionada atravs da tela de pedidos e de outros links, no necessitando assim ficar visvel no menu principal.

Removendo e adicionando categorias


Aps adicionar a pgina, clique sobre a tela dos produtos e na janela Galeria de Produto (1) Gerenciar loja. O WIX traz itens fictcios na sua loja de produtos. O primeiro passo a fazer remover produtos e categorias existentes. Na lista de Categorias, temos o boto (2) Excluir, para excluir uma categoria, e o boto renomear, para (2) alterar o nome da categoria, mas, abaixo, podemos tambm adicionar uma categoria nova. Para fazer isso, clique em (3) Adicionar Categoria. Ao optar pela opo excluir categorias, clique em (4) apagar na janela de advertncia.

59

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Excluindo e adicionando produtos


Estando na janela de cadastro dos produtos, podemos ver que a plataforma WIX, j traz cadastrado automaticamente produtos fictcios, que deveremos apaga-los, antes de inserir os novos. Para fazer isso clique no cone (1) Selecione Todos. Aps selecionar, clique sobre o Boto (2) Apagar.

Cadastrando produtos
Para realizar o cadastro dos produtos, execute o seguinte procedimento. Estando na janela de Gerenciar Loja, (6) Adicionar Produtos. Na janela Editar produtos, pode preencher dados como: (4) Nome do Produto (5) preo, (7) Categoria e imagem, Resumo e Detalhes.

60

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo imagem do produto


Outro item essencial na pgina de produtos a imagem. Para adicionar uma imagem no nosso website, devemos clicar no boto (8) Adicionar Mdia. Em seguida, aparece uma tela onde podemos (10) selecionar imagens de produtos j existentes na nossa galeria de mdia. Para inserir as imagens que esto fora da galeria de imagens do WIX, devemos fazer isso atravs do boto (9) Upload, localizando as imagens no nosso computador e inserindo na Galeria de Mdia.

61

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Selecionando mltiplas imagens


Aps realizar o upload das imagens para nossa galeria de mdia, podemos selecionar mltiplas imagens para inserir na nossa pgina de produtos. Para fazer isso, d (12) apenas um clique sobre a imagem da galeria (vai ficar azul), e, aps selecionar as imagens, clique em (14) Concludo.

Adicionando informaes do produto


Outra configurao importante da pgina de edio do produto o detalhamento das informaes que podemos inserir sobre cada um deles. Para inserir esses detalhes, clique na aba Resumo e Detalhes.

62

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Temos ainda a aba DETALHES OPCIONAIS, utilizada quando queremos que apaream descontos sobre o preo de venda. O contedo que estiver no campo Fita vai aparecer sobre a imagem do produto, e o valor do preo de venda ser destacado como preo final.

Configurando layout dos produtos


Nesta etapa, vamos configurar nossa pgina de vendas para melhorar a visualizao dos produtos do nosso website. O WIX permite mostrar de 1 at 10 colunas/linhas de produtos, porm essa configurao poder deixar a visualizao de produtos prejudicada. Portanto, utilize poucas linhas ou colunas no seu carrinho de compras, pois, assim, as informaes principais ficaro no topo da pgina e visveis pelos usurios logo ao entrarem no website, no necessitando fazer a rolagem da tela para visualizar o contedo. Independente da quantidade de produtos que vamos trabalhar, prefervel ter uma tela com no mximo trs colunas. Quanto menos colunas, maior a imagem que vai aparecer para nosso visitante, ou seja, mais linhas e mais colunas indicam tamanho de imagem menor.

63

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Veja como ficou a disposio dos nossos produtos com 2 linhas e 3 colunas:

64

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Definindo quantidade de linhas e colunas


Nesta etapa, j com os produtos cadastrados, devemos definir a quantidade de linhas e colunas que melhor se adapta ao nosso layout de tela, levando em considerao o que falamos anteriormente, ou seja, no adicionar muitas colunas e linhas.

A pgina Faa seu pedido est definida com duas linhas e trs colunas, mas podemos alterar isso executando os seguintes procedimentos: Estando na pgina Loja e Carrinho, clique sobre a janela de produtos, selecione (1) configuraes e defina a (2) quantidade de Linhas e Colunas.

65

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Definindo o estilo da pgina do produto


Ainda na pgina Loja e Carrinho, podemos alterar a tela onde o usurio vai finalizar a compra. uma das ltimas etapas de deciso do usurio, e fundamental que essa pgina esteja com imagens e descries impecveis. Nesta tela, podemos deixar selecionados os links das redes sociais, definir o tamanho do cone e o espaamento entre os ttulos e botes.

Passo 3

66

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Alterando configuraes avanadas da pgina de produtos


Na tela de estilos da galeria de produtos, podemos alterar a fonte, o espaamento e estilo das molduras.

Configurao do carrinho de compras


Para alterar as configuraes do carrinho de compras, clique sobre a caixa do carrinho de compras e selecione Configuraes.

Passo 1

Passo 2

67

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Na janela Configuraes do Carrinho, podemos alterar a altura e o texto que vai sobre a caixa do carrinho de compras.

Passo 3

Alterando as configuraes do checkout


Nesta etapa, podemos alterar os textos e estilos e fontes do contedo da caixa de checkout. Para fazer isso, devemos estar na janela de Configuraes do Carrinho. Podemos alterar todos os ttulos das colunas, como: Nome do Produto, Quantidade, Preo, Remover, Modo de imagem, Total, Subtotal e o Texto do Boto Checkout.

68

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo link da imagem para o carrinho de compras


Nesta etapa, onde o usurio comea a visualizar os produtos do website, temos de criar links para direcion-lo at a pgina de compras. Esses links podem estar no ttulo da pgina, na descrio do texto ou em um boto para fazer o pedido e, principalmente, na imagem, que o objeto que mais chama a ateno no website. Na pgina de detalhes de cada produto do menu cardpio, vamos criar dois links que levam o usurio tela de pedidos.

69

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

O primeiro link a adicionar nas imagens rotativa dos produtos. Para isso, (1) selecione a imagem e clique em (2) Organizar imagens. Na janela organizar cones, clique em cada uma das imagens e selecione a opo (3) Link para. O nome da nossa pgina que nos leva pgina de pedidos (4) Loja e Carrinho

Definindo a forma de pagamento


O WIX traz por padro a forma de pagamento em dlar, mas essa opo pode ser alterada atravs do boto opes do WIXstore.

70

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Nesta aba, devemos selecionar uma das trs formas de pagamento que o WIX oferece: PagSeguro, Paypal ou Google Checkout. Em todas elas, temos de fazer um cadastro na empresa conveniada, sendo que o mais simples de utilizar o PagSeguro. Neste link, o WIX oferece todas as instrues para realizar essas configuraes: http://pt.wix.com/support/main/html5/o-editor-WIX/loja-online/usandopagseguro-em-sua-loja-online

Calculando o valor do frete


Podemos configurar os custos de frete e peso na Aba Frete, no campo Taxa de Administrao, o custo que o cliente pagar pelo frete, porm esse campo opcional, deixando ele em branco, significa que o valor do frete ser gratuito. Caso seja inserido algum valor nesse campo, ser somado

71

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

no preo total da compra. No caso do Delivey Fish, no vamos adicionar valor, para que a entrega seja gratuita.

Em caso de haver frete que tenha como medida o seu custo atravs do peso, devemos cadastrar o intervalo desse custo. Por exemplo, at 1kg, o valor X, de 1kg a 5kg, o valor Y. O intervalo de preo/peso usado para calcular a taxa de frete que o consumidor ir pagar. Adicione o valor que deseja cobrar pelo frete para cada intervalo de preo/peso. Nota: se voc selecionar o intervalo de peso como mtodo para o clculo de frete, voc dever adicionar o peso de cada produto (em kilogramas) na tela de Editar Produto.

72

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Como adicionar um formulrio de contatos


Formulrio de contato pode ser a porta de entrada do usurio ou futuro cliente, e, atravs dele, possvel fazer contato via e-mail. Para adicionar um formulrio, v at as barra de ferramenta lateral, clique em Adicionar pgina e (1) selecione o modelo Contato Formulrio. D um nome ao formulrio na opo (2) Nomeie sua pgina e ajuste os demais componentes de acordo com o seu layout, colocando (3) logotipo e demais informaes para que o usurio possa entrar em contato.

Inserindo cdigos HTML


O construtor de sites do WIX tambm permite que voc adicione cdigos HTML/Embed, no nosso website, mesmo que voc no tenha conhecimento em programao, eventualmente poderemos necessitar de alguma funo que a plataforma WIX no dispe. Nesse caso, podemos adicionar um cdigo

73

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

HTML pronto, que outra pessoa ou empresa possa desenvolver para complementar o seu website. Para adicionar cdigos HTML, v at a guia Adicionar Apps (1) HTML. Na caixa criada do cdigo, voc deve clicar sobre ela e ir at Configuraes. Na janela Configuraes do HTML , selecione o (2) Modo Cdigo HTML, e na caixa (3) Cdigo HTML/Cdigo Embed digite ou cole o cdigo copiado. Aps isso, clique em atualizar.

O cdigo que usei para ilustrar esse exemplo tem o objetivo de mostrar uma mensagem em Java Script (Linguagem de Programao) para o usurio, ao entrar no website. A mensagem (4) Faltam 191 dias para o Natal apenas um meio de explicar a funo, pois ensinar cdigos de programao no o objetivo deste e-book, muito pelo contrrio: a ideia mostrar a voc que possvel criar websites sem ter de ficar preso a cdigos complexos.

74

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Visualizando o website pronto


Aps realizar as configuraes do carrinho de compras e criar os hiperlinks para os outros itens do cardpio, sua pgina dever estar com esta aparncia.

75

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Inserindo Apps
As Apps do WIX facilitam bastante na hora de incrementar o seu website. O ideal para quem est comeando utilizar Apps gratuitas. Veja que a grande maioria das Apps Grtis/Premium. Isso significa que elas possuem um plano pago, caso o usurio as queira com todos os recursos. Apenas Apps com indicador Grtis que realmente no tm cobrana. Para adicionar uma App Market, vamos at a barra de ferramentas lateral App Market Escolha uma categoria Grtis.

76

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Fazendo um upgrade no seu website


A principal diferena de um plano pago no WIX para um plano totalmente gratuito que no plano pago voc poder conectar o seu website em um domnio prprio, por exemplo: no WIX, o endereo no nosso website modelo www.deliveryfish.wix.com/deliveryfish, ou seja, ele um subdomnio do WIX, mas, como optamos em ter um domnio prprio, registramos o nosso domnio no www.registro.br, e nosso endereo ficou: www.deliveryfish.net.br. A seguir, vou explicar como fazer um upgrade do website e escolher um dos planos pagos. Estando na sua tela de edio do seu website no nosso caso do Delivery Fish, clique na barra superior de menu no boto Upgrade.

77

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

O WIX oferece quatro tipos de plano pago: Conect Domain, Combo, Unlimited e eCommerce. O Plano Conect Domain o mais simples deles, mas continuam aparecendo os anncios do WIX. O plano mais completo custa R$27,00 mensais, se voc contratar para o perodo de 1 ano. Esse o plano mais completo e com ele voc poder trabalhar com e-commerce, e ainda ganha um vale anncio no Google Adense de US$ 125. J est includo o domnio e ainda economiza 35% menos do que no plano mensal.

Aps escolher um dos planos de hospedagem, voc dever optar pela forma de pagamento, preenchendo o cadastro com os dados da entidade da qual ser emitida a fatura. O plano de pagamento anual normalmente tem descontos na faixa de 31% a 45%.

78

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

79

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Registrando um domnio
Registrar o domnio deveria ser um dos primeiros passos antes de comear o um negcio na web. Existem vrias empresas que so credenciadas para registrar domnios (Registro.br, Locaweb, Network Solutions etc.). Vou explicar a voc os passos para efetuar seu registro no Registro.br. Eles tm um sistema de alertas e feedbacks muito eficientes, a o painel de configurao dos registros bem simples. Voc pode obter mais informaes referente a outros hosts de domnio nesse endereo: http://pt.wix.com/support/main/flash/domnios-eemails#dom%EDnios-e-emails/configurar-o-seu-dom%EDnio-registrado-emoutra-empresa?&_suid=137086810809307232190211707087. Podemos acessar o RegistroBr nesse endereo: www.registro.br, mas, antes disso, podemos visualizar um vdeo que est disponvel nesse endereo: http://www.youtube.com/watch?feature=player_embedded&v=Drhmd4r6w Ao, ensinando, passo a passo, como efetuar o registro.

80

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Para realizar o cadastramento, clique no boto (1) Cadastre-se no Registro.br, preencha os dados do formulrio e, aps a finalizao do cadastro, voc ir receber na sua conta de e-mail (o mesmo informado no cadastro) um link de confirmao juntamente com o seu ID (cdigo de acesso). Aps clicar no link, voc ser direcionado para a tela do painel de registro. Tambm pode acess-la pelo boto (2) Acesso ao sistema.

81

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Preencha o ID e a senha para acessar o gerenciador de registros


Aps a autenticao do sistema, voc ter acesso ao painel administrativo, onde possvel fazer todo o gerenciamento dos domnios (adicionar, excluir etc.). Estando no painel administrativo, podemos criar domnio para outras entidades, pessoas fsicas ou jurdicas. Ento, para cada registro novo de domnio, dever ser feito um cadastro completo para quem ns estamos registrando, ou seja, o acesso ao registro.br permite criar domnio para diversas empresas se necessrio.

Passo 4

82

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Cadastrando um novo domnio


Para fazer o cadastro de um novo domnio, clique no boto (1) Novo Domnio e digite o nome do domnio que voc deseja registrar. Optamos por escolher o domnio com a extenso net.br, por ser o nico disponvel.

Em seguida, preencha as informaes sobre a entidade a ser cadastrada.

83

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

A empresa onde ser hospedado seu website fornecer o endereo de DNS. A maneira como ele direcionado para o servidor depende de cada Host. No nosso exemplo, estamos utilizando o WIX, que bem simples, bastando apenas preencher o endereo do servidor. O DNS primrio o ns1.wix.com e o secundrio, ns2.wix.com.

84

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Configurando o website para mobile


Voc vai perceber, ao criar um Website no WIX, que ele possui um padro prprio fixo no tamanho da tela. Essa medida utilizada pelo fato de ela adequar-se em qualquer outro dispositivo com telas menores, no caso smartphones e tablets. Com isso, o seu website j vem configurado automtico para ser acessado pelos dispositivos mveis. Para configurar para mobile, acesse a barra de ferramentas, (1) Configurar, (2) Visualizao Mobile e (3) Marque as opes da janela Visualizao mobile, de acordo com os dados que voc quer que aparea no Google Maps, conforme mostram os passos 3 e 4 .

85

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Caso queira habilitar as informaes do Meu perfil da sua rede social, basta marcar essas opes para abrir uma nova janela com a lista das principais redes sociais. Essas informaes so todas opcionais. Marque apenas as opes das redes sociais que voc possui perfil.

86

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Sua loja virtual no Facebook


Esse fantstico recurso tambm um diferencial do WIX. O sistema oferece a possibilidade de integrar sua loja virtual criada no WIX com a sua pgina social do Facebook, sendo uma das tendncias do mercado web ter seus produtos mais prximos dos seus clientes, ou seja, as redes sociais. Fazendo isso, possvel visualizar seu catlogo de produtos diretamente no Facebook. Esta uma tima opo de divulgao sem custo adicional, pelo menos por enquanto. O aplicativo que faz isso a App EasySocialShop. A seguir, vou mostrar como realizar essa tarefa.

Inicialmente, acesse o modo de edio da sua loja virtual no WIX, na pgina do carrinho de compras, clique sobre a galeria de produto, e na janela selecione (1)Gerenciar Loja. Aps isso, clique na janela de produtos, e, na parte inferior do WIXstore, clique sobre o boto (2) Receba uma loja de

87

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Facebook GRTIS. Em seguida, aparece a janela do EASYSocialShop, onde voc deve clicar no boto (3) Criar Loja.

Adicionando a pgina
O recurso EASYSocialShop a App do WIX, que executa a criao da loja no Facebook. Logo, aparecer a janela Adicionar guia de pgina, (2) selecione para qual projeto voc quer a loja e clique em Adicionar aba da pgina.

Em seguida, o sistema importa a nossa pgina de compras para o Facebook.

88

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Podemos clicar sobre um dos produtos e editar algumas informaes, por exemplo, onde existe o boto BUY NOW, ns substitumos por COMPRAR, e, clicando no boto GERENCIAR A LOJA, possvel editar as informaes do produto. Aps fazer as alteraes necessrias, clique no boto SALVAR ALTERAES.

89

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Criei meu website, e agora?


O principal motivo pelo qual as pessoas desejam ter um website, seja ele institucional ou pessoal, para marcar a sua presena na web, como quem diz: Eu existo. Isso o que chamamos de identidade digital, mas essa presena virtual que tem o propsito de ser positiva pode ser negativa tambm, dependendo da mensagem que voc estiver passando para os visitantes, atravs do seu website. Como falei anteriormente, um website no um carto de visitas: ele deve ter uma meta, um retorno para o seu negcio. Como diz Conrado Adolfo, no seu livro Voc j tem um plano B, empresa boa aquela que d lucro. Este ebook tem o objetivo de fazer com que voc inicie seu negcio na web, e o primeiro passo ser obter o seu website. Ele aborda ainda outros assuntos importantes, como: o vocabulrio web, os 10 passos para comear seu negcio na web, criando uma landing page, e integrando sua loja com o Facebook. Todos esses tpicos vo alm do website. Ento, a dica que deixo, a partir de agora, se apropriar das inmeras leituras de marketing digital disponvel na web. No website da www.infoebook.com.br e no meu blog, h vrios posts e material para downloads totalmente gratuitos. Procure pr em prtica o que aprender nessa rea, principalmente assuntos referentes a Adwords, Google Analytics e marketing digital. No decorrer dos assuntos a seguir, vou passar vrios links de especialistas na rea de marketing focado para web. Vamos iniciar aprendendo sobre o fatorchave de um website que a landing page.

Criando um landing page


Landing page, que tambm pode ser chamada de pgina de entrada ou pgina de destino, a pgina foco de qualquer campanha de marketing digital, pois ela poder ser responsvel por grande parte das converses do seu website. Quando falo em converso, no necessariamente ele deve representar cifres para sua campanha, mas pode significar a captura do um cadastro de um visitante, ou a assinatura de um servio como curso por exemplo.

90

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Normalmente, ela alcanada atravs de um banner, e-mail marketing ou anncio de link patrocinado, e, independente de como o usurio chegou na sua pgina, importante ressaltar que a promessa do anncio que trouxe esse usurio para o seu website seja exatamente aquela que o levou a realizar o clique, ou seja, se ele recebeu um e-mail marketing oferecendo um e-book grtis, voc deve lev-lo pgina em que est esse e-book, caso contrrio estar fazendo uma propaganda enganosa para o seu cliente ou visitante. O ideal que essa pgina deixe o usurio com poucas opes de ao; ele pode voltar ou converter. Como falei anteriormente, o converter pode ser a captao do e-mail do usurio atravs do cadastro.

Estimule o usurio a uma ao no seu website


Na sua Landin page, voc deve estimular o visitante a uma ao, a expresso Call-to-action quer dizer chamar a ateno, palavras ou frases podem produzir estmulos psicolgico para os visitantes, veja abaixo frases que caracterizam isso.

As aes se caracterizam por um convite.


V correndo S hoje No perca tempo Junte-se a ns Venha fazer parte Experimente

91

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Uma landing page de que gosto muito o do website da ignicaodigital.com.br do rico Rocha. A abertura da pgina principal da Incognita, apresenta vrios vdeos com depoimentos e entrevistas.

Embora a pgina de converso no abra diretamente na pgina inicial, ela fica no topo do website com um nome curioso de Sacada.O usurio poder voltar a pgina principal atravs do link do BLOG, fazendo um loop dentro do website. Ainda no website da Ignio Digital, eventualmente aparece um banner que solicita o e-mail do usurio, oferecendo um vdeo gratuito. Nesse caso, o vdeo faz parte do um produto que ele est vendendo, por exemplo.

92

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Abaixo, um modelo de landing page, onde aparecem quatro pontos relevantes que podem servir de persuaso ao visitante, e logo ao lado a opo de cadastro do usurio. Esse modelo encontrado na maioria dos websites, com uma pequena mudana no layout, normalmente utilizamos apenas dois campos como nome e e-mail, pois estatisticamente, landing page com muitos campos, ocasiona alta rejeio por parte do usurio.

93

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

10 passos para comear um negcio na Web


Neste tpico, a inteno que eu tinha era de fazer uma sistematizao de como criar um website, ou um produto destinado ao mercado digital. E, em um dos tpicos, seria descrever a sistematizao que utilizei na criao deste e-book, do blog nilsongomes.com.br e do website infoebook.com.br, detalhando, inclusive, erros que cometi, para que voc, leitor, no venha a comet-los. Mas lendo esse artigo do professor Marcos Morita, 10 passos para comear um negcio na Web, achei conveniente compartilh-lo com vocs, pois ele relata os 10 passos com mais detalhamentos. O artigo est postado na ntegra neste e-book. Esse post pode ser encontrado com mais uma dezena de outros artigos referentes ao comrcio eletrnico. Para acess-lo, clique em http://www.marcosmorita.com.br/2011/02/empreendedorismo-virtual-10dicas-para-abrir-um-negocio-na-web/. 10 passos para comear um negcio na Web (pelo professor Marcos Morita) No so raros os exemplos de recm-milionrios que esto fazendo fortuna em negcios na internet. De redes sociais a compras coletivas, este tipo de empreendedorismo tem ganhado cada vez mais espao e conquistado novos adeptos. Aos que desejam se lanar a este novo desafio, seguem dicas essenciais para um empreendimento virtual. 1 Defina o foco Identifique eventuais necessidades no atendidas, que podem se tornar oportunidades lucrativas. Engana-se quem imagina que a competio no mundo virtual seja menor que em negcios reais. Apesar do pouco tempo, a rede atingiu com rapidez a maturidade. H, todavia, muitos nichos promissores, principalmente para os empresrios criativos que saibam tirar proveito da fora da rede mundial. O segredo est no foco, evitando entrar

94

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

em setores dominados por grandes empresas, cujo poder de barganha infinitamente superior. 2 Defina os produtos e/ou servios Escolha o modelo de negcios, assim como os produtos e/ou servios que sero oferecidos, cuja seleo no se restringe ao espao da prateleira ou gndola. A vantagem da internet que o estoque pode estar em local com menor custo por m2, como um galpo em alguma periferia ou at mesmo no prprio fornecedor. H outros tipos de negcios virtuais nos quais o custo de estoque praticamente zero, assim como a quantidade de itens infinita. As mercadorias esto dispostas em grandes servidores em formato digital msicas em MP3, vdeos em MP4 e at livros em PDF. 3 Crie uma identidade hora de definir o nome e a identidade visual de seu negcio logotipo ou frase de efeito. Cuide para que seja fcil de ser lembrado, marcante, curto e que descreva a alma do negcio. Verifique junto aos rgos responsveis a disponibilidade do nome de sua preferncia. 4 Legalize Procure um contador de sua confiana e registre a empresa legalmente. No pense que negcios virtuais esto alheios fiscalizao e tributao. Busque profissionais qualificados para cuidarem da parte legal antes de dar incio s negociaes. 5 Monte sua loja Apesar do menor investimento, colocar um website no ar requer planejamento e cuidado. Como num comrcio tradicional, o visual, os produtos e servios disponveis, a localizao das mercadorias, o atendimento e as formas de pagamento so tambm muito importantes no comrcio on-line. Tome alguns cuidados bsicos para encantar clientes novos e reter antigos. E lembre-se que clientes virtuais so ainda mais impacientes que aqueles que trafegam nos corredores dos shoppings centers.

95

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

6 Comprar ou alugar? O empresrio que se aventura no mundo virtual se depara com dilema similar. H duas escolhas possveis. Adquirir os prprios servidores, funcionrios especializados e locais adequados ou contratar os servios de um provedor de hospedagem, pagando tarifas mensais por pacotes prdefinidos. As grandes empresas em geral preferem investir quantias significativas em sua prpria infraestrutura, garantindo que seus clientes consigam acess-lo 100% do tempo. Empresas mdias ou pequenas podem optar por alugar um espao na nuvem de terceiros tecnologia denominada de cloud computing. 7 Garanta uma compra segura So inmeros os casos de fraudes na web, o que ainda inibe muitos potenciais clientes. Por isso, invista na segurana de seu website. H diversas empresas que oferecem servios de autenticao digital, dificultando a ao de indivduos com ms intenes. 8 D opes de pagamento Numa loja virtual, aceitar as diversas bandeiras e modalidades crdito e dbito; so obrigaes. Apesar da pouca utilizao, considere tambm as opes de depsito bancrio e boletos. Analise ainda a possibilidade de recebimento do pedido, alm da opo on-line. Alguns clientes ainda preferem utilizar telefone, fax ou e-mails. Abra enfim uma linha direta para que possam falar com algum funcionrio, apesar da tentao em criar modelos estticos e pr-determinados. A flexibilidade e negociao devem estar presentes mesmo no comrcio virtual. 9 No mundo virtual o soft opening mais difcil comum estabelecimentos comerciais iniciarem sua operao com o chamado soft opening ou inaugurao prvia. Durante este perodo sem alarde, os funcionrios podem ser mais bem treinados e os processos e procedimentos estruturados, com um menor movimento de clientes. Na modalidade virtual, possvel fazer isso antes da colocao do website no ar.

96

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Simule compras, teste links, configuraes, confronte produtos, cdigos, descries, preos e erros gramaticais. Utilize PCs, Macs e diferentes navegadores Internet Explorer e Mozilla. Caso tenha a verso para celular, faa o mesmo utilizando alguns modelos chaves de diferentes fabricantes. Enfim, simule os processos de devoluo de produtos, assistncia tcnica e telemarketing. 10 Divulgue Como numa loja tradicional, os primeiros dias so sempre bem difceis, at que as pessoas conheam, experimentem, comentem e retornem, fechando o ciclo de fidelizao. Para acelerar esse processo, interessante fazer links patrocinados e comprar palavras ou frases que identifiquem seu negcio. Outra forma so os banners, pequenos anncios que podem ser colocados em sites de grande circulao. Crie e mantenha sistemas de divulgao online e, se possvel tambm em outras mdias, tais como televiso, revistas e jornais. Seguindo estas dicas, o empresrio virtual ter mais chances de sucesso em seu novo negcio. O mais importante sempre seguir a frmula S=P3, onde sucesso = persistncia, preparao e planejamento. Boa sorte!.

97

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Vocabulrio web
Para voc que est caindo de paraquedas nesse mundo virtual, selecionei alguns vocabulrios mais usados na rea de e-commerce e marketing digital. Vai ser mais fcil de entender o palavreado web, embora, neste e-book, tenham sido descritos de forma bem simples para um melhor entendimento. Busca natural: chamada de busca orgnica quando o cliente no paga para ela estar l. So mostrados normalmente os 10 melhores resultados. Busca Paga (PPC): buscas pagas so aqueles anncios que ficam no lado direito do Google, em torno de trs anncios, ou na parte superior. Esses anncios so destacados com um fundo Bege, o que chamamos de PPC (Pagar Por Clique - Paper Click) Cliente: dando continuidade nossa sequncia lgica, o lead que virou prospect acabou de realizar uma compra de um produto ou servio, e agora passou a ser um cliente. Cliente algum que j tenha efetuado alguma compra com voc. Clique: o prprio nome define o conceito. Esta mtrica mostra quantas vezes nossos anncios foram clicados. Converso: aquilo que converteu sobre o total da sua meta. Para cada misso crtica, temos uma converso. Por exemplo: se voc tiver 100 visita no seu website e realizou 5 vendas, sua taxa de converso foi de 5%. apenas um exemplo. H sites que objetivam mais de uma converso. A primeira poder ser o contato com o cliente e a segunda converso ser a venda. CPA (custo por aquisio): basicamente, significa o custo que eu tenho por cada visita no meu website, por exemplo: se eu tenho um CPC de R$1,00 e 100 visitaram meu website, dando um custo de R$100,00, e dessas 100 pessoas 4 converteram, o meu CPA ser de R$25,00. CPC (custo por clique): o custo pago atravs dos links patrocinados. Quando anunciamos no Google, e o usurio faz uma pesquisa atravs do PPC

98

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

(Pesquisa Paga), esse clique que leva o visitante at nosso website chamado de CPC. CTR: clickthrough rate (taxa de retorno) uma mtrica utilizada, para saber se os anncios pagos esto dando resultados. Ele calcula quantas vezes o seu anncio foi exibido e a quantidade de pessoas que clicou nele, ou seja: a cada 100 exibies, 6 pessoas clicaram e acessaram o seu website, logo, o seu CTR foi de 6%. A frmula impresses/cliques. Double opt-in ou opt-in: esse tipo de lista necessita de uma confirmao do opt-in por e-mail. importante para a empresa de captura, pois garante que o e-mail do destinatrio no invlido ou ele coloque o e-mail de outra pessoa. A maioria das empresas nos envia um e-mail de confirmao. Impresso: impresses significam quantas vezes os nossos anncios foram exibidos, ou foram visualizados pelos usurios. Leads: quando o usurio efetua uma pesquisa na web, por exemplo, e essa pesquisa leva esse visitante para o seu website, ele poder acabar efetuando um cadastro para entrar em contato com voc, seja para um oramento, ou at mesmo para receber uma newsletter. Esse lead possvel cliente deve ser qualificado pela equipe de atendente, onde ir entrar em contato com ele, e analisar se ele tem potencial para ser um possvel cliente. Caso esse visitante seja qualificado como um possvel cliente, e no apenas um visitante curioso, ento ele se tornar um prospect. Misso crtica: podemos chamar de meta, tanto a captura do visitante ou a realizao de uma venda. O WebShoppers : um relatrio semestral gratuito disponibilizado pela ebit que analisa a evoluo do comrcio eletrnico, as mudanas de comportamento e preferncias dos e-consumidores. Opt-in: quando voc se cadastra pra receber um newsletter ou um e-book, esse tipo de lista que podemos enquadrar, ou seja, a lista de permisso dada pelo prprio usurio que deseja receber e-mails de uma empresa.

99

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Opt-out: o tipo de lista em que o usurio no deu permisso. Exemplo comum so listas de e-mails venda pela internet com 1 milho de e-mails. Esses e-mails, que muitas vezes voc recebe, de alguma empresa que voc nunca fez contato, poder ser um dos e-mails entre esse 1 milho que foi vendido para terceiros, e eles esto enviando a voc sem autorizao sua. Prospect: prospect um Lead que foi qualificado, ou seja, ele no um curioso que entrou em contato. O departamento sabe que ele tem condies de efetuar a compra ou fechar o contrato, ento ele passou a ser um prospect. ROI (return on investment): retorno sobre o valor investido. Falando em AdWords, normalmente o valor que calculamos em uma campanha, e quanto esse investimento nos trouxe de lucro, ou seja, a relao entre o dinheiro ganho ou perdido atravs de um investimento, e o montante de dinheiro investido. Taxa de Rejeio (bounce rate): toda vez que acontece uma visita no seu website, e esse visitante vai embora sem acessar outra pgina, considerada uma rejeio. Ento, se 100 pessoas acessaram seu website e 30 delas entraram e saram, sua taxa de rejeio foi de 30%. Websites com apenas uma pgina no mensurada pelo Google. Tipos de permisses em lista de e-mail Visitas (Trfego): a busca realizada atravs da busca natural ou atravs do PPC acaba levando o usurio a uma visita ao seu website, ao qual chamamos de trfego.

100

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Consideraes finais
Grande parte dos links e contedos que disponibilizo no meu blog, referente ao marketing digital, no meu entendimento, de nada adianta ter um bom produto se no souber como vender. por isso que nos dias de hoje, onde est em alta propaganda nas redes sociais, fazer um marketing de qualidade o ponto chave para qualquer negcio. Na web hoje, temos muito contedo gratuito sobre marketing digital, blogueiros e especialistas nessa rea, compartilham suas experincias diariamente. Porm, a maioria desse contedo de marketing digital, est focado para quem j tem um canal de comunicao com o consumidor, seja ele um produto ou servio atravs de websites. Esse e-book tem o intuito de facilitar o trabalho do leigo na criao de website ou e-commerce. Toda a parte prtica desse e-book foi desenvolvida sobre uma plataforma web, e no sobre um software em especfico, ou que tenha que realizar a instalao de algum aplicativo no seu computador. Por isso acredito que, criar website gratuito utilizando a plataforma WIX, seja o caminho mais curto para quem quer montar um negcio 100% on-line.

101

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Dados estatsticos do e-commerce no Brasil

O que a E-bit
E-bit pioneira em realizar pesquisas com usurios do meio online para analisar e entender hbitos e perfil do e-consumidor. Integrada ao Buscap Company em julho de 2007 sendo o brao de inteligncia de mercado da empresa, a E-bit referncia na divulgao de informaes do e-commerce. Todos os anos, a empresa gera o relatrio Webshoppers, em que as informaes extradas das pesquisas aplicadas so transformadas em valiosas informaes que auxiliam os grandes varejistas a entenderem o perfil de seus usurios e tambm as dificuldades que os mesmos tm em relao a seus sites. Segue abaixo alguns dados estatsticos, referente ao uso da internet no Brasil desde o ano de 2001.

Faturamento anual do e-commerce no Brasil 2001 2012

102

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Tabela de evoluo das vendas no Natal 2001 2012

Grfico estatstico de e-consumidores no Brasil 2001 2012

103

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Escolaridade - Quantidade de Transaes

Faixa etria e quantidade de transaes

Perfil do Consumidor - eBit

104

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Referncias
CAVALLINI, Ricardo. O Marketing depois de amanh. So Paulo:Digerati Books, 2006. TELLES, Andr. A revoluo das mdias sociais. So Paulo: M.Books do Brasil Editora Ltda, 2011. CONRADO, Adolfo. Voc j tem um plano B. http://www.conrado.com.br/PlanoB

websites usados como fontes e referncias


http://pt.wix.com/support/main/html5/o-editor-wix/loja-online/faq-lojaonline http://www.conrado.com.br http://www.8ps.com http://www.nordesteseo.com.br http://www.quarteldigital.com.br http://www.marcosmorita.com.br/2011/02/empreendedorismo-virtual-10dicas-para-abrir-um-negocio-na-web/ http://www.e-commerce.org.br/empreendedorismo_web.php http://www.registro.br http://www.infoebook.com.br http://www.nilsongomes.com.br http://www.lojaintegrada.com.br (Porta de e-commerce) http://deliverifish.wix.com/deliveryfish (Website exemplo do e-book)

105

APRENDA A CRIAR WEBSITES D asas sua imaginao


www.nilsongomes.com.br

Sobre o autor

Nilson Gomes
Nasceu na cidade de Giru-RS em 1969. Morou at os 17 anos no interior da cidade, no distrito de So Paulo da Tunas. Trabalhou durante 6 anos como pintor de carroarias, e aos 25 anos formou-se Tcnico em Processamento de Dados. Em 1995, abriu sua escola de informtica, a NOVATEC INFORMTICA, em 2001 passou em concurso pblico para Tcnico em Informtica para a Prefeitura de Giru. Oito meses depois, em 2002, assumiu outro concurso em nvel estadual pela Associao Sulina de Crdito e Assistncia Rural. Sua atuao hoje na rea de suporte e treinamento a usurios (HelpDesk). Em 2012, graduou-se no Curso de Licenciatura em Computao pelo IFF Instituto Federal Farroupilha Campus Santo Augusto/RS). Atualmente, Ps-graduando no Curso de Especializao em Educao Aplicada com nfase em Software Livre na mesma instituio. Nas horas vagas, pesquisador na rea de comrcio eletrnico e marketing digital, focando seu trabalho para estratgia de negcios on-line, com o objetivo principal de ajudar pequenas e mdias empresas a vender seus produtos e servios na Web com mais resultados.

106