Editora Mona Ltda - ME · Nossa proposta é ensiná-lo como utilizar ... trabalhar em conjunto...

Impresso no BrasilPrinted in Brazil

2016

Av. Marechal Deodoro, 314 - Centro - Curitiba/PRTelefone: (41) 3112-2112

Impressão • AcabamentoEditora Mona Ltda - ME

Rua José Bajerki, 271 • Curitiba/ PR • Cep: 82.220-320Fone (41) 3068-9009 • Pabx (41) 3068-9008

www.graficamonalisa.com.br

PREPPES

Desenvolvimento de Sites

Curitiba: PREPPES, 2016

XXX p. il.

APRESENTAÇÃO DO MÓDULO

Olá aluno! Mais uma vez estamos dentro do mundo online. Chegou a hora de aprender como o mercado de trabalho enxerga o profissional criativo, antenado com as novas tecnologias e preparado para vivenciar o mundo dos websites. E temos uma proposta interessante para você: ensinar técnicas e ferramentas de peso para planejar e desenvolver sites dinâmicos, atrativos e que podem transformar qualquer negócio. Vale a pena arregaçar as mangas e se dedicar ao conteúdo desta apostila.

Querendo ou não, é uma realidade: qualquer empresa precisa estar inserida no ambiente web, representada por um site dinâmico e que aproxime o cliente. E este será o seu papel, caro aluno. Você deverá ser o construtor desta relação, provando para as empresas que o negócio delas vai crescer muito se tiver presença digital.

E detalhe: você não precisará ser um expert em programação para desenvolver um site de qualidade. O nosso curso vai ensiná-lo que é muito mais fácil desenvolver websites do que você imagina. Seja você um iniciante ou simples curioso, entenda que as ferramentas que vamos apresentar farão toda a diferença na sua vida profissional como futuro web design ou, quem sabe, um grande webmaster.

A primeira parte deste módulo vamos concentrar nossos estudos na plataforma WordPress, a mesma que representa quase 70% dos sites responsivos desenvolvidos no mundo. Você será dono do seu projeto, e apresentará um site cheio de recursos e interatividade.

Na segunda parte vamos falar do Wix e suas ferramentas. Nossa proposta é ensiná-lo como utilizar as mais partes que compõem a estrutura de clique-e-arraste da plataforma. Você vai perceber que ela é muito simples e intuitiva de se trabalhar. E como projeto modelo para as aulas, vamos trabalhar em conjunto para criar uma loja virtual de qualidade.

E aí, interessou? Você vai se apaixonar pelo módulo.

Vamos nessa?

Um ótimo trabalho a todos.

Equipe de Ensino

SUMÁRIO

AULA 01 – PROJETANDO UM SITE 09POR QUE PROJETAR? 09COLHENDO AS INFORMAÇÕES 10FAZENDO O BRAINSTORM 10DESENHANDO UM LAYOUT 11TIPOS DE SITES 12PRINCIPAIS REGRAS PARA CRIAR UM SITE 13PLANEJANDO RECURSOS E TEMPO 14REGISTRO.BR 15

AULA 02 – FERRAMENTAS E PROGRAMAÇÃO 19SOFTWARES DE DESENVOLVIMENTO 19FERRAMENTAS CMS E HTML5 19PRINCIPAIS PLATAFORMAS PARA DES. DE SITES 20LINGUAGEM E BANCO DE DADOS 21PACOTES IMPORTANTES 22

AULA 03 – WORDPRESS - PRIMEIRO CONTATO 25O SISTEMA WORDPRESS 25CARACTERÍSTICAS DO WORDPRESS 26CONFIGURAÇÕES INICIAIS 27TEMAS OU TEMPLATES 27CONFIGURAÇÕES DE PERFIL E CONTA 28CONFIGURAÇÕES GERAIS 30O PRIMEIRO PROJETO 30

AULA 04 – WORDPRESS – SERVIDOR LOCAL 33BAIXANDO O PACOTE DO WORDPRESS 33ABRINDO O XAMPP 34CRIANDO UM BANCO DE DADOS 34INTERLIGANDO COM WORDPRESS 35

AULA 05 – WORDPRESS – PAINEL 39POR DENTRO DO PAINEL 39APARÊNCIA 39PÁGINAS 41GERENCIANDO USUÁRIOS 42FERRAMENTAS 43FEEDBACK 44

AULA 06 – WORDPRESS – CONFIGURAÇÕES 47AJUSTANDO MENUS 47AJUSTANDO AS CONFIGURAÇÕES 48NOTIFICAÇÕES 50FINALIZANDO A PRIMEIRA PARTE DO PROJETO 51

AULA 7 – PUBLICANDO – PUBLICANDO PT. 1 55O QUE É O BLOG? 55A IMPORTÂNCIA DOS BLOGS 55O CONTEÚDO IDEAL 56CATEGORIAS, TAGS E POSTS 57ORGANIZAÇÃO E PLANEJAMENTO DE POSTS 60

AULA 8 – PUBLICANDO – PT. 2 63TRABALHANDO COM IMAGENS 63INSERINDO OUTRAS MÍDIAS 65EDITOR DE POSTS 66AGENDAMENTO DE PUBLICAÇÃO 67

AULA 9 – OTIMIZANDO COM SEO 69ENTENDENDO O SEO 69COMO FUNCIONAM OS MECANISMOS DE BUSCA 70TÉCNICAS DE SEO PARA SITES E BLOGS 71SEO NO WORDPRESS 72PLUG-INS PARA SEO 75

AULA 10 – ESTATÍSTICAS DO SITE 77PORQUE MENSURAR O SEU SITE? 77EXPLORANDO AS ESTATÍSTICAS NO WORDPRESS 78APP WORDPRESS 80MELHORES FORMAS DE DIVULGAÇÃO DO SEU SITE 80GOOGLE ANALYTICS 81

AULA 11 – WIX – PT. 1 83O QUE É O WIX? 83CRIANDO UMA CONTA 84AÇÕES DO SITE 84 CUIDANDO DA APARÊNCIA 85ADICIONANDO E EDITANDO PÁGINAS 86ADICIONADO E GERENCIANDO IMAGENS 86

AULA 12 – WIX – PT. 2 89PROJETO LOJA VIRTUAL 89CRIANDO FORMULÁRIOS 90GALERIAS 91LINK INTERNOS E EXTERNOS 91INTERLIGANDO COM AS REDES SOCIAIS 92

AULA 13 – WIX - PROJETO LOJA VIRTUAL – PT. 1 95RECOLHENDO DADOS 95GERENCIANDO A LOJA VIRTUAL 95CRIANDO PÁGINAS 99CONTROLE DE PAGAMENTOS 99

AULA 14 – WIX - PROJETO LOJA VIRTUAL – PT. 2 101CARRINHO DE COMPRAS 101INSERINDO MAPAS 102ADICIONANDO CÓDIGOS HTML 102INSERINDO DOCUMENTOS 103WIX APP MARKET 103SEO DAS PÁGINAS 105PREPARANDO O SEU SITE PARA MOBILE 105

AULA 15 – PUBLICAÇÃO E DISTRIBUIÇÃO DO SITE 107HISTÓRICO DO SITE 107PLANOS 107DOMÍNIO E E-MAIL 109ESTRATÉGIAS DE DIVULGAÇÃO 110

9

DESENVOLVIMENTO DE SITES

Aula 1 - Projetando um Site

• Por que projetar? • Colhendo as informações • Fazendo o Brainstorm • Desenhando um layout• Tipos de sites • Principais regras para criar um site• Planejando recursos e tempo • Registro.br

POR QUE PROJETAR?

Sejam bem-vindos ao mundo dos sites. Certamente,

em alguma vez na vida, você já usou a estrutura www para

acessar algum tipo de site, seja ele para seu entretenimento,

leitura de notícias, compras, entre outras. E já deve ter

percebido que alguns deles são mal elaborados e outros bem

atrativos. Isso vai pela complexidade do projeto e motivação

do desenvolvedor.

A partir de hoje vamos entrar no mundo do desenvolvimento

de páginas de web, através de ferramentas interessantes,

práticas e intuitivas. Você vai conhecer as regras mais usadas,

as interligações, o uso do conteúdo e as marcas de design

que podem fazer do seu projeto um sucesso.

E por falar em projeto, que tal rever a pergunta do subtítulo: por que projetar? Já ouviu aquela expressão

que diz: “o barato sai caro”? Pois é! Se na nossa vida não executamos um planejamento de nossas

ações ou atividades, o que era para ser fácil se torna difícil. Por isso é importante planejar.

Para criar um site, você deve planejar as cores, as formas, o conteúdo, a interatividade, os custos de

registro e hospedagem, entre outros. Tudo precisa estar na ponta do lápis para que você saiba quanto

vai gastar e quanto cobrar. Além disso, existe um planejamento de tempo e revisões, para que o site

seja entregue conforme o seu cliente solicitou. Nada de atrasos.

Acredite, projetos bem planejados garantem uma economia de tempo, pessoal e recursos. Ele atinge

seu objetivo, sem agregar mais custos que o seu próprio valor. Nenhum cliente quer um projeto mal

elaborado e ter que ficar fazendo mudanças a toda hora.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

11


10

descartada ou julgada como errada ou absurda, até que todas estejam anotadas num papel ou num

quadro e aí sim o grupo escolhe as melhores opções.

Valem algumas informações muito importantes sobre uma reunião de brainstorming:

1. Proibição às críticas;

2. Uso da criatividade plena;

3. Escolha um ambiente que inspire;

4. Definição um moderador/Facilitador;

5. Exponha os requisitos;

6. Faça a seleção das melhores ideias;

7. Forneça ao grupo um relatório com as ideias selecionadas.

DESENHANDO UM LAYOUT

Assim que os requisitos forem coletados e a reunião de brainstorming for realizada, é a hora de

alguém se responsabilizar por rascunhar o layout do site. Esta atividade pode

ser feita numa folha de papel em branco ou através de ferramentas como o

Fireworks ou Photoshop. O que você precisa entender é que desenhar um

layout não tem nada de muito complicado. Concentre-se numa visão limpa,

bonita e combinando as cores.

Outra característica que importa (mas não exatamente agora) é a experiência

do usuário. O seu site não pode ser de difícil navegação, utilizando páginas

com layouts bem parecido, se não iguais.

Geralmente, nas ferramentas que vamos usar para desenvolver o nosso

projeto, usamos os chamados templates, que são layout já pré-definidos. Mesmo assim, desenhar o

rascunho ajuda você a não perder tanto tempo para escolher o melhor template.

COLHENDO AS INFORMAÇÕES

O primeiro passo de qualquer projeto de site é colher

todas as informações que farão parte dele. Se você foi

contratado para criar um site responsivo para uma agência

de viagens, por exemplo, então deverá entender qual o

público-alvo deles, as cores da empresa, os dados dos

pacotes que serão vendidos, as promoções, entre muitos

outros. Todas as informações precisam estar anotadas

para que a etapa do brainstorming seja a mais completa

possível.

Esta parte de colher as informações essenciais junto ao seu cliente é chamado de coletar requisitos.

Você entende e documenta todas as necessidades de todas as partes interessadas, tudo para atender

exatamente do que ele (cliente) espera do projeto.

FAZENDO O BRAINSTORMING

Você certamente já ouviu a palavra

brainstorm neste curso. Relembrando,

ela nada mais é do que uma tempestade

de ideias. Essa é uma expressão da língua

inglesa que une as palavras brain (cérebro)

com storm, que significa tempestade.

Simples assim!

Da palavra surge a ação. Fazer brainstorming

é realizar uma dinâmica/técnica que

envolve um grupo de pessoas para resolver

problemas específicos, desenvolver novas

ideias ou projetos, ou simplesmente reunir informações úteis para futuras ações. Neste caso, é uma

reunião que permite todo o planejamento do seu site.

A técnica é bem simples: reúnem-se um grupo de pessoas em um ambiente propício à criatividade,

para que cada um possa revelar suas ideias e seus pensamentos, sem limites criativos. Tudo, claro,

dentro dos requisitos coletado por você junto ao cliente. Numa reunião de brainstorming cada um

dá suas opiniões até que todo o grupo chegue a um resultado comum. Nenhuma ideia deve ser

13


12

Blogs

Sites adicionais aos sites institucionais e dinâmicos. Geralmente

trabalham com conteúdo exclusivo sobre um determinado

assunto. São também potenciais ferramentas de divulgação e

marketing.

Portal

São agregadores de conteúdos diversos. Geralmente, eles são

construídos com uma gama grande de conteúdo, tais como

notícias, jogos, vídeos, entre outros. São exemplos de portais: G1,

UOL, R7.

PRINCIPAIS REGRAS PARA CRIAR UM SITE

Como todas as atividades que nos rodeiam, criar um site também requer regrinhas básicas:

1. Seja objetivo – Não trabalhe com informações demais para não cansar o usuário. Saiba bem o que você vai fazer. Divulgar sua marca? Vender produtos? Divulgar notícias? Pense exata-mente no que quer.

2. Público-alvo – Pense em quem vai visitar o seu site. Jovens, adultos, idosos, homens, mulheres, estudantes, executivos? São eles que vão consumir o conteúdo do seu site.

3. Conteúdo – Vamos falar disso mais a frente, porém é importante que você saiba que site bom é aquele tem conteúdo de qualidade.

4. Layout agradável – Não basta ter um conteúdo maravilhoso, se o visitante não consegue encontrá-lo. Pense num layout simples, agradável e facilite o acesso de qualquer tipo de usuário, do menos ao mais experiente. Uma regra antiga chamada “Regra dos três cliques” diz que qualquer informação no site deve ser encontrada em apenas três cliques em links diferentes. Acima disso o internauta desiste.

5. Atualização – Mantenha seu site sempre bem atualizado. Ninguém gosta de acessar um site hoje e encontrar informações do ano passado.

6. Uso da língua – Escrever corretamente é uma obrigação dentro do site. Se você quer que ele tenha credibilidade, use um bom português, revisando sempre para evitar erros de ortografia e concordância.

TIPOS DE SITES

Atualmente, os sites estão cada vez mais dinâmicos, com interatividade e riqueza visual. Isso foi

graças a Web 2.0 e a chamado HTML 5. Como a variedade é muito grande, existem diferentes tipos de

sites mercado. Entre eles, estão:

Site Institucional - Usado pela maioria das empresas, composto

basicamente por páginas como informações sobre o negócio,

serviços, produtos, preços, e formas de contato. É um tipo de site

que se preocupa com a apresentação da empresa e sua presença

na internet. É fácil de ser criado e os custos são pequenos. Eles

geralmente não aproveitam o potencial da internet para interagir

com o cliente.

Site responsivo

É um tipo de site flexível que automaticamente se encaixa no

dispositivo do usuário, seja ele um PC, smartphone, tablet, entre

outros. Isso é para melhorar a experiência e a navegabilidade do

usuário, uma vez que a variedade de dispositivos conectados à

internet aumenta a cada dia. Toda empresa precisa considerar

que seu site deve ser responsivo.

eCommerce

São os sites de comércio eletrônico, ou seja, permitem compra e

venda de produtos. Eles são construídos com sistemas de

verificação e pagamento virtual que permitem que o consumidor

encomende diretamente da loja online, com rapidez e de forma

bastante segura e intuitiva.

Onepage

Sites em que toda a informação é carregada em uma única

página, à medida que o usuário percorre o conteúdo. A

principal vantagem desse tipo de site é que ele funciona bem

em aplicativos mobile. Ao clicar em qualquer link do menu, o

site apenas rola automaticamente até a respectiva seção, sem

carregar uma nova página.

15


14

No exemplo do tempo, cada equipe deverá definir e controlar o tempo das entregas. Lembre-se que são dois meses para executar o projeto, então defina todas as fases e todas as datas para que todos possam cumprir com exatidão. O seu professor vai orientar.

REGISTRO.BR

Segundo o próprio site – www.registro.br – ele é o departamento do NIC.br responsável pelas atividades de registro e manutenção dos nomes de domínios que usam o .br. Eles também executam o serviço de distribuição de endereços IPv4 e IPv6 e de números de Sistemas Autônomos (ASN) no Brasil. O site lista todas as categorias de domínio .br oferecidas por ele. Estas categorias podem ser divididas em 3 tipos, sendo que os domínios de pessoa física e profissionais liberais só podem ser registrados por um titular com CPF ou CNPJ para pessoa jurídica.

Você deve fazer pesquisas sobre os domínios antes de começar qualquer projeto. Se você precisa registar um nome para seu site, verifique se ele já está sendo usado por outra pessoa. Contudo, se a empresa ou pessoa física que te contratou para desenvolver o site já tiver o domínio registrado, não há necessidade de fazer pesquisas. Basta começar a criação.

*Acrescentar todas as fases até o encerramento do projeto

CRONOGRAMA DE TEMPO

Etapa Descrição Inicio Fim

Planejamento Brainstorming e rascunho do site 11/11/20... 11/11/20...

Plataforma Definição da plataforma de uso 12/11/20... 12/11/20...

Construção – Fase 1

Entrega do design do site 13/11/20... 19/11/20...

Revisão e controle

Controle e validação da Fase 1 20/11/20... 20/11/20...

7. Cores e imagens - As cores influenciam o comportamento das pessoas de diversas formas. Lembre-se do seu estudo de cores e aplique ao seu site. Cuidado para não cansar o internauta com cores estranhas. Também se preocupe com a qualidade das imagens que fazem parte do seu site. Tente usar imagens de qualidade e tratadas em softwares de edição.

PLANEJANDO RECURSOS E TEMPO

Antes de começar a construção de um site, é importante reservar um tempinho para analisar e planejar os recursos que serão usados em todo o processo. Isso pode ser feito numa tabela simples, sem muita complicação. Defina algumas tarefas, escolha a melhor infraestrutura, controle o tempo, entre outros. Você pode até fazer um breve orçamento para verificar os melhores preços.

*Estes valores foram retirados do site da GoDaddy e do Registro.br

RECURSOS HUMANOS

Função/Cargo Descrição Quantidade

Web design Responsável pelo design do site 02

Programador Responsável pela parte lógica/programação do site 02

Webmaster Responsável pelo projeto do site01

Estagiário Assistente de programação 01

RECURSOS HUMANOS

Função/Cargo Descrição Quantidade

Web design Responsável pelo design do site 02

Programador Responsável pela parte lógica/programação do site 02

Webmaster Responsável pelo projeto do site01

Estagiário Assistente de programação 01

17


16

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – Desenhando o site Depois que o brainstorming da atividade anterior foi finalizado, é a hora de alguém de sua equipe se responsabilizar por rascunhar o layout do site. Esta atividade pode ser feita numa folha de papel em branco. Lembre-se que o layout não pode ser muito complicado. Concentre-se numa visão limpa, bonita e combinando as cores.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 3 – PlanejamentosFaça as tabelas de planejamento para os recursos que você vai precisar para desenvolver o

projeto do site. Faça uma pesquisa de preços de hospedagem, registro, entre outros. Já o cronograma de tempo é obrigatório que seja concluído ainda nesta aula.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

*Acrescentar todas as fases até o encerramento do projeto

Ações a serem

Etapa Descrição início fim

E em relação aos valores, o próprio site disponibiliza uma tabela para que você possa consultar os valores anuais de registro de um domínio. Faça as contas, negocie com o seu cliente e veja qual o melhor custo/benefício para o tempo que seu cliente quer que o site fique no ar.

ATIVIDADES

Atividade 1 – Estudos de casoVamos iniciar o nosso primeiro projeto. Para isso, sugerimos dois estudos de caso que deverão ser trabalhados pelas equipes. Formem times de, no máximo, 4 pessoas e escolha uma pessoa para liderá-lo. Em seguida, escolha um dos cases abaixo e desenvolva o brainstorming do projeto.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Case 1 – PizzariaSua equipe foi contratada para desenvolver o site de uma pizzaria (o nome vocês devem escolher) na sua cidade. O estabelecimento já funciona há 10 anos e ainda não tem site. O proprietário quer disponibilizar o cardápio, dar dicas de sabores e combinações de pizzas, fotos do local, reservas de

mesas e eventos, entre outros itens que possam chamar a atenção do cliente. Ele deixou livre para que vocês definam as cores e o layout do site.

Case 2 – ONG de proteção aos animaisUma ONG (o nome vocês devem escolher) que protege animais domésticos em situação de abandono deseja criar um site com a sua equipe. Eles precisam que as informações sobre animais perdidos, proteção, dicas, fotos, contatos, entre outros, cheguem até a população. Eles também deixaram livre para que vocês definam as cores e o layout do site.


18

19


Aula 2 - Ferramentas e Programação

• Softwares de desenvolvimento • Ferramentas CMS e HTML5• Principais plataformas para desenvolvimentos de sites• Linguagem e banco de dados • Pacotes importantes

SOFTWARES DE DESENVOLVIMENTO

No mundo do desenvolvimento, existe uma

divisão interessante entre duas formas de criar um

site: através de um software de desenvolvimento

(que utiliza HTML) ou de uma plataforma CMS. Para

não confundir a sua cabeça, vamos esclarecer a

diferença entre eles.

Começamos pelos softwares de desenvolvimento

de site, que nada mais são do que programas

criados com a função de desenhar, programar e

publicar um site. Dos softwares mais conhecidos,

destacamos o Adobe Dreamweaver, que vai desde um simples editor HTML até o uso de tecnologias

web modernas, tais como XHTML, CSS, JavaScript, PHP, entre outros.

Ele possui um modo Design, como um editor WYSIWYG (What You See Is What You Get, ou O que

você vê é o que você tem) que esconde o código HTML para que pessoas sem muito conhecimento

de programação possam criar facilmente suas páginas e aplicações para web. O Dreamweaver é

usado por muitos desenvolvedores ao redor do mundo que, através do seu feedback constante,

acabam contribuindo para que a Adobe melhore cada vez mais a vida de quem utiliza o seu software.

FERRAMENTAS CMS E HTML5

Como dissemos, é possível dividir as ações de desenvolvimento de sites como ferramentas

práticas, diretamente ligadas a nuvem. Começamos a entender mais sobre isso com as

ferramentas CMS.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

21


20

Wordpress - É a maior plataforma do mundo quando se trata de construção de

sites. Recomendável conhecimentos básicos de programação apenas para

personalizar a página. Ele disponibiliza uma conta gratuita e outra paga. Para a

escolha de qual utilizar, vai depender muito mais do template a seu usado e do

serviço de hospedagem.

Wix – Plataforma que utiliza HTML5 e permite interligação com base de dados,

além de ser bem intuitivo. Muito conhecida e usada.

uCoz – Uma ferramenta em amplo crescimento e que começou a operar no Brasil não tem muito tempo. O construtor de sites grátis tem uma grande variedade de templates para ativar sua criatividade.

GoDaddy - É uma empresa registradora de domínios e hospedeira de sites. Ele também possui um construtor de sites bem fácil de ser usado.

LINGUAGEM E BANCO DE DADOS

Você criou um blog ou um site para uma empresa e precisa que ele armazene (claro!) as informações de conteúdo que você acrescentar. Para isso, ele se comunica com um banco de dados, que é um conjunto de informações que são inseridas ao longo da utilização. Estas informações podem ser números, imagens, texto, vídeos, entre outros.

O banco de dados mais comum das ferramentas CMS é o MySql, que está incluído na contratação do seu serviço de hospedagem. As vantagens de utilizar banco de dados como o MySql, por exemplo,

é a portabilidade (suporta praticamente qualquer plataforma atual), compatibilidade, desempenho, fácil de usar, software livre e possui uma interface gráfica a bem intuitiva.

Ainda, para conectar um site a um banco de dados é necessária uma linguagem de programação que suporte este tipo de acesso. E dentre as mais conhecidas e preferidas dos desenvolvedores, estão: JavaScript, Java, PHP, Python, entre outras. Não é nosso objetivo explicar o uso destas linguagens durante este módulo, mas é importante que você saiba o que está por trás de uma página web.

Mas o que é um CMS? A sigla significa Content Management System ou

Sistema de Gerenciamento de Conteúdo, ou seja, administrar conteúdos

em páginas da web. É uma ferramenta que permite a um editor criar,

classificar e publicar qualquer tipo de informação em uma página web. É

uma mão na roda para quem tem pouco conhecimento de informática

e programação. Estas pessoas não devem se preocupar com o código

da página nem as particularidades de programação da plataforma onde

estiver hospedada a web.

Dentre as principais plataformas que oferecem ferramentas CMS podemos

destacar: Wordpress (indicado para os blogs), Drupal, Mambo, Joomla,

entre outros.

Já o HTML5 é uma evolução do famoso HyperText Markup Language (Linguagem

de marcação de hipertexto), ou seja, o HTML. Ele é feito para trabalhar as novas

funções de multimídia, tais como a inclusão de vídeos nas páginas, geolocalização,

acessos off-line via cache, armazenamento de dados, entre outros. Sua essência

se baseia na forma de leitura por seres humanos em qualquer dispositivo, uma vez

que ela é compreendida pela maioria deles.

Para os desenvolvedores, fica mais rápido produzir sites limpos e dinâmicos. Para o usuário, a

navegação se torna mais ágil, além de visualmente atrativo. Algumas ferramentas que utilizam

HTML 5, como o Wordpress e o Wix, serão estudadas mais adiante neste curso.

PRINCIPAIS PLATAFORMAS PARA DESENVOLVIMENTOS DE SITES

Todos os dias surgem novas plataformas que oferecem ferramentas para criação de sites, sem

a necessidade de um especialista. E isso tem chamado a atenção de pessoas que querem criar elas

mesmas o site para o seu negócio. É um tipo de serviço prático, com uma grande facilidade de uso

da plataforma e que não exige conhecimentos avançados de programação ou tecnologia.

Se você ainda não se convenceu de que esta é uma grande oportunidade de negócios, saiba que

em apenas algumas horas é possível criar uma página e disponibiliza-la na web para que o mundo

inteiro veja. Dentre as principais plataformas, temos:

23


22

A instalação segue o padrão tradicional de extração dos arquivos. Ao final, você

conseguirá abrir o painel de controle do XAMPP.

Ele vai pedir para que o computador seja reiniciado. Depois que isso acontecer, abra o painel de

controle do XAMPP e inicie os servidores. Nas próximas aulas vamos ajustar o Admin da segunda

linha (onde diz MySQL) para abrir o banco de dados que vamos usar.

Os servidores do XAMPP estão no endereço http://127.0.0.1, e o armazenamento dos arquivos será

na pasta htdocs no diretório que você extraiu os arquivos do XAMPP.

ATIVIDADES

Atividade 1 – Passeio pelas plataformasMesmo que esta apostila vá trabalhar com duas das mais importantes ferramentas de desenvolvimento

web, nada impede que você possa dar uma “espiadinha” nas plataformas sugeridas e outras do

mercado. Abra os sites e faça um levantamento de suas principais características, tais como a

quantidade de sites e blogs elaboradas, tecnologia (CMS ou HTML5), vantagens e até mesmo as

desvantagens. Isso vai ajudar você e sua equipe a entender melhor as próximas etapas. Faça suas

anotações:

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

PACOTES IMPORTANTES

Começamos agora o estudo de alguns dos principais pacotes de servidores de código aberto do

mercado, incluindo FTP, banco de dados, linguagens de programação, entre outros. É através deles

que vamos conseguir rodar sistemas como WordPress e Drupal localmente (no seu computador).

Mas espere? Porque usar o meu computador e não o sistema na nuvem?

Calma! Vamos concentrar nossos estudos nos sistemas online, na nuvem. Mas é importante que

você saiba como instalar localmente um servidor, caso você queira mudar alguma coisa no tema,

mas não deseja correr o risco de errar alguma coisa e seu site sair do ar. Este estudo vai deixá-lo

muito mais experiente no assunto.

Mas qual pacote vamos utilizar? Dentre várias opções, tais como o Apache, o PHP Triad, o

Tomcat, escolhemos um pacote chamado XAMPP, composto pelas iniciais X (diferentes sistemas

operacionais), Apache, MariaDB, PHP, Perl. Ele é formado por um pacote que incluí os principais

servidores de código aberto existentes, incluindo FTP, MySQL e Apache com PHP e Perl. Você instala

baixando o executável e extraindo o arquivo compactado. Depois, basta executar o aplicativo que

inicia os servidores. No Windows, o executável possui o nome xampp_start.exe.

Como instalar o XAMPPPrimeiro de tudo você precisa baixar, certificando que você escolheu a versão correta. Use o site

oficial do XAMPP - https://www.apachefriends.org/pt_br/index.html - e execute o download. Depois

de baixado, execute o instalador, verifique o MySQL e Apache. O seu professor vai demonstrar.

Depois de baixado, abra o arquivo executável e siga as etapas de instalação.


24

Atividade 2 – Instalando o XAMPPPara que o exemplo da apostila fique claro, que tal utilizar uma máquina virtual para instalar o XAMPP. Execute todas as etapas e faça as configurações que o seu professor definir. Anote qualquer

informação extra que você precisará para as próximas aulas.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 3 – Responda:a) O que é uma linguagem de programação?

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________b) O que significa banco de dados?

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________c) O que você entende por CMS?

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________d) O que é uma linguagem de marcação?

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

25


Aula 3 - Wordpress - Primeiro contato

• O Sistema Wordpress • Características do Wordpress • Configurações iniciais • Temas ou templates • Configurações de perfil e conta • Configurações Gerais • O primeiro projeto

O SISTEMA WORDPRESS

Nas aulas anteriores, já começamos a falar um pouco sobre este sistema que tem conquistado

cada vez mais e mais desenvolvedores mundo afora – o WordPress. Ele nada mais é do que um sistema

de gerenciamento de conteúdo na web, ou seja, um CMS (Content Management System), escrito em

PHP e com um banco de dados em MySQL. Sua proposta inicial era apenas para a criação de blogs,

mas hoje é muito utilizado para a criação de sites profissionais, tais como: comércio eletrônico, revistas,

jornais, portfólio, entre outros. Segundo dados, atualmente é maior plataforma de Gerenciamento de

Conteúdo do mundo, com quase 70% do mercado.

Para quem não conhece um pouco da história do WordPress, ele foi criado em 2003 por Matthew

Mullenweg e Ryan Boren com o intuito de ser gratuito, fácil de usar, com atualizações, qualidade

e segurança. O WordPress existe em duas versões: a WordPress.org e WordPress.com. A diferença

entre elas é que a primeira é mais completa, profissional e personalizável, sendo necessário a

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

27


26

CONFIGURAÇÕES INICIAIS

Antes de começarmos a desenvolver qualquer tipo de site utilizando o Wordpress é preciso seguir alguns passos importantes para configurar o uso da ferramenta. A partir de agora, vamos adicionar dicas e configurações básicas que vão fazer toda a diferença nesta primeira etapa do seu projeto.

Seguindo as estratégias iniciais, temos:

• Crie uma conta clicando no botão Criar site e seguindo os passos iniciais solicitados pela plataforma;

• Defina a aparência através de um tema padrão que você pode escolher no momento da criação e depois alterar se sentir vontade;

• Definir título e a descrição;

• Definir uma estrutura de links permanentes. Vamos falar disso mais a frente;

• Configurar as opções de leitura e escrita.

TEMAS OU TEMPLATES

Depois de criada uma conta no Wordpress, começa a construção das suas primeiras páginas. E para isso precisamos dos temas (templates) para estabelecer um visual e estilo a sua página. Ele será base para que você possa montar, editar e personalizar as páginas do seu site. Como já dissemos, no Wordpress existem temas gratuitos e Premium (pagos). Ambos possuem a mesma tecnologia de desenvolvimento e tem os mesmos recursos de edição. A vantagem do pago é a inserção de widgets diferenciados. Mas existem bons temas gratuitos disponíveis.

Além dos temas já disponíveis, você pode encontrar muitos outros em sites como Theme Forest, Elegant Themes ou StudioPress. Na própria plataforma, você encontra os temas no menu Aparência – Temas no seu Painel.

Mas antes de escolher o tema certo para seu site ou blog, confira se ele será acessado corretamente tanto em smartphones, tablets e computadores (responsivo), se carrega de forma rápida e se a sua atualização é recente. Por isso, antes de ativar, dê uma visualizada e navegada pelo tema clicando

no botão Visualizar.

contratação de um servidor para hospedagem. Já a segunda versão não necessita da contratação

de um servidor, porém é mais restrita.

CARACTERÍSTICAS DO WORDPRESS

Dentre as várias características que permitem o sucesso do Wordpress, podemos destacar:

• Uso da plataforma online através do seu site oficial - https://br.wordpress.com

• O usuário pode reorganizar todo o layout através dos chamados widgets sem nenhuma necessidade de editar códigos;

• Sua versão de instalação é muito simples e intuitiva, onde as atualizações são feitas facilmente através do painel de controle. Na prática, não leva mais do que 5 minutos;

• Repleto de temas, tornando a aparência e design adaptável conforme o seu gosto e necessidade. Ele disponibiliza temas gratuitos e Premium para que o site fique a cara do seu cliente;

• Possui recursos nativos que aumentam a experiência de publicação da plataforma. Além dos temas, você pode usar APIs para criação de plugins, publicar por e-mail, verificar estatísticas, inserir mídias, entre muitos outros;

• É distribuído sob a licença GPLv2;

• Permite a importação e exportação de dados;

• Repleto de plug-ins para diversas funcionalidades. Aí vale o conhecimento em programação PHP para desenvolver plug-ins personalizados e fazer com que o site tenha a funcionalidade que precisar;

• Possui uma comunidade de desenvolvedor (em português também) que promovem eventos e tiram dúvidas online.

29


28

Já nas Configurações da conta, é possível alterar o nome do usuário do perfil, endereço de

e-mail para verificações e notificações, idioma, endereço (URL), privacidade, entre outras. A imagem

abaixo apresenta a tela de configuração da conta. Quanto aos itens de segurança e notificação,

é importante entender que você pode alterar a senha quando sentir que existem problemas no

seu perfil e receber as notificações de comentários, curtidas, menções, diretamente no e-mail que

deixar configurado no perfil. Você pode até escolher o dia da semana e a hora que estes e-mails vão

ser enviados a sua caixa de entrada. Confira a tela de notificações.

E a maneira mais fácil de instalar um tema é através do próprio painel. Você pode instalar os temas

disponível gratuitamente/pagos ou fazer upload do tema utilizando um arquivo de formato .zip.

Selecionou um tema do próprio Wordpress? Conferiu os recursos e gostou dele? Então é só clicar

em Ativar e pronto. Simples assim!

CONFIGURAÇÕES DE PERFIL E CONTA

Quase 100% das plataformas precisam de ajustes para identificação correta do seu perfil. E no

Wordpress não é diferente. Clicando no ícone do seu Avatar, no canto direito superior, você acessa

a página de configurações do seu perfil. Nela ajusta o nome, sobrenome, nome de exibição, a

descrição Sobre Mim, os links associados ao perfil, entre outros.

31


30

ATIVIDADES

Atividade 1 – Iniciando o projetoComo você leu no tópico anterior, vamos iniciar o projeto do site dentro das especificações

definidas no brainstorming. Separe as tarefas, o conteúdo e defina os prazos para execução. Lembra

do cronograma da primeira aula? Ele será muito útil para que não ocorram atrasos nas entregas. Crie

o perfil no site do Wordpress e mãos à obra!

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – ConfiguraçõesDefinimos nesta aula alguns passos iniciais para utilização do Wordpress, tais como a definição do

tema, as configurações de perfil, de notificação, entre outros. Deixe todas as configurações realizadas

para evitar qualquer contratempo.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

CONFIGURAÇÕES GERAIS

Outra forma de você aprofundar nas configurações do Wordpress e através do menu

Configurações Gerais do Painel. Lá você pode alterar o título e a descrição, fuso horário, formatos de

data e hora, entre outros. Uma observação importante é sobre as informações do título e descrição,

pois elas vão fazer a diferença quando formos tratar de SEO nas próximas aulas.

O PRIMEIRO PROJETO

Lembra do o brainstorming da primeira aula? Chegou a hora de colocar o seu projeto em prática

e transformar o que estava no papel em realidade. O seu professor vai definir os principais detalhes

da execução, mas seu time precisa ficar atento a divisão de partes para não sobrecarregar ninguém.

Vamos usar o Wordpress para desenvolver um site sobre o estudo de caso que vocês escolheram.

Lembre-se que tudo aquilo que foi planejado precisa ser executado.

Uma dica importante é que já comece a usar o conteúdo separado nas aulas anteriores. Confiram

as imagens, os textos e demais informações para ver se eles enquadram dentro do seu projeto. Se

for preciso colocar vídeo, tente identificar quais os links que você usará.

32

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

33


Aula 4 - Wordpress - Servidor local

• Baixando o pacote do Wordpress • Abrindo o Xampp • Criando um banco de dados • Interligando com Wordpress

BAIXANDO O PACOTE DO WORDPRESS

Como tudo é questão de conhecimento, claro que não poderíamos deixar de falar da instalação

do Wordpress como servidor local, ou seja, instalado no seu próprio computador e não nos servidores

Wordpress. Para que isso seja possível, já iniciamos o nosso trabalho na aula anterior falando sobre a

instalação do pacote Xampp. Agora, é a vez de fazer sua configuração, instalar o pacote do Wordpress.

org, montar o nosso banco de dados e interligar com a pasta onde serão armazenados os dados.

Vamos começar baixando o pacote do Wordpress no site https://br.wordpress.org. Dentro do site,

baixe a versão mais recente deste pacote.

Em seguida, extraia o arquivo baixado no formato zip para dentro da pasta htdocs da pasta XAMPP.

Por padrão, ela será C:/Xampp/htdocs.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

35


34

Com o banco de dados pronto, agora é hora de criar um usuário para ele e dar privilégios. Na

mesma tela do phpMyAdmin selecione a aba Privilégios e em seguida clique em Adicionar novo

usuário (add user account).

Nesta tela aberta vamos dar um nome ao novo usuário,

definir uma senha e atribuir privilégios totais de administração

do banco. No exemplo ao lado, escolhemos “Master” para

o nome de usuário e a senha “12345”. Não se esqueça de

selecionar no campo Servidor (Host name) a opção Local.

Automaticamente ele acrescentará o localhost.

No rodapé da página haverá um botão Executar. Pronto, seu

banco de dados e usuário estão prontos. Agora é interligar

com o Wordpress.

INTERLIGANDO COM WORDPRESS

Para dar prosseguimento ao nosso trabalho, volte a pasta C:/xampp/htdocs e renomeia a pasta

Wordpress para um nome do seu projeto. Simples assim.

ABRINDO O XAMPP

Depois de instalado, o XAMPP agora permite ser gerenciado. Para isso, abra o seu executável (XAMPP Control Panel) e inicie o Apache e o MySQL, clicando nos botões Start. Assim que iniciados, eles ficarão na cor verde.

CRIANDO UM BANCO DE DADOS

Como vamos utilizar o Wordpress de forma local é importante criarmos um banco de dados para armazenar todos os posts, imagens e demais dados do site. Esse banco de dados será definido

com o nome que você desejar, mas dê preferência por usar o nome do seu projeto.

Com o pacote de servidor instalado e iniciado, abra seu navegador de internet e digite http://

localhost/phpmyadmin ou clique no botão Admin do Mysql (2ª linha). Esta é a tela onde podemos

criar e gerenciar as bases de dados MySQL.

Na tela, clique na aba Banco de Dados e em seguida, dê um nome para o novo banco. De preferência,

use o nome relacionado com o site que você for desenvolver. Pronto, base de dados criada.

37


36

Na tela seguinte preencha os dados solicitados. Se ao digitar uma senha ele insistir em aparecer como fraca, não se preocupe. Ela só aparecerá como forte se for uma senha grande. Clique em Instalar Wordpress e pronto.

VERIFICANDO Só para ter certeza de que as informações estão sendo gravadas no banco de dados que criamos, resolvemos elaborar um post simples, conforme a tela abaixo. O seu professor vai mostrar para você.

Depois do clique no botão publicar, retorne ao banco de dados dentro do PhpMyAdmin. Perceba na próxima imagem que agora o banco de dados está cheio de tabelas (antes estava vazio). E dentre as várias tabelas, uma dela tem o nome wp posts. É nela, por exemplo, que são gravados os posts do nosso site.

No caso do exemplo que vamos usar nas próximas aulas, o nome da pasta será “karpo”. Com

ela renomeada, volte ao navegador e digite numa nova aba o seguinte endereço: localhost/

nomedapasta. No caso do nosso exemplo digitamos localhost/karpo. A página abaixo será exibida.

Vamos lá?

A próxima página pede que você faça a configuração do arquivo wp-config.php de forma visual.

Coloque o nome do banco de dados que você criou lá no phpMyAdmin, o usuário e a senha. Os

outros dois mantenha do jeito que está.

Após clicar no botão enviar, a mensagem abaixo aparecerá na sua tela. Agora é só instalar.


38

E se você clicar no link desta tabela, vai abrir outra tela com a visão do post que acabou de criar. Veja a imagem abaixo:

Pronto. Agora está tudo conectado. A partir da próxima aula, vamos aprofundar no mundo do Wordpress, mas na sua versão gratuita online. Aproveite este conhecimento que você adquiriu hoje e os que vai adquirir nas próximas aulas para testar as duas plataformas. E ficar expert em Wordpress. Aproveite.

ATIVIDADES

Atividade 1 – Instalando o servidor localVocê percebeu que a aula de hoje foi quase um passo-a-passo? Para fixar melhor os seus conhecimentos, vamos instalar um servidor local utilizando o XAMPP e o pacote Wordpress.org. Siga todas as orientações da apostila e peça ajuda ao seu professor, se necessário. Confiamos em você.

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

39


Aula 5 - Wordpress - Painel

• Por dentro do painel • Aparência • Páginas• Gerenciando usuários • Ferramentas • Feedback

POR DENTRO DO PAINEL

Agora que você já entende um pouco mais do Wordpress, chegou a hora de

conhecer a interface do Painel de Administração para que ele se adeque as suas

necessidades.

A grande vantagem em escolher usar um CMS, seja para um blog ou um site, é que

você escolhe lidar com recursos simples e gerenciáveis. Esse é o papel do Painel

WP Admin, que num primeiro momento parece bem complicado, porém com

prática ele se torna bem tranquilo de ser usado. Sua dashboard (como também

chamamos o painel) permite configurar cores, extensões, elementos, tipografia,

entre muitos outros itens.

Mas só vamos aprender se entramos no painel. Quando você fizer o login e abrir

o seu site/blog, vai encontrar toda a estrutura do painel numa sidebar (barra lateral)

do lado esquerdo da tela. Lá você encontra o número de posts, páginas, categorias,

tags, comentários, entre outros.

Vamos iniciar o estudo pela configuração da aparência do site/blog. Para

demonstração, escolhemos usar como exemplo um restaurante temático fictício chamado Karpo.

APARÊNCIA

Uma das principais funções do painel é permitir que você faça um design personalizado do seu site/blog. Através do menu Aparência - Personalizar você pode definir a aparência e ajustar com ferramentas inteligentes de cores, fontes e editores especiais, variando de template para template. Escolhido o tema, é possível configurar:

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

41


40

PÁGINAS

No WordPress é possível escrever posts e páginas.

Um post é uma publicação comum, enquanto as páginas

são usadas para conteúdos separados, tais como “Quem

somos”, “Contatos”, etc. Elas são usadas na maioria das

vezes para apresentar informação estática, ou seja, a informação que não muda. Elas são usadas para

organizar conteúdo. Veja o exemplo da criação da página “Nossa história” para o site do restaurante.

Ao criar uma página, você vai perceber que existem formas de fazer testes antes da publicação

efetiva. No lado direito da tela é possível salvar como rascunho (página não finalizada), visualizar

(como ficará a página) e publicar direto.

Na caixa de atributos, bem abaixo da caixa de publicação, é possível definir o nível hierárquico da

página. Vamos ao exemplo: você tem uma página chamada “Nossa história” que possui outras duas

páginas interligadas a ela - “Missão” e “Visão” - abaixo dela. A mãe destas duas últimas será a página

“Nossa história”.

Já a Ordem permite que você escolha a posição que irá aparecer na lista de links, que por padrão,

são ordenadas alfabeticamente. Altere os números para cada página e coloque na ordem que você

quiser. Ex: “Nossa história” (1) – “Localização” (2) – “Dicas” (3) – “Contatos” (4).

Título do site, tagline e logotipo

Altere as configurações de apresentação dos dados do seu site, criando títulos por meio de textos

e imagem de logotipo.

Cores e fundos personalizadosO painel Cores & Fundos tem ferramentas de cores inteligentes, como paletas predefinidas, sugestões

de cores, seletor de cores e uma grande variedade de padrões de fundo.

FontesPermite definir fontes personalizadas para títulos e texto base.

Imagem do CabeçalhoCrie uma imagem bem bacana e envie para o Wordpress colocar como cabeçalho do seu template.

MenusCrie menus personalizados para o seu site.

Widgets

São ferramentas que cada tema nos oferece para adicionarmos conteúdos na barra lateral do site/

blog. Pode ser editado e diferenciados de acordo com o tema. Ele permite que você exiba páginas,

categorias e links personalizados em barra lateral.

43


42

de usuário tem um limite para acessar ou editar dentro do seu WordPress. Assim:

Seguidor – só pode fazer comentários em seu site ou blog se você habilitar a função que permita comentários.

Colaborador – Pode postar artigos, mas só serão publicados se forem aprovados pelo adminis-trador ou editor.

Autor – consegue editar os seus próprios artigos sempre que quiser. Mas ele só tem acesso aos seus próprios artigos e não o de outros usuários.

Editor – pode editar os seus próprios artigos e os de outros usuários também. Neste tipo de usuário, você precisa ter total confiança, pois ele tem liberdade o suficiente para mudar o conteúdo do seu site/blog.

Administrador – pode alterar tudo, como e quando quiser. A utilidade de se criar outros usuários é permitir que mais pessoas colaborem com o seu site/blog, aumentando assim o número de visitas nas páginas.

FERRAMENTAS As ferramentas do painel servem exclusivamente para lidar com os posts que serão publicados no seu site/blog. Dentre as opções mais importantes, temos:

Publique Isso – Facilita o uso de qualquer assunto com o qual você se deparar na web. Você pode usá-lo para copiar um link ou para publicar um resumo.

Esta é a primeira página criada para o restaurante do exemplo. A imagem foi colocada através do

link Configurar imagem destacada no canto inferior direito da tela de criação da página. Mas além

das imagens é possível adicionar formulários, enquetes e localização dentro de uma página. Basta

clicar nos botões reservados e usar qualquer uma das opções. O seu professor vai demonstrar o uso

de cada uma delas.

GERENCIANDO USUÁRIOS

Quando você criar uma conta no Wordpress, por padrão,

você é o usuário admin (administrador) dela. Mesmo sendo o

usuário com maiores poderes, você pode configurar outros

tipos de usuários em seu site/blog, como por exemplo:

Administrador, Editor, Autor, Colaborador e Seguidor. Cada tipo

45


44

Além disso, abaixo das respostas da enquete você pode escolher o formato visual com que ela

vai aparecer no seu site. Ao final, será gerado um link curto para que você adicione a enquete em

qualquer post. Basta copiar e colar no corpo do post desejado.

ATIVIDADES

Atividade 1 – Configurando o temaO tema escolhido ainda precisa de alguns ajustes? Se a resposta for sim, então a hora é agora. Faça todas as configurações que você aprendeu nesta aula de hoje e deixe o tema pronto para a criação das páginas. Peça ajuda ao seu professor, se necessário.

Atividade 2 – Criando páginasO seu site agora precisa tomar forma. Vamos começar a criação das páginas que você já planejou nas aulas anteriores. Se o tema for bem dinâmico, aproveite todas as opções que ele oferece. Faça testes de visualização, adicione imagens, enquetes, formulários, localização, entre outras. Use o maior número de opções possíveis para deixar as páginas bem atrativas.

Atividade 3 – Criando usuáriosUse o recurso de criação de usuários no painel e distribua perfis para todas da equipe e para seu professor. Lembrando que cada usuário tem permissões diferentes.

Conversor de Categorias e Tags – O link o levará à página de importação (abaixo), onde haverá um plug-in conversor de categorias para tags e vice-versa.

Publicar por E-mail – Você pode publicar posts diretamente do seu e-mail. No entanto ele precisa ser habilitado.

Importar – Usado para que você possa trazer posts ou comentários de outros sistemas, seja ele o Blogger, GoDaddy, LiveJournal, entre outros.

Exportar – É o processo contrário, onde você pode exportar dados de seu WordPress (posts, pági-nas, comentários, etc) para outros sistemas, criando um arquivo XML com as informações. Ideal para administradores que estão fazendo backup de seus textos ou movendo-se para um novo site/blog.

FEEDBACK

Muitos sites ou blog gostam de utilizar enquetes para saber a opinião de seus visitantes sobre

determinado assunto. É fácil criar alguma enquete no Wordpress e acompanhar as estatísticas dire-

tamente do seu painel de votações.

Um dos plug-ins disponíveis para criação de enquetes no momento da elaboração desta apostila

era o PollDaddy. Nele você acrescentar a pergunta e as sugestões de respostas. Observando o lado

direito da tela, é possível configurar se o visitante pode clicar em uma ou em várias respostas (múl-

tiplas escolhas), a forma com que os resultados vão ser exibidos e o tempo de duração da enquete.

46

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES


47


Aula 6 - Wordpress - Configurações

• Ajustando menus • Ajustando as configurações • Notificações • Finalizando a primeira parte do projeto

AJUSTANDO MENUS

Começamos esta nova aula, mas ainda não deixamos de lado o Painel WP Admin. Vamos aproveitar

este tópico para criar o menu personalizado, que servirá como um menu de navegação para o seu

site. Você pode criar seus próprios menus personalizados no lugar de menus padrão do seu tema.

Mas o que são esses menus personalizados? Eles podem conter links para páginas, categorias, links

personalizados ou outros tipos de conteúdo. Não há limite de quantos menus você pode criar. Para

usar esta opção, vá em Aparência – Menu no painel. Crie um novo menu ou selecione as páginas

criadas no lado esquerdo da tela. Quando os itens de menu estiverem na ordem que você desejar,

basta clicar em Salvar menu.

Adicione como menu:

• Páginas criadas anteriormente;

• Links personalizados, ou seja, link para menu externo;

• Posts criados para inserir como itens de menu;

• Categorias para inserir como itens de menu;

O seu professor vai orientar quanto a criação e gerenciamento dos menus. Anote o máximo

que puder.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

49


48

Configurações - Leitura Já as Configurações de Leitura permitem controlar a forma como o seu site/blog é exibido aos vis-itantes. Você pode ajustar:

Páginas do blog mostram, no máximo escolher quantas postagens no blog são exibidos por página.

Para cada post em um feed, mostra apresenta o texto completo ou um resumo com apenas as primeiras 55 palavras, incluindo o link para que o usuário continue lendo em outra página.

Visibilidade do site permite que mecanismos de busca indexem o seu site para que ele seja encontrado com maior facilidade em pesquisas.

AJUSTANDO AS CONFIGURAÇÕES

Ainda dentro do painel, vamos falar das configurações disponíveis nele. Contudo descrevemos

só as opções mais importantes, mas o seu professor vai orientar aqueles que ele julgar essenciais e

que não estão nesta apostila. Por isso, mantenha o papel e caneta na mão para anotar tudo.

As configurações gerais, por exemplo, permitem controlar como o seu site é exibido. Ou seja, como

o título, slogan (descrição), horário e fuso, idioma, entre outros itens aparecem na página. Para

alterar qualquer configuração, basta escolher o menu Geral da guia Configurações do painel.

Configurações - EscritaAs configurações possuem outros subitens que também precisam ser explorados. As configurações de escrita é um deles. Elas permitem controlar a sua experiência com a escrita dentro do WordPress utilizando padrões, tais como:

Formatação permite que você digite símbolos emoticon quando você está escrevendo. Se esta opção estiver marcada, os símbolos serão convertidos em um emoticon gráfico.

Categoria padrão do post permite que você selecione a categoria a qual será aplicada a um post caso esqueça de atribuir uma a ele.

Formato padrão do post permite escolher o melhor formato que seu texto será publicado.

51


50

danças e adicionar e-mails extras que receberão as notificações. Com esses recursos configurados você receberá da plataforma mensagens de notificação em seu e-mail informando quaisquer alter-ações ocorridas.

FINALIZANDO A PRIMEIRA PARTE DO PROJETO

Chegamos ao final da primeira parte do nosso projeto. Você aprendeu até agora quais os recur-

sos mais utilizados no Wordpress. Aprendeu a escolher e personalizar um tema, criar e gerenciar pá-

ginas, alterar as configurações gerais, gerenciar usuários, ferramentas e demais itens que compõem

o painel.

Para que este projeto acontecesse, foi necessário um planejamento. Você e sua equipe fizeram toda

a organização do site e colocaram a mão na massa. Com a prática e com a ajuda do seu professor,

você foi descobrindo alguns itens que não estão descritos nesta apostila. A partir daí, utilizar o Word-

press já não é mais aquele bicho de sete cabeça.

Mas ainda não terminamos. Vamos entrar agora no mundo dos posts, conteúdos, blogs, SEO e

estatísticas. Todo bom desenvolver precisa estar bem alinhado com estes recursos. Aproveite para

finalizar esta etapa com uma revisão do projeto e entrar preparado na segunda parte.

Você percebeu que ao longo destas aulas a apostila apresentou um projeto simples de um restau-

rante fictício. Veja como ficaram as telas da primeira parte.

Configurações – Mídia As configurações de Mídia permitem que você controle a forma como a mídia é exibida. Dentre as opções principais temos o tamanho das imagens (miniatura, médias e grandes) e a habilitação do carrossel de imagens (slideshow).

Configurações – Compartilhamento Quando há a necessidade de algum tipo de compartilhamento de conteúdo nas redes sociais, usa-se a configuração de compartilhamento de posts no Wordpress. É possível adicionar os botões de compartilhamento (arraste e solte) para facilitar a interligação com o cliente, além de escolher o estilo do botão e do rótulo. Mas lembre-se: os botões de compartilhamento desta tela não são os mesmos dos widgets do template.

NOTIFICAÇÕES

Principalmente quando se trata de blog, é importante manter-se informado do que acontece com ele. O Wordpress disponibiliza o menu Notificar Mudanças para receber notificação de qualquer mudança em uma página ou post. Além disso, você pode escolher quais usuários notificar das mu-

53


52

ATIVIDADES

Atividade 1 – Ajustando menusOs menus personalizados servirão como navegação dentro do seu site. Como você aprendeu, é possível criar seus próprios menus personalizados no lugar de menus padrão do seu tema. Chegou a hora de ajustar os menus planejados e fazer as ligações com as páginas que você criou. Se necessário, crie menus com links externos, redes, entre outros. Peça sempre orientação para o seu professor.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________


5454

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

ANOTAÇÕES

Atividade 2 – Ajustando configuraçõesPara que nada passe despercebido, faça os ajustes nas configurações gerais, de escrita, leitura, compartilhamento, entre outros, do painel WP Admin. Tente combinar ações para que o site fique o mais completo possível.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 3 – Erros e ajustesTodo projeto, mesmo que bem planejado tem seus erros e acertos. Os erros precisam ser levantados, analisados e corrigidos para que não aconteçam novamente nas próximas etapas. Por isso, preencha a tabela abaixo com os erros identificados e as ações que deverão ser tomadas para que sejam corrigidos.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Erros Ações a serem tomadas

55


Aula 7 - Wordpress - Publicando Pt. 1

• O que é o blog? • A importância dos blogs • O conteúdo ideal • Categorias, tags e posts• Organização e planejamento de Posts

O QUE É O BLOG?

Dando seguimento ao estudo das técnicas e

ferramentas para desenvolvimento de sites e blogs, não

podemos deixar de falar da forma correta de realizar

as publicações. Nesta aula, vamos complementar o

conhecimento com a visão dos blogs. Segundo a

Wikipédia, um blog é um “site cuja estrutura permite a

atualização rápida a partir de acréscimos dos chamados

artigos ou posts”. Para se estruturar e alimentar um blog,

em geral, é preciso criar uma temática (escolher um tema) e publicar artigos ou textos sobre ele. O

blog pode ser escrito por uma pessoa ou por um grupo de pessoas.

No começo, os blogs eram traduzidos com sendo diários online no intuito de divulgar ações e

sentimentos do dia-a-dia. Com o tempo, eles passaram a se tornar mais corporativos e as empresas

adotam essas ferramentas interligadas aos seus sites para divulgar conteúdo aos seus cliente.

Nossa função a partir desta aula não será explicar os blogs pessoais, mas sim as informações ligadas

ao ramo de negócios. O restaurante da aula anterior pode, por exemplo, abrir um blog de receitas e

dicas de culinária.

A IMPORTÂNCIA DOS BLOGS

Nos dias atuais, os blogs passaram a ser ferramentas estratégicas poderosíssimas no marketing

das empresas. Basicamente, o blog serve como uma ponte entre o conteúdo dos seus posts e as

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

57


56

de relaxo. Defina a frequência com que o conteúdo será atualizado, organize as ideias e faça cum-

prir.

Adquira conhecimento – Quanto mais informações atualizadas e consistentes o seu site

tiver, mais clientes ele vai atingir. Lembre-se que existem internautas que podem não ser cliente

do seu restaurante, mas que acessam o site por causa do conteúdo. E se ele gosta de você, as

recomendações positivas vão acontecer naturalmente.

Veja um exemplo simples de conteúdo no site usado como demonstração nesta apostila.

CATEGORIAS, TAGS E POSTS

A motivação desta aula é ensinar você a realizar publicações diversas, dinâmicas e interessantes

dentro do site ou blog que você esteja desenvolvendo para um cliente. Por isso, vamos voltar ao

Wordpress e acessar o Painel WP Admin no menu relacionado aos posts. Vamos aprender como

utilizá-lo e dar dicas das melhores publicações a serem usadas.

Começaremos pelas definições de categorias e tags, que farão parte integrante dos nossos posts.

Elas ajudam a separar o conteúdo dentro do site e o ranqueamento dele nos motores de busca.

CategoriasAs categorias são divisões dos seus posts em vários assuntos ou pastas que permitem uma

organização para o conteúdo. Isso até facilita para seus clientes, uma vez que eles podem ter acesso

ao conteúdo de apenas uma determinada categoria.

Separar em categorias precisa de um certo planejamento para não ficar em excesso, pois conteúdo

duplicado dentro de um site não é muito bem visto pelas regras de SEO, como veremos nas

próximas aulas. Páginas diferentes que não tenham um relacionamento hierárquico é algo também

não considerado como uma boa estratégia.

páginas de serviços, produtos e promoções da sua empresa.Outro ponto importante é que você

poderá coletar opiniões dos seus clientes através dos comentários produzidos por eles, tanto de

forma negativa ou positiva.

Mas porque é tão importante? Simples! As empresas, no seu formato digital inseridas na internet,

precisam proporcionar interatividade com os seus clientes. É possível estreitar uma relação com

eles, criar um vínculo emocional, informar o público sobre seu negócio, saber seus desejos e suas

opiniões sobre a marca ou produtos. Um caminho mais curto para que a empresa possa entender

suas próprias falhas e se aprimorar constantemente. Qualquer empresa que busque ter sucesso na

internet precisa incluir um blog no desenvolvimento web. E você deverá ser capaz de convencer o

seu cliente na hora de desenvolver o site para ele.

O CONTEÚDO IDEAL

Chegou a hora de pensar seriamente no conteúdo que

você vai oferecer no seu site/blog. Mas antes de se aventurar

no mundo dos conteúdos, é necessário conhecer algumas dicas

importantes para que o resultado seja eficiente. Entre elas temos:

Entender bem o público-alvo - Quem vai ler os seus artigos, comentar e compartilha-los? Se você não souber com quem está falando, o seu conteúdo nunca será sustentável o su-ficiente para atrair o cliente/leitor.

Planejamento – Qual o melhor conteúdo que você vai com-

partilhar no site/blog? Apenas textos ou vídeos? Imagens diver-

tidas ou montagens? Entrevistas com especialistas? É preciso planejar todos dos detalhes de uma

publicação para não perder nenhum cliente. Vamos falar disso no final desta aula.

Metas - Querendo ou não, quem cria um site/blog tem um objetivo ou uma meta, que podem

ser diferentes para diferentes tipos de público. Se o seu público é corporativo, defina metas de fi-

delização ou engajamento de seus clientes. O planejamento vai ajudar nesta tarefa.

Formatos e linguagem - Postar apenas textos pode ser repetitivo. Busque criar posts que

sejam diferentes, inovadores e que consigam cativar o seu leitor. Utilize imagens, vídeos, infográfi-

cos, cores e uma linguagem mais descontraída e que se aproxime do público. Procure não publicar

textos muito grandes e de difícil leitura.

Frequência - Sites e blogs precisam ser atualizados com frequência, para não passar a impressão

59


58

ninguém. Você precisa enxergar o que realmente é importante, usar ferramentas que acrescentem

conhecimentos, descobrir o tipo de conteúdo mais compartilhado e buscar os assuntos populares

e atuais.

Mas não é só isso! Você precisa saber abordar o assunto de jeito inovador, como sendo algo único e

interessante. Produzir uma informação de qualidade sobre os seus produtos e a sua marca ampliam

muito a capacidade de otimização do negócio. Isso gera mais confiança, autoridade e visibilidade,

fortalecendo assim a imagem da empresa.

Para criar um post, selecione o menu Post no Painel.

Ao clicar em Adicionar novo você repara que cada post tem um título, um link permanente (o

endereço da página), link curto, os recursos para adicionar mídia. Outra funcionalidade importante

é a contagem das palavras do post, no rodapé da caixa de texto. Existe uma informação que é

“quase” consenso dos blogueiros de que um bom texto deve ter no mínimo 350 palavras, para que

seja melhor classificado nos motores de busca. Mas isso não é uma regra. O importante é que o

conteúdo seja relevante.No botão Adicionar Mídia, você pode adicionar imagens, galeria, vídeo, áudio, entre outros. Já as enquetes, localização e formulários você já viu na aula sobre páginas.

Na coluna da direita, encontramos as opções que vão agregar o seu post. Na caixa Publicar, você escolhe qual o status e visibilidade do seu post. Enquanto estiver editando um conteúdo é melhor escolher a opção Rascunho, para evitar que os dados sejam publicados antes de estarem prontos.

Na caixa Categorias é possível que você adicione o post a categoria pré-cadastrada. Lembre-se

que isso facilita a organização do seu conteúdo. Você pode colocar o mesmo post em mais de uma

categoria, mas isso não é recomendado para evitar problemas com os motores de busca.

Para criar categoria use o sub-menu Categorias do menu Posts no Painel. Você vai perceber que

é bem fácil de criar. E ainda, é possível ter uma hierarquia, como por exemplo a categoria Receitas,

que dentro dela foram criadas mais duas categorias chamadas Doces e Salgadas.

TagsA utilização de tags é um complemento a organização das suas categorias. Com elas as informações

podem ser segmentadas por detalhes menores, no formato de palavras-chaves. Elas servem para

definir em poucas palavras o que está no texto. Isso destaca o texto e agrupa os conteúdos de

acordo com essas palavras. As categorias e as tags devem andar juntas na hora da publicação de

um post.

Na tela abaixo você encontra um exemplo de tags criadas para o site do restaurante da nossa

demonstração.

PostChegou a hora de organizar e publicar um post dentro do seu site/blog. Uma das grandes vantagens

do WordPress é a facilidade de utilização da ferramenta de publicação dos posts, deixando para você

apenas a tarefa de escolher o melhor conteúdo a ser publicado.

Criar conteúdo útil e relevante para o site/blog da sua empresa ou do seu cliente não é tarefa fácil para

61


60

ATIVIDADES

Atividade 1 – Criando categorias, tags e postsIniciamos a segunda parte deste projeto trabalhando com os posts, suas categorias e tags. Definia com a sua equipe as principais categorias, as palavras-chaves que serão usadas e monte os seus primeiros posts. Lembre-se que o conteúdo precisa ser relevante e de qualidade. Faça posts que chamem a atenção do cliente da empresa que te contratou. Só tome cuidado com os erros graves no português.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – Planilha de postagensPara que seu trabalho nas próximas aulas seja mais completo e rápido, que tal criar uma planilha de postagens? Use o modelo simples do tópico anterior ou utilize alguma outra sugerida pelo professor. Lembre-se que na internet existem muitas destas planilhas para download.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Logo abaixo, você encontra as caixas de Tags e Imagem destacada. No caso das tags, basta você

começar a digitar a palavra chave que você cadastrou e separar uma da outra por meio da vírgula.

Neste caso, pode usar mais de uma tag no seu post. Já a imagem destacada coloca a imagem

desejada como capa do seu post. Vamos falar mais de imagens na próxima aula.

Outra opção para se fazer uma publicação é no menu rápido do Meus Sites. Clicando nele você

abre a tela da esquerda com um link para os posts já publicados. Clicando no botão Adicionar ou

Editar você consegue acessar a página da direita com o editor rápido de conteúdo.

ORGANIZAÇÃO E PLANEJAMENTO DE POSTS

Manter as suas postagens organizadas é essencial para facilitar a navegação nas suas páginas.

Lembre-se que no WordPress essa organização é feita através de categorias. Na prática, tente usar

uma quantidade de categorias não tão grande. Se você criou uma loja virtual, por exemplo, defina

categorias mais amplas, como Eletrônicos, Eletrodomésticos, entre outros. Elas podem ser até

subdivididas, mas sempre procure estabelecer um limite lembrando da regra dos três cliques.

O planejamento de conteúdo é fundamental para o controle de atualizações do site. Muitos

desenvolvedores e publicitários que trabalham com marketing gostam de usar uma planilha de

postagens, mantendo assim uma linha de produção contínua e programada.

O controle das publicações fica mais simples e permite à empresa ter uma visão geral dos assuntos

já abordados, conteúdos que podem ser explorados e quais temas podem ser inseridos na estratégia.

Planilha de postagem

Púbicos Tema Categoria Tags Elementos (vídeo, texto) Data Horário

ESTA É UMA PLANILHA SIMPLES. EXISTEM MODELOS MAIS COMPLETOS NA INTERNET.


6262

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES



63


Aula 8 - Wordpress - Publicando Pt. 2

• Trabalhando com Imagens • Inserindo outras mídias • Editor de posts • Agendamento de publicação

TRABALHANDO COM IMAGENS

Como já vimos, resumidamente e nas aulas anteriores, é possível inserir e editar imagens dentro de

uma página ou post no WordPress. Você pode adicionar imagens por meio de uma URL ou enviando

aquela que está armazenada no seu computador. E elas podem ser inseridas em alguns lugares bem

definidos do seu site, tais como:

• No tema, adicionando imagens no cabeçalho, fundo, etc.;

• Em Gravatars – as imagens que representam o seu perfil ou de outros usuários;

• Em Widgets, inserindo imagens de forma temporária em banners nas áreas reservadas a eles no

tema;

• Nas galerias de imagens, com a composição de um conjunto de imagens em forma de galeria

dinâmica.

Para inserir qualquer imagem, primeiramente é preciso escolher o local onde isso será realizado. Pode

ser no corpo do post, da página ou em alguns dos espaços citados acima. O importante é que o

processo é bem parecido para todos. No caso de imagens dentro do post ou página, você pode

alinhá-las ao conteúdo.

Clicando no botão Adicionar mídia, você terá acesso ao painel:

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

65


64

Nos ícones acima da imagem, você pode recortar, girar ou desfazer qualquer operação. No painel

aberto do lado direito da tela, você pode escolher redimensionar ou recortar a partir do original para

um outro tamanho desejado.

Galeria de imagensÉ possível criar uma galeria simples unindo duas ou mais imagens para serem apresentadas em

tipos diferentes, tais como Grade de Miniaturas, Mosaicos, Círculos, Apresentação de slides, entre

outros. Basta escolher quais imagens da biblioteca vão compor a sua galeria e configurar no lado

direito da tela. Simples assim!

INSERINDO OUTRAS MÍDIAS

Como já dissemos, é possível inserir outros tipos de mídias dentro dos posts ou páginas do

Wordpress. Entre estas opções estão a inserção de Tweet, vídeos do Youtube e URL para links

personalizados. As figuras abaixo mostram o quanto é fácil inserir estes tipos de mídias dentro de

um post ou página do seu site/blog.

Nele você pode inserir mídias já disponíveis dentro da biblioteca, enviar outro arquivo para a ela,

criar galeria ou inserir a imagem destacada. Quando enviada ou selecionada na biblioteca, é possível

fazer algumas alterações básicas nos textos da imagem e no alinhamento. Veja isso quando você

clicar na imagem e abrir um painel no lado direito da tela (figuras abaixo).

O painel aberto começa pelo chamado Detalhes do anexo, que reúne informações importantes da

imagem, tais como o nome, data de envio e dimensões em pixels. Há também links de ação que

permitem que você possa Editar imagem ou Excluir permanentemente o arquivo de seu site.

No item Configurações de exibição do anexo você controla a forma com que a imagem será

mostrada no site, como por exemplo, o alinhamento na tela (em relação ao texto e margens), o link

e o tamanho da imagem.

Vale algumas considerações: use bem o título e a legenda da imagem, pois isso ajuda no trabalho

de SEO (veremos na próxima aula) e permite que os motores de busca encontrem o seu site com

maior facilidade.

EditarÉ possível sim editar uma imagem inserida no Wordpress. Veja na figura acima que bem debaixo da

miniatura da imagem tem um link para edição da mesma. Clique nele e veja a tela abaixo.

67


66

AGENDAMENTO DE PUBLICAÇÃO

Na aula passada falamos sobre a organização de posts e uma política

de planejamento de publicação. Um dos elementos determinantes para o

sucesso de um site/blog é mantê-lo sempre atualizado, com uma frequência

de publicações que garanta as visitas do seu cliente. A vantagem do Wordpress

é que você consegue manter essa frequência dentro de uma data e horário

previstos. Isso é ótimo para que você faça seu trabalho com antecedência e

não corra o risco de deixar nada atrasado.

Para isso, vamos utilizar o agendamento de post dos Wordpress. No editor,

quando você for criar um post novo, observe o painel à direita da tela: há uma

opção chamada Publicar imediatamente, seguida do botão Editar. Basta clicar

sobre ele, selecionar a data e hora desejada e salvar. A programação pode ser

alterada a qualquer momento antes de vencer o prazo.

ATIVIDADES

Atividade 1 – Trabalhando com as mídiasVamos complementar ainda mais o seu site. Acrescente mídias (imagens simples, galerias, vídeos) nos seus posts e não esqueça de realizar as devidas configurações e edições. Se for necessário, faça o uso de imagens dentro das páginas. Vamos deixar o seu site mais rico e atrativo para o usuário.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – Usando a planilha de postagensNa aula passada sugerimos como atividade a criação de uma planilha de postagens. Porque? Para controlar e organizar os post futuros no seu site/blog. Agora vamos fazer uso dela, realizando os agendamentos planejados. Lembre-se que o planejamento precisa ser executado com precisão.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

EDITOR DE POSTS

O editor de posts do Wordpress é bem simples de usar e possui algumas estratégias em relação

ao uso de imagens e formatação. A caixa em branco onde você digita o seu texto cria links para

imagens, adiciona enquetes, formulários e demais informações que deseja exibir no seu site. Você

pode usar o Editor Visual ou o Editor em HTML. Veja a comparação dos dois:

O Editor em HTML permite que você formate o texto utilizando tags relacionadas com o HTML mais

simples, tais como <p>, <hr>, <img>, entre outros. Já no Editor visual, a situação é mais intuitiva para

o usuário tradicional, uma vez que ele utiliza padrões de botões parecidos com aqueles utilizados

nos processadores de texto, conforme destacado na figura abaixo.

Aproveitando a figura acima, você vai perceber que inserimos a foto de um mousse. Bem debaixo

dela apareceram alguns ícones que permitirão que você alinhe a imagem de acordo com o texto,

ou seja, a esquerda, a direita ou contornada por ele.


6868

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES



69


Aula 9 - Otimizando com SEO

• Entendendo o SEO • Como funcionam os mecanismos de busca • Técnicas de SEO para sites e blogs • SEO no Wordpress • Plug-ins para SEO

ENTENDENDO O SEO

Alguma vez, você já ouviu falar nesta

palavrinha chamada SEO? Se prestou bem a

atenção nas aulas anteriores, nós começamos

a falar um pouquinho sobre ela. Lembra?

Se não, fique tranquilo, porque hoje vamos

falar desta sigla muito utilizada nos dias

atuais quando se trata de desenvolver sites e

blogs. Para começar, precisamos entender a

importância estratégica dele.

Muitos desenvolvedores estão adotando a postura de acumular um conhecimento interno no que

se refere as estratégias de SEO, simplesmente para otimizar os sites que eles estão desenvolvendo

para pessoas e empresas. É por causa delas que as marcas terão mais visibilidade nas ferramentas

de pesquisa, como o Google, por exemplo. Mesmo que não consigam adquirir rapidamente estes

conhecimentos, existe muita informação disponível na internet que vai ajudar você a executar

estratégias bem-sucedidas de SEO.

Tudo bem, mas o que é o SEO? A sigla de Search Engine Optimization, também é conhecida como

uma maneira de otimizar sites, para que se possa aumentar a quantidade de acessos, através de um

conjunto de técnicas e práticas para posicionar o seu site nos resultados orgânicos dos mecanismos

de busca, como Google e Bing.

Em resumo, o SEO é um conjunto de técnicas que pode tornar os seus sites mais amigáveis para

os motores de busca. Quanto melhor posicionado nos resultados orgânicos, melhor é a visibilidade

do site.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

71


70

TÉCNICAS DE SEO PARA SITES E BLOGS

Otimizar significa tornar ótimo ou ideal. Otimizar é

extrair o melhor rendimento possível de uma determinada

atividade. Como já dissemos, as mudanças nos algoritmos

dos motores de busca são constantes. Por isso, é

importante adotar estratégias para otimizar as buscas

relacionadas com seu site. Aí usamos as técnicas de SEO.

Quanto mais você souber otimizar um site, melhor será o

resultado. Com as dicas que vamos oferecer abaixo, você

aprenderá a prática mais eficientes para posicionar os

seus conteúdos e vencer a concorrência. Preste bastante

atenção.

Título – Use títulos de forma simples, objetivo e bem

chamativo, para atrair atenção e ser clicado. Use no máximo 65 caracteres e seja original. Textos

chamativos como “Promoções”, “Descontos”, “10 dicas sobre”, ajudam muito na taxa de clique do

seu site.

Palavras-Chave - Elas são determinantes na construção do seu site. Vamos falar mais nas

próximas páginas.

Conteúdo - Para qualquer pesquisa ser bem vista é preciso ter conteúdo atrativo. Escreva bem,

use termos bem procurados e dê qualidade ao seu trabalho.

Formatação de Conteúdo - A maioria dos motores de busca dão uma especial atenção às

palavras em negrito, itálico e sublinhado. Atenção para estes detalhes.

Imagens - Alguns algoritmos são bons quando as imagens são otimizadas. Uma imagem bem

rankeada deverá ter um título e um texto alternativo bem interessantes, principalmente os adicio-

nados ao atributo “alt”.

Não copie textos - O conteúdo que você coloca dentro do seu site ou blog deverá ser origi-

nal e único, pois se você copiar e colar de outro site, os motores de buscas contam como conteú-

do duplicado e acabam atrapalhando o trabalho de pesquisa.

Link Building - O uso de links com texto âncora é muito usado com técnica de SEO. Procure

sempre uma palavra-chave de acordo com o conteúdo relacionado, e insira links nela. Deixe de

lado o famoso “clique aqui” e use as palavras corretas sobre o assunto.

COMO FUNCIONAM OS MECANISMOS (MOTORES) DE BUSCA

Os mecanismos de busca utilizados pelas maiores

empresas do mundo, como Yahoo, Google e Microsoft,

utilizam de poderosos algoritmos, repleto de fatores

que otimizam estas buscas. Eles calculam por meio

destes fatores quais sites seriam mais adequados para

serem exibidas quando uma busca é solicitada. Estes

algoritmos são aperfeiçoados constantemente, o que

impede uma forma correta para entendê-los. Na maioria das vezes ele é secreto, garantindo uma

exclusividade da empresa que o criou. Isso garante uma briga acirrada entre buscadores.

Dentre alguns dos fatores, temos a utilização de palavras-chaves, sinônimos, relevância e localidade.

Quanto mais sinônimos possíveis para a palavra, mais resultados similares são exibidos na tela. E claro,

existe um peso naqueles resultados. Os mais acessados e mais relevantes são apresentados com maior

visibilidade. E quanto mais próximas de você o site estiver,

ganham relevância e são exibidas na frente de outras páginas

que não estão pertos de você. Outro fator está relacionado,

claro, com a exibição de anúncios relacionados ao que você

acabou de pesquisar. Como estes sites de buscas vendem

anúncios, o interessante é que eles apareçam acima do

primeiro resultado da sua busca.

A vasta maioria dos serviços de pesquisa são rodados por

empresas privadas usando algoritmos proprietários e bancos

de dados fechados, sendo os mais populares o Google,

Bing e Yahoo! Não existe uma forma garantida para que

isso aconteça, pois o Google não vende posicionamento

nos seus resultados de buscas, mas existem técnicas

que você pode aplicar em seu site ou blog para que ele apareça melhor posicionado. São as

chamadas técnicas de SEO (Search Engine Optimization) que vão auxiliar você a deixar o seu site

mais amigável para os robôs que vasculham a internet. Para quem deseja aprofundar mais no

conhecimento relacionado com os mecanismos de buscas dos sites, a Google criou o site “How

Search Works” com explicações e infográficos animados. Detalhe: a versão mais completa está

em inglês.

73


72

Por isso, é interessante escrever posts como palavras-chaves atrativas no título e também no

corpo. O Google, por exemplo, considera mais relevante o que está escrito em negrito e itálico

para relacionar o texto com determinada palavra-chave. Uma mesma palavra de peso deve estar na

URLs, no título, no começo do primeiro parágrafo e repetida algumas vezes ao longo do texto. Só

não vale encher o seu post com estas palavras e deixá-lo de difícil leitura.

Num texto bacana, as palavras-chaves mais relevantes devem ser destacadas com negrito e itálico,

apoiadas com outras palavras como tags do post. Tudo isso junto auxilia os mecanismos de busca.

Veja o exemplo:

Repare na imagem acima que as tags (lado esquerdo) já estavam cadastradas anteriormente e

agora estão sendo usadas para este post. Dentro dele, perceba que destacamos em negrito e itálico

três grupos de palavras: “Ingredientes”, “Modo de preparar” e “raspas de chocolate”. Porque? Foram

as palavras que julgamos mais importantes dentro do texto. Assim, se algum internauta pesquisar

no Google, por exemplo, a expressão “dica de mousse com raspas de chocolate” as chances de ele

direcionar para o seu site são grandes, pois três palavras-chaves do seu post estão na expressão

pesquisada. Ou ainda, se ele pesquisar “Ingrediente de mousse e modo de preparar”, o resultado é

quase o mesmo.

Ah, e não podemos esquecer de usar palavras-chaves nas imagens. Altere os atributos de título (title)

e descrição (Alt) como termos e palavras que chamem a atenção dos motores de busca. A alteração

é feita dentro do Painel WP Admin – Midia. Entre na biblioteca, clique na imagem desejada e faça

as mudanças. Veja a figura abaixo do painel de configuração da imagem. Coloque um título e uma

descrição atrativos.

A escolha de palavras-chaves que serão utilizadas no seu site pode ser realizada a partir do volume

SEO NO WORDPRESS

Uma das vantagens de se trabalhar com SEO dentro do Wordpress é a sua facilidade e baixo

custo de implementação. Ele atualiza o código-fonte para adequar-se aos padrões do Google, como

por exemplo o uso de negrito ou itálico para destacar palavras-chaves no post. Como você já sabe,

trabalhar conteúdo no WordPress é muito interessante e prático. Por ser uma plataforma muito

robusta, seu conteúdo pode estar visivelmente atrativo aos olhos dos motores de busca. SEO baseia-

se na qualidade do conteúdo publicado e em adequar o seu site aos critérios dos mecanismos de

busca.

Vale a pena reforçar: é fundamental publicar conteúdo com informação de qualidade para que

as pessoas queiram o seu site. Isso já ajuda, mas não define tudo. É preciso deixar evidente que

a sua página é a melhor na internet para uma determinada palavra-chave. Se ele for interessante

e relevante, as pesquisas o indexarão sem muita dificuldade. É importante dizer que o Wordpress

trabalha com plug-ins que permitem fazer um SEO bem eficiente. Porém, estes plug-ins só são

instaláveis na versão paga do Wordpress, o que limita um pouco o seu trabalho. Mas existem

regrinhas que também dão um grande apoio a quem está utilizando a versão gratuita.

Começamos pelo título. Há dois tipos de títulos: o título do post e o título da janela (aquele da tag

<title>). Uma das vantagens do Wordpress é que ele junta as palavras-chaves do título do post e

transforma no título da página. Se você escolheu um título bem atrativo, a facilidade de ser ranqueado

pelo mecanismo de busca é maior. Veja o exemplo:

75


74

PLUG-INS PARA SEO Como dissemos, existem plug-ins que podem ser

usados para gerenciar o SEO do seu site. Mas eles só podem

ser instalados na versão Wordpress Negócios (paga) ou na

instalável (Wordpress.org). Mesmo que estejamos trabalhando

com a versão gratuita, vale a pena destacar alguns desses

plug-ins.

Um dos mais famosos e usados é o Yoast SEO. Com ele é possível otimizar títulos, palavras-chaves,

encontrar a avaliação de cada um dos critérios do Google, fazer checklist de aspectos importantes

de SEO, entre outros. Além do Yoast, podemos citar também o All in One SEO Pack e o Platinum

SEO. Além do Yoast, podemos citar também o All in One SEO Pack e o Platinum SEO.

de buscas no Google no nosso país. Existe uma ferramenta muito interessante chamada Google

Adwords Keyword Tool, que permite que você descubra quais são as palavras mais buscadas por

um determinado tema. Faça o teste com a ajuda do seu professor.

Lá existe um lista das palavras-chaves mais usadas. Às vezes é interessante ver quais palavras são

menos concorridas e usá-las para facilitar a busca do Google.

ATIVIDADES

Atividade 1 – Pesquisa de termosUtilizando as ferramentas Google Adwords Keyword Tool e Google Trends, descubra quais as palavras-chaves, termos e tendências mais populares sobre o assunto do projeto que você criou no Wordpress. Aí, você poderá usar estas informações para projetar o trabalho de SEO para os posts.

Assunto:_______________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – O trabalho do SEOAgora que você separou palavras-chaves que podem ser usadas nos seus posts, chegou a hora de ajustar todos os que já foram publicados. Adicione as combinações de negrito e itálico no texto do post, selecionando as palavras mais importantes e que fizeram parte da sua pesquisa. Não esqueça de ajustar também o título e as imagens.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

76

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES


76

77


Aula 10 - Estatísticas do site

• Porque mensurar o seu site? • Explorando as estatísticas no WordPress • App WordPress • Melhores formas de divulgação do seu site • Google Analytics

PORQUE MENSURAR O SEU SITE?

Quando falamos em montar um site, não podemos deixar de lado o uso de ferramentas que façam

a medição do número de acessos, quem são e de onde estão vindo. Essas informações são muito

importantes para que a empresa que te contratou possa criar estratégias por conta de seus objetivos.

Se você tem em mãos relatórios organizados sobre os acessos no site da empresa, é possível ver onde

estão os acertos, elaborar novas ações, otimizar conteúdos, analisar a concorrência, entre muitos

outros. Vale a pena trabalhar as estatísticas do site que você está desenvolvendo.

Por isso, e importante aprendermos a montar os relatórios de estatísticas produzidos por ferramentas

de métricas. Eles fornecem informações sobre os acessos ao seu site, os resultados de campanhas,

os melhores dias para realizar publicações, entre outros. Com esses dados, você pode otimizar a

estratégia de negócios do site.

Vamos começar estudando a ferramenta de estatísticas do próprio WordPress. Ela monitora a

navegação de seus visitantes e gera relatórios sobre o tráfego dos seus sites/blogs. Com ele é possível

realizar uma análise de dados avançada com relatórios customizáveis e monitoração em tempo real.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

79


78

Os dados se completam quando você enxerga através das estatísticas quais os países que estão

acessando seu site, quais os post e páginas mais acessados, referenciadores, termos de busca e cliques.

É importante saber que:

Referenciadores – são as origens das suas visitas. Eles podem vir de motores de busca

(Google, Bing) ou através de um link externo em algum site ou rede social e que vá direcionar direto

para qualquer página do seu site/blog.

Termos de busca – são as palavras-chaves utilizadas nos motores de busca e que são

direcionadas para seu site. Quando o WordPress não consegue identificar a origem dos termos ele usa

a expressão termos de busca desconhecidos.

Clique – mostra quais links dentro do conteúdo das suas páginas foram clicados. Isto é muito

bom para quando você faz banner ou publicidade dentro do seu site, pois assim pode gerar relatórios

para o cliente anunciante dizendo quando cliques a empresa dele teve.

EXPLORANDO AS ESTATÍSTICAS NO WORDPRESS

Na figura que você acabou de ver, estamos mostrando as estatísticas do WordPress.com, que

permite saber quantas visitas seu site recebe e quais posts e páginas são mais populares. Mesmo que

estas estatísticas sejam as mais básicas, é interessante dizer que existem vários plugins e serviços que

fornecem outros dados, alguns deles que podem confundir o seu cliente num primeiro momento. Por

isso, vamos analisar esta interface acima.

As estatísticas são automaticamente habilitadas quando você cria um site dentro do Wordpress, sem

nenhuma configuração adicional necessária. A tela principal ou dashboard, aparece quando você

acessa o menu Meus sites – Estatísticas. Assim você pode ver rapidamente as visitas ao site, as

páginas mais visualizadas e os termos de busca que as pessoas usaram para encontrá-lo.

A primeira parte do dashboard é chamada de site states e apresenta o número de acessos diários,

semanais, mensais desde a criação do site. Você tem acesso ao número de visualizações das páginas

do seu site, o número de visitantes únicos (em 48 horas), o número de interações com curtidas e

comentários. Nas figuras abaixo, você vê o painel referente aos acessos realizados em 19 de novembro

e os acessos desde a criação do site.

Ainda no Site States é possível ler algumas Informações sobre o resumo dos post mais recentes e o dia

e horário com maior número de visitantes.

81


80

Mídias sociais – use as mais diversas mídias sociais para divulgar seus posts. Lembre-se que todo

bom site vem acompanhado de uma página ou perfil em uma mídia social ou mais. Apenas fique

atento às regras dos grupos, pois alguns não permitem postagens de materiais próprios com intuito

de divulgação.

Comentários – Fazer comentários em outros blogs pode ser uma ótima forma de divulgar o

seu trabalho. Mas não faça como propaganda, mas algo que acrescente valor ao conteúdo daquele

outro site/blog.

Parceiros - Peça aos seus amigos e/ou parceiros para ajudarem você a divulgar seu conteúdo

pela internet.

GOOGLE ANALYTICS

Para encerrar este nosso estudo sobre as estatísticas do seu site, não poderíamos deixar de

comentar do Google Analytics. Uma das melhores ferramentas para gerenciamento de dados do

mercado, ela é disponibilizada gratuitamente pelo Google. Muito usada por profissionais de SEO, o

Analytics fornece dados diários sobre um determinado site.

Com o Analytics é possível verificar o tempo de permanência do visitante no seu site, quais páginas

foram mais visitadas, média de visitas por página, informações dos visitantes, localização geográfica,

idioma, entre outros. Tudo isso facilita a organizar os objetivos do negócio para qual você está

desenvolvendo um site.

E para interligar com o seu site no Wordpress, você precisa

utilizar um plug-in (dentre muitos) chamado Google

Analytics by Yoast. Ele é bem simples de ser instalado e

utilizado. Mas lembrando que na versão online a instalação

dos plug-ins só acontece se você utilizar a versão paga.

APP WORDPRESS

O WordPress também está presente no mundo dos apps

para dispositivos móveis. Com ele, você pode criar posts

diretamente do seu smartphone ou tablet, equipados com

sistemas Android, iOS ou Windows Phone. Ele é gratuito e em

português, com uma interface bem limpa e fácil de ser utilizada.

Logo na primeira tela, há as opções de criar um novo site/blog

ou adicionar outro que já esteja hospedado na plataforma.

Com o app é possível criar um novo post e página, enviar

apenas uma foto ou vídeo rapidamente e verificar os artigos

anteriores para editá-los. O usuário também tem a capacidade

de aprovar, desaprovar e responder aos comentários. E o mais interessante é ficar de olho em quem

anda visitando seu blog através das estatísticas. Com ele você pode receber notificações de qualquer

manifestação dentro do site ou enviar fotos a partir da biblioteca de dispositivos móveis. Isso é muito

útil para quem precisa atualizar o site/blog periodicamente de qualquer lugar que esteja.

MELHORES FORMAS DE DIVULGAÇÃO DO SEU SITE

Ainda não falamos de publicação do site, mas já podemos ir entendendo quais as melhores formas

de divulgar o site que você está desenvolvendo. Dentre as formas mais básicas para que o público

conheça seu site, estão:

E-mail - Campanha de emails para promover o seu novo post é bem interessante. Use com

moderação e sem gerar spam.


82

Depois de instalado, clique nas configurações do plug-in e faça a autenticação com a sua conta

Google. O seu professor vai dar mais orientações sobre o uso da ferramenta.

ATIVIDADES

Atividade 1 – Verificando estatísticas Mesmo que não tenhamos feitos nenhum trabalho de divulgação do site que você criou para o projeto, acreditamos que alguns dados de acesso já foram gerados ao longo destas semanas. Utilize a ferramenta própria do WordPress e faça um estudo sobre cada um dos itens das estatísticas. Peça ajuda ao seu professor e anote suas principais dúvidas.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Desafio – Interligando Analytics com WordPressNa aula 4 desta apostila você aprendeu a utilizar o WordPress localmente, ou seja, um servidor instalado no próprio computador. Use esta plataforma para instalar o plug-in Google Analytics by Yoast e interligar um site com a sua conta no Google Analytics.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

83


Aula 11 - WIX - Pt. 1

• O que é o Wix? • Criando uma conta • Ações do site • Cuidando da aparência • Adicionando e editando páginas• Adicionado e gerenciando imagens

O QUE É O WIX?

A partir de hoje, vamos entrar na última fase do nosso estudo sobre desenvolvimento de sites. E

o nosso foco é o Wix - um serviço gratuito que permite a criação de sites baseados em HTML5, de

modo que qualquer pessoa faça um site com facilidade, sem a necessidade de conhecimentos em

programação.

Nesta e nas próximas aula, nossa meta será entrar no mundo do Wix usando o painel de controle

online, seus templates profissionais e aplicação mobile. Os modelos disponíveis vão dar uma aparência

profissional ao que você está desenvolvendo, permitindo arrastar os elementos dentro das páginas,

além da inserção de animações, textos, imagens, botões de navegação, músicas, slideshow, vídeos, e

muito mais.

Como dissemos, o Wix permite aos seus usuários criar sites em HTML5 e podendo conectar um

domínio próprio, além de criar lojas online e integrar aplicativos de terceiros em seus sites.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

85


84

Outra ação, logo após a escolha do template, é abrir a edição para iniciar a confecção do site. Basta

clicar em Editar e começar realmente o trabalho. No modelo escolhido, você terá todas as opções

para alterar as imagens e acrescentar conteúdo relevante sobre o seu negócio.

Perceba que as orientações dos painéis que serão utilizados para criação do site são bem intuitivos e

por isso não há tanta complicação.

CUIDANDO DA APARÊNCIA

Mas chega de papo. O mais interessante é começar a mexer no

seu mais novo projeto. Escolhemos montar um projeto básico como

exemplo para uma loja virtual que vende produtos de decoração e

artigos para casa. E o primeiro passo é cuidar da aparência inicial dele.

No painel do lado esquerdo da tela, encontramos alguns menus que

serão utilizados para cada etapa de criação. O primeiro deles refere-se ao

fundo do seu site, também chamado de background. Clique na opção e

ele abrirá a tela ao lado.

No background você altera o fundo principal de qualquer uma das

páginas usando uma cor sólida (cor), uma imagem ou um vídeo, todos

com opções gratuitas. Este último, o vídeo, tem sido bastante usado nos

sites atuais. Vale a pena testar e ver o resultado. Observe que no topo da

imagem, ao lado da palavra Wix, aparece qual a página que está sendo

alterada naquele momento. Se você quiser aplicar o mesmo padrão em

outras páginas, basta clicar no botão Aplicar em Outras Páginas.

CRIANDO UMA CONTA

O primeiro passo no Wix é a criação de uma conta. Para isso, acesse o site da plataforma –

www.wix.com - e clique na opção Começar Já. Você será redirecionado para a tela de login, onde

poderá ter acesso usando suas contas do Google ou Facebook, além de criar uma conta própria

dentro do Wix.

AÇÕES DO SITE

Com a conta criada, começam as ações dentro da plataforma. E a primeira delas é usar opção

+ Criar um novo site. Como você certamente ainda não tem nada criado no Wix, vamos buscar um

template bem bacana para criar um site profissional.

A nossa opção, que também servirá para seu próximo projeto, é criar um site baseado em loja virtual.

Por isso, vamos selecionar esta categoria no lado esquerdo da tela. Optamos por criar uma loja virtual

para vender produtos para casa.

87


86

E depois de inserida no seu site, a imagem pode ser alterada conforme algumas especificações do

WIX, considerando que o seu site ficará mais elegante com ela. Dentre as opções, você poderá:

• Redimensionar a imagem;

• Adicionar link;

• Adicionar descrição;

• Recortar;

• Aplicar molduras e efeitos de animação;

Antes de fechar o editor da página, nunca se esqueça de salvar o seu trabalho. Clique no menu Salvar

no topo da página e ele abrirá uma caixa solicitando um nome para seu site. Como estamos usando

a versão gratuita, ele sempre vai juntar o nome que você criou a URL padrão do Wix.

Ex: http://suaconta.wix.com/nomedoseusite

ADICIONANDO E EDITANDO PÁGINAS

Adicionar uma página e editá-la é tarefa simples quando se trata do

Wix. No menu Páginas que aparece na imagem anterior, você abre uma

janela com as opções de páginas já criadas (para edição) e a de criar uma

nova página. A edição permite alterações nos dados da página, tais como

o nome da página, seu layout, permissões e o SEO, como veremos mais

adiante. Basta clicar no botão de reticencias da página que você deseja

editar e acessar a janela com as configurações.

Para editar os itens internos de uma página também não há tanto

segredo, principalmente quando se trata de texto. O editor de texto é

bem intuitivo e ajustável a medida que você clica sobre ele. É possível

fazer alterações de tamanho de fonte, tipo, acrescentar formatação,

efeitos nas letras, entre outros. Viu como é simples? O mais complicado não é configurar o texto, mas

sim qual o melhor conteúdo que será usado.

ADICIONADO E GERENCIANDO IMAGENS

Inserir uma imagem dentro de qualquer página do seu site também

é uma tarefa sem muitas complicações, principalmente por causa

do clique-arraste. Você pode clicar em qualquer imagem do seu site

e alterá-la. Se a opção for inserir uma nova, basta clicar no botão +

no painel da esquerda e selecionar o menu que se refere a imagem.

Você poderá fazer upload de qualquer imagem armazenada no seu

computador (cuidado com o direito autoral), utilizar o acervo gratuito

do Wix, um clip art gratuito, comprar imagens ou usar diretamente das

suas redes sociais.


88

ATIVIDADES

Atividade 1 – Explorando o WixVamos começar esta etapa sobre o Wix planejando. A proposta agora é criar uma loja virtual, usando algum template da plataforma. Como você e seu time já estão experts em planejar site, vamos tentar ganhar tempo com um plano mais simples. O importante é que você explore a ferramenta e estabeleça um padrão para sua loja virtual. Anote nas linhas abaixo as melhores opções do seu planejamento.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – Criando a conta no WixCrie uma conta dentro do Wix e comece a desenvolver. Escolha o melhor template para sua loja virtual, altere o background ou outros designs, e faça as principais alterações de conteúdo, tais como nome, menus, slogans, entre outros. Se for o caso, altere as imagens ou acrescente novas.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

89


PROJETO LOJA VIRTUAL

Iniciamos na aula passada um projetinho básico de criação de

uma loja virtual. Fazer comercio eletrônico através de sites tem se

tornando a cada ano um tipo de negócio muito lucrativo. Mas quais

os pontos que merecem a atenção antes de colocar uma loja virtual

no ar. Vamos tentar destacar, resumidamente, o que você precisa

observar neste processo. Fique atento à:

Plataforma - a escolha da plataforma é importante pois ela se torna a base da sua loja. Quanto mais

recursos ela tem disponível, mais flexível se torna a sua loja virtual. As duas plataformas que vimos até

agora – o Wordpress e o Wix – dão conta do recado com muita propriedade. Mesmo que as gratuitas

sejam limitadas, dá apara você ir começando a planejar e testar sua construção.

Forma de Pagamentos – Se é uma loja virtual, claro que ela deve receber pagamentos pelas compras

realizadas. Existem maneiras de você receber pagamentos online, tais como:

• Intermediadores – Fazem uma ligação entre você e o site, assumindo o risco. Alguns deles

possuem soluções bem completas e garantem conexões mais estáveis. Cobram taxas de você para

coordenar essa transação. É o caso do Paypal, PagSeguro, Cielo, Rede, entre outros.

• Integração direta – Essa é a opção para lojas com mais experiência, pois elas assumem o próprio

risco e tem equipes dedicadas para garantir a segurança. E isso é sério, pois receber pagamentos na

Internet exige algumas preocupações adicionais, como a fraude, por exemplo.

Segurança – proteger os dados de compra do seu cliente é uma preocupação e tanto. Mais um

motivo para que ao montar sua loja virtual você busque alternativa de segurança digital para o site,

tais como SSL (Secure Socket Layer) e Scan de Aplicação e IP. Este último busca as vulnerabilidades

no seu site que permitiriam que uma pessoa mal-intencionada consiga acessar seu banco de dados

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

Aula 12 - WIX - Pt. 2

• Projeto Loja Virtual • Criando formulários • Galerias • Outras mídias • Interligando com as redes sociais• Blogs

91


90

GALERIAS

É muito interessante trabalhar com galeria de imagens dentro de um site. Além de ser dinâmico,

fica bem criativo. No Wix, por exemplo, para adicionar uma galeria vá até o lado esquerdo do editor e

clique em (+) Adicionar e depois em Galeria. Escolha a galeria da lista e pronto. Depois é só configurar

as imagens que serão usadas através do ícone de configurações. Algumas galerias tem uma opção

camada de Autoplay, que permite o início automático da apresentação das imagens. Se você quiser

descobrir se a galeria que inseriu possui, clique nas configurações da galeria e procure a caixa Autoplay.

E assim como os formulários, as galerias também possuem apps personalizados dentro do Wix App

Market.

OUTRAS MÍDIAS

Não só de imagens vive o seu site. Que tal aproveitar

as potencialidades do Wix e inserir outros tipos de mídias,

tais como vídeos e áudio? Ambos são facilmente inseridos

em qualquer página através do ícone (+) Adicionar no lado

esquerdo do editor. No caso do vídeo, por exemplo, você pode

escolher a exibição de vídeos vindos direto do Youtube ou

do Vimeo, com as suas devidas configurações. Clicando no ícone de configurações, você poderá

procurar o vídeo desejado, habilitar o AutoPlay para que o vídeo seja executado automaticamente,

entre outros.

No caso de áudio (música), você adiciona players básicos do próprio Wix, assim como player de

serviços de streaming como o Spotify e o SoundCloud. Basta arrastá-los para dentro da página e abrir

a guia configurações para adicionar as músicas desejadas.

e roubar informações. Algumas empresas oferecem serviços de segurança para e-commerce, dentre

elas a Certisign, TrustSign e a Serasa Experian.

Marketing – Divulgar é preciso. Você precisa dedicar uma parte do seu tempo e dinheiro para captação

de novos clientes para sua loja virtual. Crie bons conteúdos, use as redes sociais, Google Adwords,

E-mail Marketing, entre outros.

Logística e Frete – Se a loja existe, então existe uma logística de entrega por detrás dela. Se a experiência

de compra e entrega for ruim, certamente o cliente não voltará a comprar no seu site. E isso é mais

comum do que se imagina. Use os Correios ou transportadoras para o processo de entrega.

Backoffice e ERP – Qualquer loja virtual, quando começa a gerar muito fluxo, precisa de um sistema

que automatize alguns processos. Receber pedidos, verificar pagamentos, conferir, gerar boletos, emitir

notas fiscais eletrônica, são tarefas executadas pelas ferramentas ERP conectadas a sua plataforma de

e-commerce.

Se você quiser mais informações sobre como funciona o e-commerce no Brasil, além das melhores

ferramentas e plataformas para agregar sua loja virtual, acesse o site do E-Commerce Brasil - https://

www.ecommercebrasil.com.br

CRIANDO FORMULÁRIOS

Trabalhar com formulários dentro do Wix também é de extrema importância, principalmente

quando usado para que seus visitantes possam lhe contatar. Para isso, preste a atenção nas explicações

do seu professor, pois vamos adicionar um formulário de contato em seu site de duas formas diferentes:

1ª - Clique no ícone (+) Adicionar do lado esquerdo do editor e selecione

a opção contato. Ele vai adicionar um modelo simples de formulário na

página que você estiver. Com ele inserido, você poderá realizar alterações

básicas dentro dele, como por exemplo a alteração do e-mail de destino,

layout, design, os campos do formulário e as mensagens que aparecerão

quando o usuário clicar no botão enviar.

2ª - Clique no ícone referente ao Wix App Market no lado esquerdo do

editor, selecione a guia formulários e escolha o app de sua escolha. Para

fins educacionais vamos sugerir o uso do 123 Form Builder. Vale comentar

que para usá-lo você precisa fazer um cadastro simples no site do app.

93


92

Além disso, temos vários apps de blogs no Wix App Market. Você poderá adicionar o Tumblr Feed e o

Blogger Feed, para facilitar a comunicação entre plataformas diferentes.

ATIVIDADES

Atividade 1 – Estamos em construçãoVocê e sua equipe iniciaram na aula anterior a exploração do Wix como ferramenta desenvolvimento de sites. E o trabalho continua. Vamos acrescentar no seu projeto alguns formulários, galerias, mídias, textos, imagens, formas, barra de redes sociais, entre outros itens disponíveis no menu (+) Adicionar. Explore a ferramenta dentro do padrão que você já definiu na anteriormente.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – Inserindo um blogTodo bom site vem acompanhado de bom conteúdo, que geralmente é apresentado nos blogs criados junto com os sites. E como o Wix tem uma ferramenta exclusiva para blog, use sua experiência anterior para criar post relacionadas o ramo de negócio da loja virtual que está criando.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

INTERLIGANDO COM AS REDES SOCIAIS

Você já aprendeu nos módulos anteriores qual o tamanho da importância em usar as mídias

sociais e suas redes no mundo dos negócios. E se você vai criar um site, seja ele do tamanho que for,

é muito importante criar links com os perfis sociais da empresa para qual você está desenvolvendo.

Por isso, vamos adicionar uma barra de redes sociais em seu site e direcionar seus visitantes para as

suas páginas de mídia social.

Para adicionar uma Barra de Redes Sociais vá até o lado esquerdo do Editor, clique em (+) Adicionar e

depois em Redes Sociais. A opção de barra de redes sociais aparece logo em seguida. Na mesma tela

é possível também inserir as opções de painel de seguidores do Facebook e do Twitter, por exemplo.

Se preferir, é só usar. Além disso, você pode escolher opções de apps que gerenciam as redes sociais.

BLOGS

Outra função bem bacana do Wix é a possibilidade de inserir

blogs dentro do próprio site. Repleto de templates que oferecem

blog, o Wix tem um menu exclusivo para adicionar diretamente do

editor. No lado esquerdo clique no ícone (+) Adicionar e depois em

Blogs.

Para começar a adicionar seus posts use o gerenciador do blog no menu Blogs. Lá você pode gerenciar

seus posts, as páginas, adicionar elementos e ainda usar apps exclusivos para ele.


94

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

95


RECOLHENDO DADOS

Continuamos o nosso estudo do Wix e a loja virtual, lembrando que é necessário recolher dados

importantes para catalogar os produtos da sua loja. A própria ferramenta de desenvolvimento já

organiza estas informações para facilitar a sua vida, mas os dados que serão usados precisam ser

planejados por você e sua equipe. Estes dados incluem:

• Preço do produto;

• Descontos no preço final;

• Quantidade em estoque;

• Valor do frete;

• Formas de pagamento.

GERENCIANDO A LOJA VIRTUAL

Numa visão geral do Wix, ela apresenta uma solução chamada

WixStores, que organiza toda a parte de eCommerce do seu site.

Assim como todo restante da plataforma, o WixStores não é tão

complicado de usar, personalizando conforme os seus interesses.

Com ele é possível fazer inventários, estoques, adicionar cupons,

gerenciar condições de fretes, criar coleções de produtos,

selecionar o método de pagamento, entre outros.

Contudo, nem todos os serviços estão disponíveis de forma

gratuita, o que exige a assinatura de uma Plano Premium

eCommerce. Para acessar o Gerenciador de Loja a partir do Editor clique no ícone da bolsa (Minha

Loja) no lado esquerdo e abra o Gerenciador de Loja para iniciar os trabalhos de criação.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

Aula 13 - WIX - Loja Virtual - Pt. 1

• Recolhendo dados • Gerenciando a loja virtual • Criando páginas • Controle de pagamentos

97


96

Dentre outras opções do painel WixStores, é possível gerenciar diretamente nas páginas já criadas por

padrão e adicionar elementos (Apps, produtos, etc). Mas o que vamos nos concentrar mesmo é no

uso da opção gerencie sua loja, uma vez que você já selecionou nas aulas anteriores um template

exclusivo para e-commerce.

Gerencie sua lojaDentro da página já criada pelo template, você abrirá o Gerenciador de páginas para ter acesso ao

painel de gerenciamento de produtos, coleções, pedidos, cupons, pagamentos e demais itens. Para

cada um deles, você pode fazer os ajustes que forem necessários. Acompanhe a imagem abaixo e

vamos tentar resumir algumas ações que você deverá realizar.

Adicionar produtosDa aba Produtos no WixStores, você pode editar, adicionar e apagar produtos da sua loja. Ao clicar em

qualquer produto já lançado por padrão, você tem condições de alterá-lo. Porém se quiser, adicione

um novo produto através do botão + Adicionar produto. Algumas informações básicas são necessárias

para apresentar o seu produto, tais como o nome, preço, descrição, imagem (até 10 para cada produto)

e atributos opcionais, tais como desconto, fita (palavra chave que irá aparecer sobre a imagem), peso,

entre outros. Veja as imagens:

Vale uma observação: veja que o preço definido para a cadeira foi de R$ 85,00. Quando você adiciona

o atributo opcional do desconto, o preço é reajustado com o desconto para R$ 76,50. Isso é bem

interessante.

Adicionar coleçõesNa aba Coleções no WixStores, você pode editar, adicionar e apagar coleções de produtos que serão

usadas nas páginas da sua loja. Ao clicar em qualquer coleção já lançada por padrão, você tem

condições de alterá-la. Porém se quiser, adicione uma nova através do botão + Adicionar coleção.

Você digita o nome da coleção e clica no botão + Adicionar produtos na Coleção. Detalhe: você

precisa cadastrar os produtos antes de adicionar a sua coleção.

CuponsNa aba Cupons você pode criar cupons de desconto para seus clientes e adicioná-los em sua loja

virtual. E quem não gosta de um cupom de descontos? Para adicionar clique no botão + Adicionar

cupom da aba. A tela aberta permite que você digite o nome do cupom, um código (que o cliente

adiciona ao final da compra), o tipo da promoção e o tempo em que ele está ativo. Você pode também

limitar o uso deste cupom, indicando o número de vezes que ele pode ser usado.

99


98

CRIANDO PÁGINAS

É possível adicionar uma página da loja através do painel de gerenciamento de loja em sua aba Páginas da Loja. Ao clicar no botão Adicionar ele abre uma página padrão de nome Shop, no qual você personaliza um estilo de galeria de produto, ajustando o layout, configurando a proporção das imagens e definindo o estilo, entre outros. Ele tem um modelo bem parecido com o padrão de páginas já estudado nas aulas anteriores.

Com a página criada, você pode adicionar nela elementos diferentes que vão personalizar sua loja. Esses elementos podem ser agregados utilizando a aba Adicionar Elementos da Loja do Gerenciador de loja.

Após inserido, o elemento pode ser configurado. Clique no elemento que você inseriu ou foi inserido automaticamente, e use a opção configurações. O painel aberto vai permitir você alterar, por exemplo, o estilo e cores da matriz (galeria) para facilitar a visualização dos seus produtos.

CONTROLE DE PAGAMENTOS

Uma última opção de estudo dentro da loja virtual é planejar e ajustar a forma de pagamento das compras realizadas. Infelizmente, o acesso completo ao sistema de pagamentos é feito por meio de uma conta paga (Premium). Mas você já pode ir estudando o recurso, pois com ele é possível interligar:

Cartões de Crédito – muito usado e atinge um público mais amplo. As bandeiras mais usadas são Visa, Mastercard, entre outros.

MercadoPago do MercadoLivre – conecta com cartões de crédito, boleto bancário e outros métodos de pagamento.

Frete e impostoNa aba Frete e imposto você pode definir como será cobrado o frete na entrega do produto que o seu

cliente adquiriu. Você primeiro escolhe onde quer vender e em seguida o frete e o imposto que será

cobrado.

Adicionar frete garante que você gerencie os custos dele. Escolha a região em que a sua loja virtual

atuará, o tipo de tarifa (fixa ou por peso), o título da opção de envio, o prazo de entrega e a taxa.

Simples, não acha?

Já o imposto permite que você gerencie quais as condições e valor (%) do imposto a ser pago em

transações de frete. É um complemento ao item anterior.


100

PagSeguro - provedor de pagamentos do UOL para compradores e vendedores brasileiros.

PayPal – é uma alternativa para abrir uma conta comercial de cartão de crédito.

Pagamento Offline - Aceite de pagamentos de forma off, ou seja, através de boletos, ordens de pagamento, transferências bancárias, entre outros.

ATIVIDADES

Atividade 1 – Gerenciando sua loja virtualO conhecimento que você adquiriu hoje abriu novos horizontes para desenvolvimento e configuração da sua loja virtual. Use e abuse das ferramentas estudadas e incremente a sua loja. O processo é mais trabalhoso porque você precisará inserir produtos um a um, além de mantê-los atualizados. Mas não perca tempo e trabalhe com dedicação.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

101


CARRINHO DE COMPRAS

Outro item bastante usado numa loja virtual é o chamado “carrinho de compras”. A grande

vantagem de se utilizar este recurso no Wix é que através dos elementos da sua loja virtual é possível

adicionar automaticamente um ícone ao cabeçalho de seu site para interligar todos os produtos da

loja a este carrinho. Quando os seus clientes clicam no botão Adicionar ao Carrinho, o widget de

carrinho irá se abrir no lado direito de seu site.

Neste widget, os seus clientes podem:

• Ver quais produtos eles adicionaram no carrinho;

• Conferir a quantidade de cada produto;

• Visualizar o subtotal e total das compras;

Para usar o carrinho de compras, vá no lado esquerdo do editor, clique no ícone Minha Loja -

Adicionar Elementos de Loja. Você arrasta a opção Carrinho de Compras para a posição desejada.

Só é recomendável que você o coloque no cabeçalho de seu site, para que seja visível e acessível de

todas as páginas.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

Aula 14 - WIX - Loja Virtual - Pt. 2

• Carrinho de compras • Inserindo mapas• Adicionando códigos HTML • Inserindo documentos • Wix App Market • SEO das páginas • Preparando o seu site para mobile

103


102

INSERINDO MAPAS

Mesmo que seja uma loja virtual, ela precisa de um espaço físico devidamente aprovado pelos

órgãos competentes. É uma empresa como todas as outras. Por isso, uma das funções mais interessante

utilizada nos sites institucionais do momento é o uso de mapas de localização. Compartilhe com os

visitantes do site o local onde a empresa está situada, utilizando o App do Google Maps. Esta opção

encontra-se no lado esquerdo do editor, no botão + Adicionar – aba Contatos. Arraste a imagem do

mapa para dentro do site e pronto. Agora é só usar o botão de configurar para colocar o endereço

correto, uma breve descrição do local e as opções do mapa, como o controle de zoom, navegação,

Street View, entre outros.

Você também poderá escolher diferentes opções de mapa dentro o botão Layout. Eles são do tipo

Normal, Terreno, Satélite ou Híbrido. Faça o teste.

ADICIONANDO CÓDIGOS HTML

O editor do Wix permite que você adicione os seus próprios códigos

HTML dentro do site. Para que você possa abrir este espaço, vá no lado

esquerdo do editor, no botão + Adicionar – aba Mais. Arraste a imagem

referente ao Código HTML para dentro de qualquer lugar da página e

use o botão de configurar para adicionar o código.

Aqui vale uma consideração: segundo o Wix, o código HTML é um

código externo e não foi testado pela plataforma e, por isso, não há

suporte da equipe deles. Eles são bem claros quando dizem que o Wix não será capaz de ajudá-lo

em nenhuma questão relacionada a funcionalidade do código. Isso quer dizer: use por conta própria.

Além do código, é possível incorporar um site qualquer direto na janela. Use apenas a opção Endereço

do site.

INSERINDO DOCUMENTOS

Este tópico não se trata exclusivamente da Loja Virtual, mas vale a pena considerar. Uma

funcionalidade do Wix permite que os seus visitantes façam download de documentos em seu site,

com apenas um clique. Isso pode ser útil, por exemplo, se você quiser que o visitante baixe uma

planilha de preços de um determinado grupo de mercadoria vendida na loja.

Para adicionar, use o botão + Adicionar no lado esquerdo do editor e depois clique na aba Mais. Clique

no botão desejado em Botões de Documento, ou arraste-o para o local da página que você deseja

colocá-lo. Daí você seleciona qual documento, planilha, apresentação está relacionado ao botão.

Importante: O tamanho máximo de arquivos para upload é de 15MB. É possível fazer upload de

documentos .doc, .docx, .xls, .xlsx, .ppt, .pptx, .odt, .odp e .pdf em seu site.

WIX APP MARKET

O Wix App Market ou Mercado de Aplicativos do Wix é uma funcionalidade da plataforma que está

disponível a partir do editor do Wix. Segundo o site, são mais de 34.000 apps criados pela comunidade

externa de desenvolvedores e pela própria equipe do Wix. Grande parte deste apps são gratuitos ou

possuem uma versão gratuita. Outros possuem a opção de se fazer um upgrade para uma versão

Premium, com recursos extras.

105


104

SEO DAS PÁGINAS

O seu site desenvolvido no Wix pode utilizar SEO para visualização nos motores de busca. Lembre-

se que ao publicar o seu site é importante que as pessoas possam encontrá-lo nos resultados dos

motores de busca, tais como o Google e o Bing. E o Wix tem ferramentas que ajudam a otimizar o seu

conteúdo para melhorar o SEO de seu site.

Para permitir que os motores de busca incluam seu site nos resultados deles, você precisa habilitar

através do menu Site (canto superior esquerdo do Editor) - Configurações do Site – aba SEO. Ative o

Status do SEO e pronto.

Outro item bacana é que você pode configurar o SEO de cada uma das páginas do seu site, deixando

elas mais individualizadas para os motores de busca. Na seção Páginas de seu Editor, clique na página

desejada e no ícone azul de configurações (...) ao lado do nome dela. Escolha a opção SEO da página

e aplique as regras apenas aquela página. Veja que enquanto você configura os itens (a descrição, por

exemplo), no rodapé desta janela você enxerga como o seu site será apresentado nos resultados do

Google.

PREPARANDO O SEU SITE PARA MOBILE

Como já dissemos nas aulas anteriores, o seu site precisa se adaptar

a qualquer dispositivo para alcançar o mercado. Outra vantagem do

Wix é a criação automática de uma versão otimizada para visualização

em dispositivos móveis. Mesmo que seja criada de forma automática,

você poderá editar o visual mobile utilizando o Editor Mobile. Para

acessá-lo, clique no ícone de Trocar Visualização do Editor (desenho

do celular) no canto esquerdo superior. Assim, você consegue alterar o posicionamento, redimensionar

os elementos, esconder outros, criar barra de Ação Mobile, alterar o estilo, entre outros.

Os apps ali disponíveis incluem painel de controle, comunicação, pagamento, redes sociais,

buscadores, contadores, entre muitos outros. Não vamos conseguir listar aqui todas as utilidades dos

apps disponíveis e caberá a você este passeio para descobri-los.

Só para exemplificar o seu estudo, vamos utilizar um app simples

para chat dentro da sua loja virtual. Escolhemos o LiveChat como

modelo, mas existem outros que também fazem a mesma função

de forma gratuita para testes ou paga. O LiveChat, por exemplo,

permite testes durante 30 dias.

Quando adicionado, ele abre a caixa de chat no rodapé direito da sua página. O que você precisa fazer

é interligar aquela caixa com o sistema do LiveChat. E isso é feito no botão de configurações da caixa

inserida. A tela abaixo a esquerda é apresentada quando clicado neste botão. Em seguida, basta clicar

no botão Connect Account para acessar o sistema do LiveChat (tela da direita). Se você ainda não tem

cadastro, basta realizá-lo e pronto.


106

ATIVIDADES

Atividade 1 – Finalizando a loja virtualEstamos chegando ao fim deste módulo com muito conhecimento adquirido. Certamente você já consegue trabalhar com maior clareza na hora de desenvolver um site para uma empresa ou pessoa que te contratou. Mas faltam os últimos ajustes no seu projeto. Complemente as novas ferramentas e acerte as páginas que ainda estão faltando conteúdo. É melhor não acrescentar novos recursos do que deixar página com buracos.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

Atividade 2 – Apresentação Que tal apresentar o seu projeto para a turma? O seu professor vai apresentar um cronograma bem interessante para que você possa compartilhar com outros colegas a experiência de desenvolver para internet, assim como mostrar o resultado do seu trabalho. Essa apresentação não deve ser maior do que cinco minutos, apenas como uma visão geral da sua construção.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

107


HISTÓRICO DO SITE

O Wix apresenta uma ferramenta que permite visualizar um histórico do

seu site, dando uma visão geral de todas as edições e mudanças que você fez

ao longo do projeto. Isso é importante porque você pode ver ou restaurar uma

versão anterior de seu site a qualquer momento.

Mas nem tudo pode ser recuperado. Como o próprio Wix determina, os

aplicativos, blogs e construtor de listas não podem ser totalmente recuperados.

Dados e estilos destes itens serão mantidos como eram quando foram salvos

pela última vez.

PLANOS

Até agora, buscamos trabalhar com as versões gratuitas tanto do Wordpress quanto do Wix. E

garantimos que elas resolvem boa parte dos seus problemas no desenvolvimento de um site. Mas

não dá para deixar de considerar que os chamados Planos Premium ajudam a incrementar mais

funcionalidades e deixar o site mais dinâmico ainda.

Imag

ens

e ilu

stra

ções

: Sh

utt

erst

ock

/ D

ivu

lgaç

ão

Aula 15 - Publicação e divulgação do site

• Histórico do site • Planos • Domínio e e-mail • Estratégias de divulgação

109


108

Em ambas as plataformas que estudamos, os planos permitem usar domínio adquirido por qualquer

outra empresa registradora de domínios (Registro.br, por exemplo), remover anúncios da plataforma

dentro do seu site, além da disponibilidade de uma quantidade maior de armazenamento. Tudo vai

depender do tipo de plano que você escolher.

Outra vantagem destes planos é que eles incluem suporte. As vezes numa situação mais crítica, o

suporte ajuda você a resolver o problema e não deixar o site fora do ar.

Importante dizer que os planos premium, geralmente, são válidos apenas para um site. Para mais de

um upgrade é preciso adquirir um plano para cada site. No momento da elaboração desta apostila,

estes eram os valores e condições do Wix e do Wordpress.

DOMÍNIO E E-MAIL

Tanto o Wix quanto o Wordpress aceitam hospedagem dentro de seus servidores para guardar

o seu site. E isso pode ser feito com o uso de um domínio que você adquiriu ou transferindo de

outro host. No caso do Wix, para comprar o domínio basta acessa o menu Planos – Domínio e faça a

pesquisa de disponibilidade. Ou também, use um domínio que você já possui. As duas imagens abaixo

representam as verificações de domínio do Wix e do Wordpress, respectivamente.

Você também pode ter um endereço de e-mail personalizado, criando uma imagem profissional mais

adequada para o negócio. Ele nada mais é do que uma caixa de entrada personalizada baseado no

nome de domínio do site/empresa. Exemplo: [email protected]

111


110

ATIVIDADE

Atividade 1 – estratégias de divulgaçãoCrie estratégias de divulgação do site para que seja apresentada ao cliente que contratou os seus serviços de desenvolvedor. Mostre para ele de que forma você, sua equipe e ele vão divulgar o projeto para os clientes do negócio. Tente descrever de forma sucinta e clara as regras que você pretende executar.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ESTRATÉGIAS DE DIVULGAÇÃO

Depois de tudo pronto, o momento agora é de divulgação do site. Ele não pode ser criado para

cair no esquecimento de ninguém, muito menos de quem te contratou para desenvolvê-lo. Além

disso, ele precisa ser bem visitado para gerar bons negócios.

Para finalizar, separamos algumas dicas de divulgação. São elas:

• Deixe-o sempre atualizado para que ele mantenha o número de acessos e de interação. Se o

site for bom e confiável em relação ao conteúdo, muita gente vai querer vê-lo;

• Use todos os meios possíveis para divulgá-lo. Busque revistas, jornais, panfletos, cartões de visita,

adesivos de vidro, banners, TV, etc. Estes são meios que ainda tem força, mas nada melhor do que usar

as mídias sociais para isso;

• Use e-mail marketing e faça chamadas exclusivas para dentro do site;

• Ofereça no site o acesso a outros sites. Isso forma parcerias e ajuda na divulgação do que você

criou;

• Compensa gastar um pouquinho e fazer anúncios em links patrocinados no Google ou Facebook,

por exemplo.

• Visual atrativo e responsivo faz a diferença. Já que você está desenvolvendo use todos os

recursos visuais para chamar a atenção em qualquer lugar.

• Mantenha a interação dentro de comentários em outros sites sobre o tema ou dentro de grupos

em redes sociais.

• O tradicional boca a boca ainda funciona;

Vale lembrar que uma boa estratégia de divulgação é amigáveil aos motores de busca.

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

_______________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES


112

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

____________________________________________________________________________________________________________

ANOTAÇÕES

Editora Mona Ltda - ME · Nossa proposta é ensiná-lo como utilizar ... trabalhar em conjunto...

Documents

Transcript of Editora Mona Ltda - ME · Nossa proposta é ensiná-lo como utilizar ... trabalhar em conjunto...