Desenvolvimento de Sites Baixa

Impressão • Acabamento
Editora Mona Ltda - ME

Rua José Bajerki, 271 • Curitiba/ PR • Cep: 82.220-320
Fone (41) 3068-9009 • Pabx (41) 3068-9008
www.graficamonalisa.com.br
PREPPES
Desenvolvimento de Sites
Curitiba: PREPPES, 2016
XXX p. il.
Impresso no Brasil
Printed in Brazil
2016
Av. Marechal Deodoro, 314 - Centro - Curitiba/PR

Telefone: (41) 3112-2112
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 8 – PUBLICANDO – PT. 2 63
TRABALHANDO COM IMAGENS 63
AULA 01 – PROJETANDO UM SITE 09 INSERINDO OUTRAS MÍDIAS 65
POR QUE PROJETAR? 09 EDITOR DE POSTS 66
COLHENDO AS INFORMAÇÕES 10 AGENDAMENTO DE PUBLICAÇÃO 67
FAZENDO O BRAINSTORM 10
DESENHANDO UM LAYOUT 11 AULA 9 – OTIMIZANDO COM SEO 69
TIPOS DE SITES 12 ENTENDENDO O SEO 69
PRINCIPAIS REGRAS PARA CRIAR UM SITE 13 COMO FUNCIONAM OS MECANISMOS DE BUSCA 70
PLANEJANDO RECURSOS E TEMPO 14 TÉCNICAS DE SEO PARA SITES E BLOGS 71
REGISTRO.BR 15 SEO NO WORDPRESS 72
PLUG-INS PARA SEO 75
AULA 02 – FERRAMENTAS E PROGRAMAÇÃO 19
SOFTWARES DE DESENVOLVIMENTO 19 AULA 10 – ESTATÍSTICAS DO SITE 77
FERRAMENTAS CMS E HTML5 19 PORQUE MENSURAR O SEU SITE? 77
PRINCIPAIS PLATAFORMAS PARA DES. DE SITES 20 EXPLORANDO AS ESTATÍSTICAS NO WORDPRESS 78
LINGUAGEM E BANCO DE DADOS 21 APP WORDPRESS 80
PACOTES IMPORTANTES 22 MELHORES FORMAS DE DIVULGAÇÃO DO SEU SITE 80
GOOGLE ANALYTICS 81
AULA 03 – WORDPRESS - PRIMEIRO CONTATO 25
O SISTEMA WORDPRESS 25
CARACTERÍSTICAS DO WORDPRESS 26 AULA 11 – WIX – PT. 1 83
CONFIGURAÇÕES INICIAIS 27 O QUE É O WIX? 83
TEMAS OU TEMPLATES 27 CRIANDO UMA CONTA 84
CONFIGURAÇÕES DE PERFIL E CONTA 28 AÇÕES DO SITE 84
CONFIGURAÇÕES GERAIS 30 CUIDANDO DA APARÊNCIA 85
O PRIMEIRO PROJETO 30 ADICIONANDO E EDITANDO PÁGINAS 86
ADICIONADO E GERENCIANDO IMAGENS 86
AULA 04 – WORDPRESS – SERVIDOR LOCAL 33
BAIXANDO O PACOTE DO WORDPRESS 33 AULA 12 – WIX – PT. 2 89
ABRINDO O XAMPP 34 PROJETO LOJA VIRTUAL 89
CRIANDO UM BANCO DE DADOS 34 CRIANDO FORMULÁRIOS 90
INTERLIGANDO COM WORDPRESS 35 GALERIAS 91
LINK INTERNOS E EXTERNOS 91
AULA 05 – WORDPRESS – PAINEL 39 INTERLIGANDO COM AS REDES SOCIAIS 92
POR DENTRO DO PAINEL 39
APARÊNCIA 39 AULA 13 – WIX - PROJETO LOJA VIRTUAL – PT. 1 95
PÁGINAS 41 RECOLHENDO DADOS 95
GERENCIANDO USUÁRIOS 42 GERENCIANDO A LOJA VIRTUAL 95
FERRAMENTAS 43 CRIANDO PÁGINAS 99
FEEDBACK 44 CONTROLE DE PAGAMENTOS 99
AULA 06 – WORDPRESS – CONFIGURAÇÕES 47 AULA 14 – WIX - PROJETO LOJA VIRTUAL – PT. 2 101
AJUSTANDO MENUS 47 CARRINHO DE COMPRAS 101
AJUSTANDO AS CONFIGURAÇÕES 48 INSERINDO MAPAS 102
NOTIFICAÇÕES 50 ADICIONANDO CÓDIGOS HTML 102
FINALIZANDO A PRIMEIRA PARTE DO PROJETO 51 INSERINDO DOCUMENTOS 103
WIX APP MARKET 103
AULA 7 – PUBLICANDO – PUBLICANDO PT. 1 55 SEO DAS PÁGINAS 105
O QUE É O BLOG? 55 PREPARANDO O SEU SITE PARA MOBILE 105
A IMPORTÂNCIA DOS BLOGS 55
O CONTEÚDO IDEAL 56 AULA 15 – PUBLICAÇÃO E DISTRIBUIÇÃO DO SITE 107
CATEGORIAS, TAGS E POSTS 57 HISTÓRICO DO SITE 107
ORGANIZAÇÃO E PLANEJAMENTO DE POSTS 60 PLANOS 107
DOMÍNIO E E-MAIL 109
ESTRATÉGIAS DE DIVULGAÇÃO 110
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
Imagens e ilustrações: Shutterstock
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.
9
COLHENDO AS INFORMAÇÕES
descartada ou julgada como errada ou absurda, até que todas estejam anotadas num papel ou num
O primeiro passo de qualquer projeto de site é colher
quadro e aí sim o grupo escolhe as melhores opções.
todas as informações que farão parte dele. Se você foi
contratado para criar um site responsivo para uma agência
Valem algumas informações muito importantes sobre uma reunião de brainstorming:
de viagens, por exemplo, então deverá entender qual o
público-alvo deles, as cores da empresa, os dados dos
1. Proibição às críticas;
pacotes que serão vendidos, as promoções, entre muitos
2. Uso da criatividade plena;
outros. Todas as informações precisam estar anotadas
3. Escolha um ambiente que inspire;
para que a etapa do brainstorming seja a mais completa
4. Definição um moderador/Facilitador;
possível.
5. Exponha os requisitos;
6. Faça a seleção das melhores ideias;
Esta parte de colher as informações essenciais junto ao seu cliente é chamado de coletar requisitos.
7. Forneça ao grupo um relatório com as ideias selecionadas.
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 DESENHANDO UM LAYOUT
Você certamente já ouviu a palavra Assim que os requisitos forem coletados e a reunião de brainstorming for realizada, é a hora de
brainstorm neste curso. Relembrando, alguém se responsabilizar por rascunhar o layout do site. Esta atividade pode
ela nada mais é do que uma tempestade ser feita numa folha de papel em branco ou através de ferramentas como o
de ideias. Essa é uma expressão da língua Fireworks ou Photoshop. O que você precisa entender é que desenhar um
inglesa que une as palavras brain (cérebro) layout não tem nada de muito complicado. Concentre-se numa visão limpa,
com storm, que significa tempestade. bonita e combinando as cores.
Simples assim!
Outra característica que importa (mas não exatamente agora) é a experiência
Da palavra surge a ação. Fazer brainstorming do usuário. O seu site não pode ser de difícil navegação, utilizando páginas
é realizar uma dinâmica/técnica que com layouts bem parecido, se não iguais.
envolve um grupo de pessoas para resolver
problemas específicos, desenvolver novas Geralmente, nas ferramentas que vamos usar para desenvolver o nosso
ideias ou projetos, ou simplesmente reunir informações úteis para futuras ações. Neste caso, é uma projeto, usamos os chamados templates, que são layout já pré-definidos. Mesmo assim, desenhar o
reunião que permite todo o planejamento do seu site. rascunho ajuda você a não perder tanto tempo para escolher o melhor template.
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
10 11
TIPOS DE SITES Blogs

Sites adicionais aos sites institucionais e dinâmicos. Geralmente
Atualmente, os sites estão cada vez mais dinâmicos, com interatividade e riqueza visual. Isso foi trabalham com conteúdo exclusivo sobre um determinado
graças a Web 2.0 e a chamado HTML 5. Como a variedade é muito grande, existem diferentes tipos de assunto. São também potenciais ferramentas de divulgação e
sites mercado. Entre eles, estão: marketing.
Site Institucional - Usado pela maioria das empresas, composto

basicamente por páginas como informações sobre o negócio, Portal
serviços, produtos, preços, e formas de contato. É um tipo de site São agregadores de conteúdos diversos. Geralmente, eles são
que se preocupa com a apresentação da empresa e sua presença construídos com uma gama grande de conteúdo, tais como
na internet. É fácil de ser criado e os custos são pequenos. Eles notícias, jogos, vídeos, entre outros. São exemplos de portais: G1,
geralmente não aproveitam o potencial da internet para interagir UOL, R7.
com o cliente.
Site responsivo
É um tipo de site flexível que automaticamente se encaixa no PRINCIPAIS REGRAS PARA CRIAR UM SITE
dispositivo do usuário, seja ele um PC, smartphone, tablet, entre
outros. Isso é para melhorar a experiência e a navegabilidade do Como todas as atividades que nos rodeiam, criar um site também requer regrinhas básicas:
usuário, uma vez que a variedade de dispositivos conectados à
1. Seja objetivo – Não trabalhe com informações demais para não cansar o usuário. Saiba
internet aumenta a cada dia. Toda empresa precisa considerar
bem o que você vai fazer. Divulgar sua marca? Vender produtos? Divulgar notícias? Pense exata-
que seu site deve ser responsivo. mente no que quer.
eCommerce 2. Público-alvo – Pense em quem vai visitar o seu site. Jovens, adultos, idosos, homens,
São os sites de comércio eletrônico, ou seja, permitem compra e mulheres, estudantes, executivos? São eles que vão consumir o conteúdo do seu site.
venda de produtos. Eles são construídos com sistemas de
verificação e pagamento virtual que permitem que o consumidor 3. Conteúdo – Vamos falar disso mais a frente, porém é importante que você saiba que site
bom é aquele tem conteúdo de qualidade.
encomende diretamente da loja online, com rapidez e de forma
bastante segura e intuitiva. 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,
Onepage do menos ao mais experiente. Uma regra antiga chamada “Regra dos três cliques” diz que qualquer
Sites em que toda a informação é carregada em uma única informação no site deve ser encontrada em apenas três cliques em links diferentes. Acima disso o
página, à medida que o usuário percorre o conteúdo. A internauta desiste.
principal vantagem desse tipo de site é que ele funciona bem
5. Atualização – Mantenha seu site sempre bem atualizado. Ninguém gosta de acessar um site
em aplicativos mobile. Ao clicar em qualquer link do menu, o
hoje e encontrar informações do ano passado.
site apenas rola automaticamente até a respectiva seção, sem
carregar uma nova página. 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.
12 13
CRONOGRAMA DE TEMPO
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
Etapa Descrição Inicio Fim
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.
Planejamento Brainstorming e rascunho do site 11/11/20... 11/11/20...
PLANEJANDO RECURSOS E TEMPO Plataforma Definição da plataforma de uso 12/11/20... 12/11/20...
Construção –
Antes de começar a construção de um site, é importante reservar um tempinho para analisar e Entrega do design do site 13/11/20... 19/11/20...
Fase 1
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, Revisão e
Controle e validação da Fase 1 20/11/20... 20/11/20...
entre outros. Você pode até fazer um breve orçamento para verificar os melhores preços. controle
*Acrescentar todas as fases até o encerramento do projeto
RECURSOS HUMANOS 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
Função/Cargo Descrição Quantidade possam cumprir com exatidão. O seu professor vai orientar.
Web design Responsável pelo design do site 02

REGISTRO.BR
Programador Responsável pela parte lógica/programação do site 02
Segundo o próprio site – www.registro.br – ele é o departamento do NIC.br responsável pelas
01 atividades de registro e manutenção dos nomes de domínios que usam o .br. Eles também executam
Webmaster Responsável pelo projeto do site
o serviço de distribuição de endereços IPv4 e IPv6 e de números de Sistemas Autônomos (ASN) no
Brasil.
Estagiário Assistente de programação 01
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
RECURSOS HUMANOS por um titular com CPF ou CNPJ para pessoa jurídica.
Função/Cargo Descrição Quantidade 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
Web design Responsável pelo design do site 02
há necessidade de fazer pesquisas. Basta começar a criação.
Programador Responsável pela parte lógica/programação do site 02
01
Webmaster Responsável pelo projeto do site
Estagiário Assistente de programação 01

*Estes valores foram retirados do site da GoDaddy e do Registro.br
14 15
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
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.
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 caso Atividade 3 – Planejamentos

Vamos iniciar o nosso primeiro projeto. Para isso, sugerimos dois estudos de caso que deverão ser Faça as tabelas de planejamento para os recursos que você vai precisar para desenvolver o
trabalhados pelas equipes. Formem times de, no máximo, 4 pessoas e escolha uma pessoa para projeto do site. Faça uma pesquisa de preços de hospedagem, registro, entre outros. Já o cronograma
liderá-lo. Em seguida, escolha um dos cases abaixo e desenvolva o brainstorming do projeto. de tempo é obrigatório que seja concluído ainda nesta aula.
____________________________________________________________________________________________________________ ____________________________________________________________________________________________________________
____________________________________________________________________________________________________________ ____________________________________________________________________________________________________________
____________________________________________________________________________________________________________ ____________________________________________________________________________________________________________
____________________________________________________________________________________________________________ ____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
Case 1 – Pizzaria ____________________________________________________________________________________________________________
Sua 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, Ações a serem
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 Etapa Descrição início fim
que vocês definam as cores e o layout do site.
Case 2 – ONG de proteção aos animais

Uma 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
*Acrescentar todas as fases até o encerramento do projeto
deixaram livre para que vocês definam as cores e o layout do site.
16 17
18
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,
Imagens e ilustrações: Shutterstock / Divulgação
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.
19
Wordpress - É a maior plataforma do mundo quando se trata de construção de

Mas o que é um CMS? A sigla significa Content Management System ou
sites. Recomendável conhecimentos básicos de programação apenas para
Sistema de Gerenciamento de Conteúdo, ou seja, administrar conteúdos
personalizar a página. Ele disponibiliza uma conta gratuita e outra paga. Para a
em páginas da web. É uma ferramenta que permite a um editor criar,
escolha de qual utilizar, vai depender muito mais do template a seu usado e do
classificar e publicar qualquer tipo de informação em uma página web. É
serviço de hospedagem.
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
Wix – Plataforma que utiliza HTML5 e permite interligação com base de dados,
da página nem as particularidades de programação da plataforma onde
além de ser bem intuitivo. Muito conhecida e usada.
estiver hospedada a web.
uCoz – Uma ferramenta em amplo crescimento e que começou a operar no Brasil
Dentre as principais plataformas que oferecem ferramentas CMS podemos não tem muito tempo. O construtor de sites grátis tem uma grande variedade de
destacar: Wordpress (indicado para os blogs), Drupal, Mambo, Joomla, templates para ativar sua criatividade.
entre outros.
GoDaddy - É uma empresa registradora de domínios e hospedeira de sites. Ele
Já o HTML5 é uma evolução do famoso HyperText Markup Language (Linguagem também possui um construtor de sites bem fácil de ser usado.
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 LINGUAGEM E BANCO DE DADOS
se baseia na forma de leitura por seres humanos em qualquer dispositivo, uma vez
Você criou um blog ou um site para uma
que ela é compreendida pela maioria deles.
empresa e precisa que ele armazene (claro!) as
informações de conteúdo que você acrescentar.
Para os desenvolvedores, fica mais rápido produzir sites limpos e dinâmicos. Para o usuário, a Para isso, ele se comunica com um banco de
navegação se torna mais ágil, além de visualmente atrativo. Algumas ferramentas que utilizam dados, que é um conjunto de informações que são
HTML 5, como o Wordpress e o Wix, serão estudadas mais adiante neste curso. inseridas ao longo da utilização. Estas informações
podem ser números, imagens, texto, vídeos, entre
outros.
PRINCIPAIS PLATAFORMAS PARA O banco de dados mais comum das ferramentas

DESENVOLVIMENTOS DE SITES CMS é o MySql, que está incluído na contratação
do seu serviço de hospedagem. As vantagens de
Todos os dias surgem novas plataformas que oferecem ferramentas para criação de sites, sem utilizar banco de dados como o MySql, por exemplo,
a necessidade de um especialista. E isso tem chamado a atenção de pessoas que querem criar elas é a portabilidade (suporta praticamente qualquer plataforma atual), compatibilidade, desempenho,
mesmas o site para o seu negócio. É um tipo de serviço prático, com uma grande facilidade de uso fácil de usar, software livre e possui uma interface gráfica a bem intuitiva.
da plataforma e que não exige conhecimentos avançados de programação ou tecnologia.
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,
Se você ainda não se convenceu de que esta é uma grande oportunidade de negócios, saiba que estão: JavaScript, Java, PHP, Python, entre outras. Não é nosso objetivo explicar o uso destas
em apenas algumas horas é possível criar uma página e disponibiliza-la na web para que o mundo linguagens durante este módulo, mas é importante que você saiba o que está por trás de uma
inteiro veja. Dentre as principais plataformas, temos: página web.
20 21
PACOTES IMPORTANTES A instalação segue o padrão tradicional de extração dos arquivos. Ao final, você
conseguirá abrir o painel de controle do XAMPP.
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 Ele vai pedir para que o computador seja reiniciado. Depois que isso acontecer, abra o painel de
servidores de código aberto existentes, incluindo FTP, MySQL e Apache com PHP e Perl. Você instala controle do XAMPP e inicie os servidores. Nas próximas aulas vamos ajustar o Admin da segunda
baixando o executável e extraindo o arquivo compactado. Depois, basta executar o aplicativo que linha (onde diz MySQL) para abrir o banco de dados que vamos usar.
inicia os servidores. No Windows, o executável possui o nome xampp_start.exe.
Os servidores do XAMPP estão no endereço http://127.0.0.1, e o armazenamento dos arquivos será
Como instalar o XAMPP na pasta htdocs no diretório que você extraiu os arquivos do XAMPP.
Primeiro 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. ATIVIDADES
Atividade 1 – Passeio pelas plataformas
Mesmo 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
Depois de baixado, abra o arquivo executável e siga as etapas de instalação. 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:
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
22 23
Atividade 2 – Instalando o XAMPP

Para 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?
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
24
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
25
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. 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
CARACTERÍSTICAS DO WORDPRESS criação e depois alterar se sentir vontade;
Dentre as várias características que permitem o sucesso do Wordpress, podemos destacar: • Definir título e a descrição;
• Uso da plataforma online através do seu site oficial - https://br.wordpress.com
• Definir uma estrutura de links permanentes. Vamos falar disso mais a frente;
• O usuário pode reorganizar todo o layout através dos chamados widgets sem nenhuma
necessidade de editar códigos; • Configurar as opções de leitura e escrita.
• 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; TEMAS OU TEMPLATES
• Repleto de temas, tornando a aparência e design adaptável conforme o seu gosto e necessidade. Depois de criada uma conta no Wordpress, começa a construção das suas primeiras páginas. E
Ele disponibiliza temas gratuitos e Premium para que o site fique a cara do seu cliente; 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.
• 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, Como já dissemos, no Wordpress existem temas gratuitos e Premium (pagos). Ambos possuem a
inserir mídias, entre muitos outros; 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.
• É distribuído sob a licença GPLv2;
Além dos temas já disponíveis, você pode encontrar muitos outros
• Permite a importação e exportação de dados; em sites como Theme Forest, Elegant Themes ou StudioPress. Na
própria plataforma, você encontra os temas no menu Aparência –
• Repleto de plug-ins para diversas funcionalidades. Aí vale o conhecimento em programação Temas no seu Painel.
PHP para desenvolver plug-ins personalizados e fazer com que o site tenha a funcionalidade
que precisar; 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
• Possui uma comunidade de desenvolvedor (em português também) que promovem eventos atualização é recente. Por isso, antes de ativar, dê uma visualizada e navegada pelo tema clicando
e tiram dúvidas online. no botão Visualizar.
26 27
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,
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!
é 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
CONFIGURAÇÕES DE PERFIL E CONTA
deixar configurado no perfil. Você pode até escolher o dia da semana e a hora que estes e-mails vão
Quase 100% das plataformas precisam de ajustes para identificação correta do seu perfil. E no ser enviados a sua caixa de entrada. Confira a tela de notificações.
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.
28 29
CONFIGURAÇÕES GERAIS
ATIVIDADES
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 Atividade 1 – Iniciando o projeto
data e hora, entre outros. Uma observação importante é sobre as informações do título e descrição, Como você leu no tópico anterior, vamos iniciar o projeto do site dentro das especificações
pois elas vão fazer a diferença quando formos tratar de SEO nas próximas aulas. 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ções
Definimos 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.
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
O PRIMEIRO PROJETO ANOTAÇÕES

____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
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á. ____________________________________________________________________________________________________________
30 31
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
32
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.
33
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.
ABRINDO O XAMPP Automaticamente ele acrescentará o localhost.
Depois de instalado, o XAMPP agora permite ser gerenciado. Para isso, abra o seu executável
No rodapé da página haverá um botão Executar. Pronto, seu
(XAMPP Control Panel) e inicie o Apache e o MySQL, clicando nos botões Start. Assim que iniciados,
banco de dados e usuário estão prontos. Agora é interligar
eles ficarão na cor verde.
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.
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.
34 35
No caso do exemplo que vamos usar nas próximas aulas, o nome da pasta será “karpo”. Com Na tela seguinte preencha os dados solicitados. Se ao digitar uma senha ele insistir em aparecer
ela renomeada, volte ao navegador e digite numa nova aba o seguinte endereço: localhost/ como fraca, não se preocupe. Ela só aparecerá como forte se for uma senha grande. Clique em
nomedapasta. No caso do nosso exemplo digitamos localhost/karpo. A página abaixo será exibida. Instalar Wordpress e pronto.
Vamos lá?
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ê.
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á.
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
Após clicar no botão enviar, a mensagem abaixo aparecerá na sua tela. Agora é só instalar. do nosso site.
36 37
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 local
Você 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
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
38
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:
39
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.
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 personalizados

O 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.
Fontes
Permite definir fontes personalizadas para títulos e texto base. 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
Imagem do Cabeçalho (como ficará a página) e publicar direto.
Crie uma imagem bem bacana e envie para o Wordpress colocar como cabeçalho do seu template.
Na caixa de atributos, bem abaixo da caixa de publicação, é possível definir o nível hierárquico da
Menus página. Vamos ao exemplo: você tem uma página chamada “Nossa história” que possui outras duas
Crie menus personalizados para o seu site. 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”.
Widgets
São ferramentas que cada tema nos oferece para adicionarmos conteúdos na barra lateral do site/ Já a Ordem permite que você escolha a posição que irá aparecer na lista de links, que por padrão,
blog. Pode ser editado e diferenciados de acordo com o tema. Ele permite que você exiba páginas, são ordenadas alfabeticamente. Altere os números para cada página e coloque na ordem que você
categorias e links personalizados em barra lateral. quiser. Ex: “Nossa história” (1) – “Localização” (2) – “Dicas” (3) – “Contatos” (4).
40 41
de usuário tem um limite para acessar ou editar dentro do seu WordPress. Assim:
Esta é a primeira página criada para o restaurante do exemplo. A imagem foi colocada através do Seguidor – só pode fazer comentários em seu site ou blog se você habilitar a função que permita
link Configurar imagem destacada no canto inferior direito da tela de criação da página. Mas além comentários.
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 Colaborador – Pode postar artigos, mas só serão publicados se forem aprovados pelo adminis-
de cada uma delas. 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.
GERENCIANDO USUÁRIOS FERRAMENTAS

Quando você criar uma conta no Wordpress, por padrão, As ferramentas do painel servem exclusivamente para lidar com os posts que serão publicados
você é o usuário admin (administrador) dela. Mesmo sendo o no seu site/blog. Dentre as opções mais importantes, temos:
usuário com maiores poderes, você pode configurar outros
tipos de usuários em seu site/blog, como por exemplo: Publique Isso – Facilita o uso de qualquer assunto com o qual você se deparar na web. Você
Administrador, Editor, Autor, Colaborador e Seguidor. Cada tipo pode usá-lo para copiar um link ou para publicar um resumo.
42 43
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.
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
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 Atividade 1 – Configurando o tema
administradores que estão fazendo backup de seus textos ou movendo-se para um novo site/blog. O 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.
FEEDBACK
Atividade 2 – Criando páginas
O seu site agora precisa tomar forma. Vamos começar a
Muitos sites ou blog gostam de utilizar enquetes para saber a opinião de seus visitantes sobre
criação das páginas que você já planejou nas aulas anteriores.
determinado assunto. É fácil criar alguma enquete no Wordpress e acompanhar as estatísticas dire- Se o tema for bem dinâmico, aproveite todas as opções que
tamente do seu painel de votações. ele oferece. Faça testes de visualização, adicione imagens,
enquetes, formulários, localização, entre outras. Use o maior
Um dos plug-ins disponíveis para criação de enquetes no momento da elaboração desta apostila número de opções possíveis para deixar as páginas bem
era o PollDaddy. Nele você acrescentar a pergunta e as sugestões de respostas. Observando o lado atrativas.
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. Atividade 3 – Criando usuários
Use 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.
44 45
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
46
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.
47
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 - 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
Configurações - Escrita permite que mecanismos de busca indexem o seu site para que ele seja encontrado com maior
As configurações possuem outros subitens que também precisam ser explorados. As configurações facilidade em pesquisas.
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.
48 49
Configurações – Mídia danças e adicionar e-mails extras que receberão as notificações. Com esses recursos configurados
As configurações de Mídia permitem que você controle a forma como a mídia é exibida. Dentre as você receberá da plataforma mensagens de notificação em seu e-mail informando quaisquer alter-
opções principais temos o tamanho das imagens (miniatura, médias e grandes) e a habilitação do ações ocorridas.
carrossel de imagens (slideshow).
FINALIZANDO A PRIMEIRA PARTE DO PROJETO

Configurações – Compartilhamento
Quando há a necessidade de algum tipo de compartilhamento de conteúdo nas redes sociais, usa-
Chegamos ao final da primeira parte do nosso projeto. Você aprendeu até agora quais os recur-
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 sos mais utilizados no Wordpress. Aprendeu a escolher e personalizar um tema, criar e gerenciar pá-
estilo do botão e do rótulo. Mas lembre-se: os botões de compartilhamento desta tela não são os ginas, alterar as configurações gerais, gerenciar usuários, ferramentas e demais itens que compõem
mesmos dos widgets do template. 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.
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-
50 51
ATIVIDADES
Atividade 1 – Ajustando menus
Os 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.
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
52 53
Atividade 2 – Ajustando configurações

Para 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 ajustes

Todo 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
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
54
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
55
páginas de serviços, produtos e promoções da sua empresa.Outro ponto importante é que você de relaxo. Defina a frequência com que o conteúdo será atualizado, organize as ideias e faça cum-
poderá coletar opiniões dos seus clientes através dos comentários produzidos por eles, tanto de prir.
forma negativa ou positiva.
Adquira conhecimento – Quanto mais informações atualizadas e consistentes o seu site
Mas porque é tão importante? Simples! As empresas, no seu formato digital inseridas na internet, tiver, mais clientes ele vai atingir. Lembre-se que existem internautas que podem não ser cliente
precisam proporcionar interatividade com os seus clientes. É possível estreitar uma relação com do seu restaurante, mas que acessam o site por causa do conteúdo. E se ele gosta de você, as
eles, criar um vínculo emocional, informar o público sobre seu negócio, saber seus desejos e suas recomendações positivas vão acontecer naturalmente.
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 Veja um exemplo simples de conteúdo no site usado como demonstração nesta apostila.
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 CATEGORIAS, TAGS E POSTS
quem está falando, o seu conteúdo nunca será sustentável o su-
ficiente para atrair o cliente/leitor. 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
Planejamento – Qual o melhor conteúdo que você vai com- Wordpress e acessar o Painel WP Admin no menu relacionado aos posts. Vamos aprender como
partilhar no site/blog? Apenas textos ou vídeos? Imagens diver- utilizá-lo e dar dicas das melhores publicações a serem usadas.
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. 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.
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-
Categorias
delização ou engajamento de seus clientes. O planejamento vai ajudar nesta tarefa.
As 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
Formatos e linguagem - Postar apenas textos pode ser repetitivo. Busque criar posts que
ao conteúdo de apenas uma determinada categoria.
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
Separar em categorias precisa de um certo planejamento para não ficar em excesso, pois conteúdo
textos muito grandes e de difícil leitura.
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
Frequência - Sites e blogs precisam ser atualizados com frequência, para não passar a impressão
não considerado como uma boa estratégia.
56 57
Para criar categoria use o sub-menu Categorias do menu Posts no Painel. Você vai perceber que ninguém. Você precisa enxergar o que realmente é importante, usar ferramentas que acrescentem
é bem fácil de criar. E ainda, é possível ter uma hierarquia, como por exemplo a categoria Receitas, conhecimentos, descobrir o tipo de conteúdo mais compartilhado e buscar os assuntos populares
que dentro dela foram criadas mais duas categorias chamadas Doces e Salgadas. 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
Tags
A 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 endereço da página), link curto, os recursos para adicionar mídia. Outra funcionalidade importante
um post. é 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
Na tela abaixo você encontra um exemplo de tags criadas para o site do restaurante da nossa seja melhor classificado nos motores de busca. Mas isso não é uma regra. O importante é que o
demonstraçã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
Post escolher a opção Rascunho, para evitar que os dados sejam publicados antes de estarem prontos.
Chegou 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ê Na caixa Categorias é possível que você adicione o post a categoria pré-cadastrada. Lembre-se
apenas a tarefa de escolher o melhor conteúdo a ser publicado. que isso facilita a organização do seu conteúdo. Você pode colocar o mesmo post em mais de uma
Criar conteúdo útil e relevante para o site/blog da sua empresa ou do seu cliente não é tarefa fácil para categoria, mas isso não é recomendado para evitar problemas com os motores de busca.
58 59
Logo abaixo, você encontra as caixas de Tags e Imagem destacada. No caso das tags, basta você ATIVIDADES
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 Atividade 1 – Criando categorias, tags e posts
desejada como capa do seu post. Vamos falar mais de imagens na próxima aula. Iniciamos 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
Outra opção para se fazer uma publicação é no menu rápido do Meus Sites. Clicando nele você 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
abre a tela da esquerda com um link para os posts já publicados. Clicando no botão Adicionar ou
no português.
Editar você consegue acessar a página da direita com o editor rápido de conteúdo.
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
ORGANIZAÇÃO E PLANEJAMENTO DE POSTS
Atividade 2 – Planilha de postagens
Para que seu trabalho nas próximas aulas seja mais completo e rápido, que tal criar uma planilha de
Manter as suas postagens organizadas é essencial para facilitar a navegação nas suas páginas.
postagens? Use o modelo simples do tópico anterior ou utilize alguma outra sugerida pelo professor.
Lembre-se que no WordPress essa organização é feita através de categorias. Na prática, tente usar
Lembre-se que na internet existem muitas destas planilhas para download.
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 Data Horário
(vídeo, texto)
ESTA É UMA PLANILHA SIMPLES. EXISTEM MODELOS MAIS COMPLETOS NA INTERNET.
60 61

corrigidos.
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
62
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:
63
Nele você pode inserir mídias já disponíveis dentro da biblioteca, enviar outro arquivo para a ela, Nos ícones acima da imagem, você pode recortar, girar ou desfazer qualquer operação. No painel
criar galeria ou inserir a imagem destacada. Quando enviada ou selecionada na biblioteca, é possível aberto do lado direito da tela, você pode escolher redimensionar ou recortar a partir do original para
fazer algumas alterações básicas nos textos da imagem e no alinhamento. Veja isso quando você um outro tamanho desejado.
clicar na imagem e abrir um painel no lado direito da tela (figuras abaixo).
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!
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. INSERINDO OUTRAS MÍDIAS
No item Configurações de exibição do anexo você controla a forma com que a imagem será Como já dissemos, é possível inserir outros tipos de mídias dentro dos posts ou páginas do
mostrada no site, como por exemplo, o alinhamento na tela (em relação ao texto e margens), o link Wordpress. Entre estas opções estão a inserção de Tweet, vídeos do Youtube e URL para links
e o tamanho da imagem. 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.
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.
64 65
EDITOR DE POSTS AGENDAMENTO DE PUBLICAÇÃO

O editor de posts do Wordpress é bem simples de usar e possui algumas estratégias em relação Na aula passada falamos sobre a organização de posts e uma política
ao uso de imagens e formatação. A caixa em branco onde você digita o seu texto cria links para de planejamento de publicação. Um dos elementos determinantes para o
imagens, adiciona enquetes, formulários e demais informações que deseja exibir no seu site. Você sucesso de um site/blog é mantê-lo sempre atualizado, com uma frequência
pode usar o Editor Visual ou o Editor em HTML. Veja a comparação dos dois: 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ídias
Vamos 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.
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.
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
Atividade 2 – Usando a planilha de postagens

Na 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.
____________________________________________________________________________________________________________
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. _______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
66 67

corrigidos.
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
68
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.
69
TÉCNICAS DE SEO PARA SITES E BLOGS

COMO FUNCIONAM OS MECANISMOS
(MOTORES) DE BUSCA Otimizar significa tornar ótimo ou ideal. Otimizar é
extrair o melhor rendimento possível de uma determinada
Os mecanismos de busca utilizados pelas maiores atividade. Como já dissemos, as mudanças nos algoritmos
empresas do mundo, como Yahoo, Google e Microsoft, dos motores de busca são constantes. Por isso, é
utilizam de poderosos algoritmos, repleto de fatores importante adotar estratégias para otimizar as buscas
que otimizam estas buscas. Eles calculam por meio relacionadas com seu site. Aí usamos as técnicas de SEO.
destes fatores quais sites seriam mais adequados para Quanto mais você souber otimizar um site, melhor será o
serem exibidas quando uma busca é solicitada. Estes resultado. Com as dicas que vamos oferecer abaixo, você
algoritmos são aperfeiçoados constantemente, o que aprenderá a prática mais eficientes para posicionar os
impede uma forma correta para entendê-los. Na maioria das vezes ele é secreto, garantindo uma seus conteúdos e vencer a concorrência. Preste bastante
exclusividade da empresa que o criou. Isso garante uma briga acirrada entre buscadores. atenção.
Dentre alguns dos fatores, temos a utilização de palavras-chaves, sinônimos, relevância e localidade. Título – Use títulos de forma simples, objetivo e bem
Quanto mais sinônimos possíveis para a palavra, mais resultados similares são exibidos na tela. E claro, chamativo, para atrair atenção e ser clicado. Use no máximo 65 caracteres e seja original. Textos
existe um peso naqueles resultados. Os mais acessados e mais relevantes são apresentados com maior chamativos como “Promoções”, “Descontos”, “10 dicas sobre”, ajudam muito na taxa de clique do
visibilidade. E quanto mais próximas de você o site estiver, seu site.
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, Palavras-Chave - Elas são determinantes na construção do seu site. Vamos falar mais nas
claro, com a exibição de anúncios relacionados ao que você próximas páginas.
acabou de pesquisar. Como estes sites de buscas vendem
anúncios, o interessante é que eles apareçam acima do Conteúdo - Para qualquer pesquisa ser bem vista é preciso ter conteúdo atrativo. Escreva bem,
primeiro resultado da sua busca. use termos bem procurados e dê qualidade ao seu trabalho.
A vasta maioria dos serviços de pesquisa são rodados por Formatação de Conteúdo - A maioria dos motores de busca dão uma especial atenção às
empresas privadas usando algoritmos proprietários e bancos palavras em negrito, itálico e sublinhado. Atenção para estes detalhes.
de dados fechados, sendo os mais populares o Google,
Bing e Yahoo! Não existe uma forma garantida para que Imagens - Alguns algoritmos são bons quando as imagens são otimizadas. Uma imagem bem
isso aconteça, pois o Google não vende posicionamento rankeada deverá ter um título e um texto alternativo bem interessantes, principalmente os adicio-
nos seus resultados de buscas, mas existem técnicas nados ao atributo “alt”.
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 Não copie textos - O conteúdo que você coloca dentro do seu site ou blog deverá ser origi-
mais amigável para os robôs que vasculham a internet. Para quem deseja aprofundar mais no nal e único, pois se você copiar e colar de outro site, os motores de buscas contam como conteú-
conhecimento relacionado com os mecanismos de buscas dos sites, a Google criou o site “How do duplicado e acabam atrapalhando o trabalho de pesquisa.
Search Works” com explicações e infográficos animados. Detalhe: a versão mais completa está
em inglês. 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.
70 71
Por isso, é interessante escrever posts como palavras-chaves atrativas no título e também no
SEO NO WORDPRESS 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
Uma das vantagens de se trabalhar com SEO dentro do Wordpress é a sua facilidade e baixo
URLs, no título, no começo do primeiro parágrafo e repetida algumas vezes ao longo do texto. Só
custo de implementação. Ele atualiza o código-fonte para adequar-se aos padrões do Google, como
não vale encher o seu post com estas palavras e deixá-lo de difícil leitura.
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
Num texto bacana, as palavras-chaves mais relevantes devem ser destacadas com negrito e itálico,
robusta, seu conteúdo pode estar visivelmente atrativo aos olhos dos motores de busca. SEO baseia-
apoiadas com outras palavras como tags do post. Tudo isso junto auxilia os mecanismos de busca.
se na qualidade do conteúdo publicado e em adequar o seu site aos critérios dos mecanismos de
Veja o exemplo:
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:
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
72 73
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 buscas no Google no nosso país. Existe uma ferramenta muito interessante chamada Google
de SEO, entre outros. Além do Yoast, podemos citar também o All in One SEO Pack e o Platinum
Adwords Keyword Tool, que permite que você descubra quais são as palavras mais buscadas por
SEO. Além do Yoast, podemos citar também o All in One SEO Pack e o Platinum SEO.
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 termos
Utilizando 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 SEO

Agora 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.
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
74 75
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
76
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.
77
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ê Os dados se completam quando você enxerga através das estatísticas quais os países que estão
acessa o menu Meus sites – Estatísticas. Assim você pode ver rapidamente as visitas ao site, as acessando seu site, quais os post e páginas mais acessados, referenciadores, termos de busca e cliques.
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.
É 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
Ainda no Site States é possível ler algumas Informações sobre o resumo dos post mais recentes e o dia para o cliente anunciante dizendo quando cliques a empresa dele teve.
e horário com maior número de visitantes.
78 79
Mídias sociais – use as mais diversas mídias sociais para divulgar seus posts. Lembre-se que todo
APP WORDPRESS bom site vem acompanhado de uma página ou perfil em uma mídia social ou mais. Apenas fique
O WordPress também está presente no mundo dos apps atento às regras dos grupos, pois alguns não permitem postagens de materiais próprios com intuito
para dispositivos móveis. Com ele, você pode criar posts de divulgação.
diretamente do seu smartphone ou tablet, equipados com Comentários – Fazer comentários em outros blogs pode ser uma ótima forma de divulgar o
sistemas Android, iOS ou Windows Phone. Ele é gratuito e em seu trabalho. Mas não faça como propaganda, mas algo que acrescente valor ao conteúdo daquele
português, com uma interface bem limpa e fácil de ser utilizada. outro site/blog.
Logo na primeira tela, há as opções de criar um novo site/blog Parceiros - Peça aos seus amigos e/ou parceiros para ajudarem você a divulgar seu conteúdo
ou adicionar outro que já esteja hospedado na plataforma. pela internet.
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.
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á
MELHORES FORMAS DE DIVULGAÇÃO DO SEU SITE desenvolvendo um site.
Ainda não falamos de publicação do site, mas já podemos ir entendendo quais as melhores formas E para interligar com o seu site no Wordpress, você precisa
de divulgar o site que você está desenvolvendo. Dentre as formas mais básicas para que o público utilizar um plug-in (dentre muitos) chamado Google
conheça seu site, estão: Analytics by Yoast. Ele é bem simples de ser instalado e
E-mail - Campanha de emails para promover o seu novo post é bem interessante. Use com utilizado. Mas lembrando que na versão online a instalação
moderação e sem gerar spam. dos plug-ins só acontece se você utilizar a versão paga.
80 81
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 WordPress

Na 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
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
82
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.
83
Outra ação, logo após a escolha do template, é abrir a edição para iniciar a confecção do site. Basta
CRIANDO UMA CONTA 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.
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
Perceba que as orientações dos painéis que serão utilizados para criação do site são bem intuitivos e
Com a conta criada, começam as ações dentro da plataforma. E a primeira delas é usar opção por isso não há tanta complicaçã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.
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
A nossa opção, que também servirá para seu próximo projeto, é criar um site baseado em loja virtual.
sites atuais. Vale a pena testar e ver o resultado. Observe que no topo da
Por isso, vamos selecionar esta categoria no lado esquerdo da tela. Optamos por criar uma loja virtual
imagem, ao lado da palavra Wix, aparece qual a página que está sendo
para vender produtos para casa.
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.
84 85
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
E depois de inserida no seu site, a imagem pode ser alterada conforme algumas especificações do
fazer alterações de tamanho de fonte, tipo, acrescentar formatação,
WIX, considerando que o seu site ficará mais elegante com ela. Dentre as opções, você poderá:
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. • Redimensionar a imagem;
• Adicionar link;
• Adicionar descrição;
• Recortar;
• Aplicar molduras e efeitos de animação;
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
Antes de fechar o editor da página, nunca se esqueça de salvar o seu trabalho. Clique no menu Salvar
e alterá-la. Se a opção for inserir uma nova, basta clicar no botão +
no topo da página e ele abrirá uma caixa solicitando um nome para seu site. Como estamos usando
no painel da esquerda e selecionar o menu que se refere a imagem.
a versão gratuita, ele sempre vai juntar o nome que você criou a URL padrão do Wix.
Você poderá fazer upload de qualquer imagem armazenada no seu
computador (cuidado com o direito autoral), utilizar o acervo gratuito
Ex: http://suaconta.wix.com/nomedoseusite
do Wix, um clip art gratuito, comprar imagens ou usar diretamente das
suas redes sociais.
86 87
ATIVIDADES
Atividade 1 – Explorando o Wix
Vamos 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 Wix

Crie 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
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
88
Aula 12 - WIX - Pt. 2
• Projeto Loja Virtual • Criando formulários • Galerias

• Outras mídias • Interligando com as redes sociais
• Blogs
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
89
GALERIAS
e roubar informações. Algumas empresas oferecem serviços de segurança para e-commerce, dentre
elas a Certisign, TrustSign e a Serasa Experian. É 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
Marketing – Divulgar é preciso. Você precisa dedicar uma parte do seu tempo e dinheiro para captação clique em (+) Adicionar e depois em Galeria. Escolha a galeria da lista e pronto. Depois é só configurar
de novos clientes para sua loja virtual. Crie bons conteúdos, use as redes sociais, Google Adwords, as imagens que serão usadas através do ícone de configurações. Algumas galerias tem uma opção
E-mail Marketing, entre outros. 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.
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 E assim como os formulários, as galerias também possuem apps personalizados dentro do Wix App
comum do que se imagina. Use os Correios ou transportadoras para o processo de entrega. Market.
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
OUTRAS MÍDIAS
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
Não só de imagens vive o seu site. Que tal aproveitar
do seu professor, pois vamos adicionar um formulário de contato em seu site de duas formas diferentes:
as potencialidades do Wix e inserir outros tipos de mídias,
tais como vídeos e áudio? Ambos são facilmente inseridos
1ª - Clique no ícone (+) Adicionar do lado esquerdo do editor e selecione
em qualquer página através do ícone (+) Adicionar no lado
a opção contato. Ele vai adicionar um modelo simples de formulário na
esquerdo do editor. No caso do vídeo, por exemplo, você pode
página que você estiver. Com ele inserido, você poderá realizar alterações
escolher a exibição de vídeos vindos direto do Youtube ou
básicas dentro dele, como por exemplo a alteração do e-mail de destino,
do Vimeo, com as suas devidas configurações. Clicando no ícone de configurações, você poderá
layout, design, os campos do formulário e as mensagens que aparecerão
procurar o vídeo desejado, habilitar o AutoPlay para que o vídeo seja executado automaticamente,
quando o usuário clicar no botão enviar.
entre outros.
2ª - Clique no ícone referente ao Wix App Market no lado esquerdo do

No caso de áudio (música), você adiciona players básicos do próprio Wix, assim como player de
editor, selecione a guia formulários e escolha o app de sua escolha. Para
serviços de streaming como o Spotify e o SoundCloud. Basta arrastá-los para dentro da página e abrir
fins educacionais vamos sugerir o uso do 123 Form Builder. Vale comentar
a guia configurações para adicionar as músicas desejadas.
que para usá-lo você precisa fazer um cadastro simples no site do app.
90 91
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 Além disso, temos vários apps de blogs no Wix App Market. Você poderá adicionar o Tumblr Feed e o
depois em Redes Sociais. A opção de barra de redes sociais aparece logo em seguida. Na mesma tela Blogger Feed, para facilitar a comunicação entre plataformas diferentes.
é 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.
ATIVIDADES
Atividade 1 – Estamos em construção
Você 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.
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
BLOGS
Atividade 2 – Inserindo um blog
Outra função bem bacana do Wix é a possibilidade de inserir Todo bom site vem acompanhado de bom conteúdo, que geralmente é apresentado
blogs dentro do próprio site. Repleto de templates que oferecem 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
blog, o Wix tem um menu exclusivo para adicionar diretamente do
negócio da loja virtual que está criando.
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.
____________________________________________________________________________________________________________
92 93
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
94
Aula 13 - WIX - Loja Virtual - Pt. 1
• Recolhendo dados • Gerenciando a loja virtual

• Criando páginas • Controle de pagamentos
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.
95
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 loja

Dentro 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 Vale uma observação: veja que o preço definido para a cadeira foi de R$ 85,00. Quando você adiciona
cada um deles, você pode fazer os ajustes que forem necessários. Acompanhe a imagem abaixo e o atributo opcional do desconto, o preço é reajustado com o desconto para R$ 76,50. Isso é bem
vamos tentar resumir algumas ações que você deverá realizar. interessante.
Adicionar coleções
Na 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.
Adicionar produtos
Da 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 Cupons
para apresentar o seu produto, tais como o nome, preço, descrição, imagem (até 10 para cada produto) Na aba Cupons você pode criar cupons de desconto para seus clientes e adicioná-los em sua loja
e atributos opcionais, tais como desconto, fita (palavra chave que irá aparecer sobre a imagem), peso, virtual. E quem não gosta de um cupom de descontos? Para adicionar clique no botão + Adicionar
entre outros. Veja as imagens: 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.
96 97
Frete e imposto CRIANDO PÁGINAS

Na 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á
É possível adicionar uma página da loja através do painel
cobrado. 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.
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. 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,
Simples, não acha?
o estilo e cores da matriz (galeria) para facilitar a visualização dos seus produtos.
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. 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.
98 99
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 virtual
O 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
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
100
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
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.
101
INSERINDO MAPAS Além do código, é possível incorporar um site qualquer direto na janela. Use apenas a opção Endereço
do site.
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 INSERINDO DOCUMENTOS
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 Este tópico não se trata exclusivamente da Loja Virtual, mas vale a pena considerar. Uma
encontra-se no lado esquerdo do editor, no botão + Adicionar – aba Contatos. Arraste a imagem do funcionalidade do Wix permite que os seus visitantes façam download de documentos em seu site,
mapa para dentro do site e pronto. Agora é só usar o botão de configurar para colocar o endereço com apenas um clique. Isso pode ser útil, por exemplo, se você quiser que o visitante baixe uma
correto, uma breve descrição do local e as opções do mapa, como o controle de zoom, navegação, planilha de preços de um determinado grupo de mercadoria vendida na loja.
Street View, entre outros.
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.
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

Importante: O tamanho máximo de arquivos para upload é de 15MB. É possível fazer upload de
O editor do Wix permite que você adicione os seus próprios códigos documentos .doc, .docx, .xls, .xlsx, .ppt, .pptx, .odt, .odp e .pdf em seu site.
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 WIX APP MARKET
use o botão de configurar para adicionar o código.
O Wix App Market ou Mercado de Aplicativos do Wix é uma funcionalidade da plataforma que está
Aqui vale uma consideração: segundo o Wix, o código HTML é um disponível a partir do editor do Wix. Segundo o site, são mais de 34.000 apps criados pela comunidade
código externo e não foi testado pela plataforma e, por isso, não há externa de desenvolvedores e pela própria equipe do Wix. Grande parte deste apps são gratuitos ou
suporte da equipe deles. Eles são bem claros quando dizem que o Wix não será capaz de ajudá-lo possuem uma versão gratuita. Outros possuem a opção de se fazer um upgrade para uma versão
em nenhuma questão relacionada a funcionalidade do código. Isso quer dizer: use por conta própria. Premium, com recursos extras.
102 103
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
SEO DAS PÁGINAS
apps disponíveis e caberá a você este passeio para descobri-los.
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
Só para exemplificar o seu estudo, vamos utilizar um app simples
Google.
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.
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.
104 105
ATIVIDADES
Atividade 1 – Finalizando a loja virtual
Estamos 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
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
_______________________________________________________________________________________________________________
____________________________________________________________________________________________________________
106
Aula 15 - Publicação e divulgação do site
• Histórico do site • Planos • Domínio e e-mail

• Estratégias de divulgação
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.
107
Em ambas as plataformas que estudamos, os planos permitem usar domínio adquirido por qualquer DOMÍNIO E E-MAIL
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 Tanto o Wix quanto o Wordpress aceitam hospedagem dentro de seus servidores para guardar
depender do tipo de plano que você escolher. 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
Outra vantagem destes planos é que eles incluem suporte. As vezes numa situação mais crítica, o pesquisa de disponibilidade. Ou também, use um domínio que você já possui. As duas imagens abaixo
suporte ajuda você a resolver o problema e não deixar o site fora do ar. representam as verificações de domínio do Wix e do Wordpress, respectivamente.
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.
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: contato@lojascasanova.com.br
108 109
ESTRATÉGIAS DE DIVULGAÇÃO ATIVIDADE

Atividade 1 – estratégias de divulgação
Crie 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.
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
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. ANOTAÇÕES
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. ____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
110 111
ANOTAÇÕES
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
____________________________________________________________________________________________________________
112

Desenvolvimento de Sites Baixa

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Desenvolvimento de Sites Baixa

Enviado por

Direitos autorais:

Formatos disponíveis

Impressão • Acabamento

Editora Mona Ltda - ME

Av. Marechal Deodoro, 314 - Centro - Curitiba/PR

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

Um ótimo trabalho a todos.

Aula 1 - Projetando um Site

POR QUE PROJETAR?

A partir de hoje vamos entrar no mundo do desenvolvimento

FAZENDO O BRAINSTORMING DESENHANDO UM LAYOUT

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

TIPOS DE SITES Blogs

Site Institucional - Usado pela maioria das empresas, composto

PLANEJANDO RECURSOS E TEMPO Plataforma Definição da plataforma de uso 12/11/20... 12/11/20...

Web design Responsável pelo design do site 02

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

Estagiário Assistente de programação 01

Atividade 2 – Desenhando o site

Atividade 1 – Estudos de caso Atividade 3 – Planejamentos

Case 2 – ONG de proteção aos animais

Aula 2 - Ferramentas e Programação

Começamos pelos softwares de desenvolvimento

FERRAMENTAS CMS E HTML5

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

PRINCIPAIS PLATAFORMAS PARA O banco de dados mais comum das ferramentas

Atividade 2 – Instalando o XAMPP

Aula 3 - Wordpress - Primeiro contato

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

Seguindo as estratégias iniciais, temos:

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

O PRIMEIRO PROJETO ANOTAÇÕES

Aula 4 - Wordpress - Servidor local

• Baixando o pacote do Wordpress • Abrindo o Xampp

BAIXANDO O PACOTE DO WORDPRESS

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

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

INTERLIGANDO COM WORDPRESS

CRIANDO UM BANCO DE DADOS

Aula 5 - Wordpress - Painel

• Por dentro do painel • Aparência • Páginas

POR DENTRO DO PAINEL

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

Título do site, tagline e logotipo

Cores e fundos personalizados

Administrador – pode alterar tudo, como e quando quiser.

GERENCIANDO USUÁRIOS FERRAMENTAS

Conversor de Categorias e Tags – O link o levará à página de importação (abaixo), onde

Aula 6 - Wordpress - Configurações

• Ajustando menus • Ajustando as configurações

Adicione como menu:

• Páginas criadas anteriormente;

Páginas do blog mostram, no máximo

Para cada post em um feed, mostra

Categoria padrão do post

Formato padrão do post

FINALIZANDO A PRIMEIRA PARTE DO PROJETO

Atividade 2 – Ajustando configurações

Atividade 3 – Erros e ajustes

Erros Ações a serem tomadas

Aula 7 - Wordpress - Publicando Pt. 1

• O que é o blog? • A importância dos blogs

A IMPORTÂNCIA DOS BLOGS

Entender bem o público-alvo - Quem vai ler os seus

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