trabalho de conclusÃo de curso fig - unimesp · trabalho de conclusÃo de curso fig - unimesp...
TRANSCRIPT
TRABALHO DE CONCLUSÃO DE
CURSO
FIG - UNIMESP
Aplicações de ferramentas web visando o design, à
usabilidade e a visibilidade para com os usuários no site da
empresa Grupo Up10.
Ailton Pereira Sousa / 00086231
Orientador. Prof. Erwin Alexander Uhlmann
GUARULHOS
2013
AILTON PEREIRA SOUSA
Aplicações de ferramentas web visando o design, à
usabilidade e a visibilidade para com os usuários no site da
empresa Grupo Up10.
TCC apresentado ao Curso de Sistemas de
Informação da FIG - Unimesp, como parte
dos requisitos para a obtenção do título de
bacharel em Sistemas de Informação, sob a
coordenação do Prof. Erwin Alexander
Uhlmann e sua orientação.
GUARULHOS
2013
AGRADECIMENTOS
Primeiramente a Deus, por estar comigo em
todos os momentos da minha vida.
Aos meus familiares, em especial meu pai,
minha mãe e meus irmãos, que mesmo longe
fisicamente foram cruciais para a realização desse
objetivo.
Aos amigos, que sempre incentivaram meus
sonhos e estiveram sempre ao meu lado.
Ao Prof.° Prof. Erwin Alexander Uhlmann,
que me acompanhou, transmitindo-me tranquilidade
e conhecimento.
A todos os professores e colegas que
fizeram parte nessa caminhada, e que vão ficar para
sempre em minha vida.
RESUMO
Entender, administrar e gerar crescimento dentro de uma organização
requer um estudo aprofundado das informações e processos que ocorrem em
todos os departamentos da empresa, uma análise dos pontos fracos e fortes,
ter uma visão dos concorrentes e buscar inovações para atender seus clientes
e destacar-se no mercado.
Esse projeto tem como objetivo aprimorar as informações,
desenvolvendo métodos e técnicas que visam melhorias e reconhecimento no
mundo digital, organizando e melhorando o design das paginas web e gerando
usabilidade, para o cliente que busca nossos produtos e para empresa que
busca novos clientes.
Usar a TI (Tecnologia da Informação) para reduzir custos, organizar os
processos, aumentar o Market Share, melhorar o seu atendimento e gerar
lucros. Serão usadas algumas ferramentas que existem no mercado, mas que
poucas empresas conhecem e usam, são caminhos que podem tornar a
empresa destaque dentro do mundo web.
O foco é aplicar essas ferramentas e desenvolver métodos que irão
acrescentar nos processos de crescimento e visibilidade dentro da rede
(Internet) e consequentemente da organização.
Palavras chaves: Tecnologia da Informação, usabilidade, mundo
digital, internet, ferramentas web, visibilidade.
ABSTRACT
Understanding, managing and creating growth within an organization
requires a thorough study of the information and processes that occur in all
departments of the company, an analysis of strengths and weaknesses, have a
vision of competitors and seek innovations to serve their customers and stand
in the market.
This project aims to improve the information, and developing methods
and techniques to improve recognition in the digital world, organizing and
improving the design of web pages and generating usability for the customer to
search our products and company seeking new customers.
Use IT (Information Technology) to reduce costs, organize processes,
increase market share, improve your service and generate profits. Will use
some tools available on the market, but few companies know and use, are ways
that can make the company featured in the web world.
The focus is to apply these tools and develop methods that will add in
the processes of growth and visibility within the network (Internet) and
consequently the organization.
Keywords: Information Technology, usability, digital world, internet,
web tools, visibility.
i
Sumário
1 Introdução ................................................................................................... 1
2 Empresa ...................................................................................................... 3
3 Fundamentação Teórica ............................................................................ 7
3.1 Conceito, Padrões e Normas Web. ....................................................................................... 7
3.2 World Wide Web....................................................................................................................... 9
3.3 O Endereço na rede............................................................................................................... 10
3.4 Linguagem de Programação ................................................................................................ 12
3.5 Código-fonte ............................................................................................................................ 12
3.6 Asp.net ..................................................................................................................................... 13
3.7 Adobe Dreamweaver ............................................................................................................. 14
3.8 Adobe Photoshop ................................................................................................................... 15
3.9 Corel Draw .............................................................................................................................. 16
3.10 Usabilidade Web .................................................................................................................... 16
3.11 Otimização Web ..................................................................................................................... 18
3.12 Motores de Busca .................................................................................................................. 19
3.13 Google o maior buscador atualmente ................................................................................. 20
3.14 Search Engine Marketing (SEM) ......................................................................................... 21
3.15 Search Engine Optimization (SEO) ..................................................................................... 23
3.15.1 Escolhendo as palavras-chaves.................................................................................. 23
3.15.2 Links ................................................................................................................................ 24
3.16 Otimização On-page .............................................................................................................. 24
3.16.1 Conteúdos e Estruturas das páginas ......................................................................... 27
3.17 Saturação (Search Engine Saturation - SES) .................................................................... 27
3.17.1 Servidor do Site ............................................................................................................. 28
3.17.2 Sitemaps ......................................................................................................................... 28
3.18 Otimização Off-Page ............................................................................................................. 28
3.18.1 SMM (Social Media Marketing) e SMO (Social Media Optimization) .................... 29
3.18.2 SMM (Social Media Marketing). .................................................................................. 29
3.18.3 Mídias Sociais ................................................................................................................ 29
3.19 Outras formas de Otimização Off-Page .............................................................................. 31
3.20 Landing page .......................................................................................................................... 32
3.21 Conversão ............................................................................................................................... 32
3.22 Monitoramento, Controle e Ajustes. .................................................................................... 32
3.23 Internet no Ambiente Empresarial ....................................................................................... 33
3.24 Conceitos do Projeto ............................................................................................................. 33
3.25 Planejamento .......................................................................................................................... 34
3.26 UML (Unified Modeling Language) ...................................................................................... 36
3.27 Matriz SWOT .......................................................................................................................... 38
ii
3.28 Escopo de projeto .................................................................................................................. 39
4 Desenvolvimento ...................................................................................... 40
4.1 Design, Usabilidade e Visibilidade. ..................................................................................... 41
4.1.1 Fundo do Site ..................................................................................................................... 41
4.1.2 Cabeçalho ........................................................................................................................... 42
4.1.3 Conteúdo do site ................................................................................................................ 44
4.1.4 Rodapé ................................................................................................................................ 51
4.2 Processos de visibilidade web ............................................................................................. 52
4.2.1 Blog interno (Subdomínio) ................................................................................................ 60
4.3 Otimização Offpage ............................................................................................................... 62
4.3.1 Social media Marketing (SMM) ........................................................................................ 65
4.3.2 SEO nos sites de anúncios .............................................................................................. 75
4.3.3 Parcerias com portais de Brindes.................................................................................... 80
4.3.4 Ferramentas Complementares ........................................................................................ 82
4.4 Resultados .............................................................................................................................. 85
5 Conclusão ................................................................................................. 98
6 Glossário ................................................................................................... 99
7 Referências bibliográficas ..................................................................... 101
iii
Abreviaturas e Siglas
ASP - Active Server Pages
Arpa - Advanced Research Projects Agency
CSS - Cascading Style Sheets
ER - Entidade-Relacionamento
EAP - Estrutura Analítica do Projeto
FTP - File Trasnsfer Protocol
GIF - Graphics Interchange Format
HTML - HyperText Markup Language
HTPP - Hypertext Transfer Protocol
IP - Internet Protocol
LP - Links Patrocinados
PDF - Portable Document Format
PMBOK - Project Management Body of Knowledge
SEO - Search Engine Optimization
SEM - Search engine marketing
SERP - Search Engine Result Page
SGBD - Sistemas de gerência de banco de dados
SES - Search Engine Saturation
SMM - Social Media Marketing
SMO - Social Media Optimization
Sql - Structured Query Language
TCP - Transmission Control Protocol
TI - Tecnologia da Informação
OMG - Object Management Group
UML - Unified Modeling Language
URL - Uniform Resource Locator
WWW - World Wide Web
XML - eXtensible Markup Language
XHTML - eXtensible Hypertext Markup Language
iv
Lista de Ilustrações
Figura 1 – Organograma da empresa Grupo Up10.
Figura 2 – Estrutura básica de um website.
Figura 3 – Comunicação cliente e servidor.
Figura 4 – Site registro.br
Figura 5 – Exemplo de um domínio registrado.
Figura 6 – Exemplo de um Subdomínio.
Figura 7 – Código-fonte do cabeçalho do site Grupo Up10
Figura 8 – Adobe Dreamweaver – Área de trabalho.
Figura 9 – Adobe Photoshop – Área de trabalho.
Figura 10 – Corel Draw – Área de trabalho.
Figura 11 – Navegação do usuário em um website.
Figura 12 – Pesquisa simples nos buscador Gooogle.
Figura 13 – Representação de PageRank.
Figura 14 – Estrutura da matriz SWOT.
Figura 15 - Exemplo de EAP.
Figura 16 - Componentes do diagrama de Caso de Uso.
Figura 17 – Matriz SWOT.
Figura 18 – Escopo do Projeto.
Figura 19 – EAP do projeto.
Figura 20 – CSS antigo.
Figura 21 – CSS Alterado.
Figura 22 – Cabeçalho antigo.
Figura 23 – Cabeçalho alterado.
Figura 24 – Código-fonte cabeçalho antigo.
Figura 25 – Código-fonte cabeçalho alterado.
Figura 26 – Palavras-chaves e Títulos nas imagens.
Figura 27 – Conteúdo do site antigo.
Figura 28 – Estrutura do newsletter inserida no site.
Figura 29 – Perfil da empresa no Google Places.
Figura 30 – Perfil do Calaméo – Ferramenta dos catálogos digitais.
Figura 31 – Palavras-chaves no Calaméo.
Figura 32 – Perfil do SlideShare – Ferramenta dos catálogos digitais.
Figura 33 – Palavras-chaves no SlideShare.
Figura 34 – Perfil do Issuu – Ferramenta dos catálogos digitais.
v
Figura 35 – Conteúdo do site alterado.
Figura 36 – Rodapé do site antigo.
Figura 37 – Tag Cloud - criação de nuvem de tags.
Figura 38 – Rodapé do site alterado.
Figura 39 – Diagrama UML antes do projeto.
Figura 40 – Validador W3C.
Figura 41 - Tela do Google Keyword Tool.
Figura 42 – Painel do Servidor Locaweb.
Figura 43 – Painel do FileZilla – gerenciador de FTP.
Figura 44 – Painel do XML-Sitemap.
Figura 45 – Painel do Google Analytics.
Figura 46 – Painel do Bing Webmaster.
Figura 47 – Painel do Google Webmaster – Com conteúdo do sitemap.xml.
Figura 48 – Painel do Google Webmaster
Figura 49 – Painel do Bing Webmaster.
Figura 50 – Painel do Blog interno Grupo Up10.
Figura 51 – Painel de campanhas no E-goí.
Figura 52 – Conteúdo do Blog Grupo Up10 no Blogger.
Figura 53 – Blog Grupo Up10 nos resultados de busca.
Figura 54 – Blog Ability Brindes no Blogger.
Figura 55 – Blog Grupo Up10 no Tumblr.
Figura 56 – Blog Grupo Up10 no Wordpress.
Figura 57 – Perfil Grupo Up10 no Facebook.
Figura 58 – Post no Perfil Grupo Up10 no Facebook.
Figura 59 – Perfil Grupo Up10 no Google+.
Figura 60 – Perfil Grupo Up10 no Youtube.
Figura 61 – Palavras-chaves no Youtube.
Figura 62 – Picasa – Criação de vídeos.
Figura 63 – Perfil Grupo Up10 no Twitter.
Figura 64 – Perfil Ability Brindes no Twitter.
Figura 65 – Perfil Grupo Up10 no Instagram.
Figura 66 – Perfil Grupo Up10 no Flickr.
Figura 67 – Palavras-chaves no Flickr.
Figura 68 – Perfil Grupo Up10 no Formspring.
Figura 69 – Perfil Grupo Up10 no Linkedin.
Figura 70 – Palavras-chaves no Linkedin.
vi
Figura 71 – Botões do Facebook na página produto do site Grupo Up10.
Figura 72 – Anúncio do Grupo Up10 – Brasil via web.
Figura 73 – Anúncio do Grupo Up10 – Lista Amarela.
Figura 74 – Anúncio do Grupo Up10 – VivAnuncios.
Figura 75 – Anúncio do Grupo Up10 – Classificado Brasil.
Figura 76 – Anúncio do Grupo Up10 – Permulta Livre.
Figura 77 – Anúncio do Grupo Up10 – Classiaqui.
Figura 78 – Anúncio do Grupo Up10 – Empresa do Brasil.
Figura 79 – Anúncio do Grupo Up10 – Guia de Serviços.
Figura 80 – Anúncio do Grupo Up10 – Ilocal.
Figura 81 – Anúncio do Grupo Up10 – Estadão.
Figura 82 – Anúncio do Grupo Up10 – Portal Bríndice.
Figura 83 – Anúncio do Grupo Up10 – Portal eBrindes.
Figura 84 – Anúncio do Grupo Up10 – Portal Guia Personalizado.
Figura 85 – Anúncio do Grupo Up10 – Portal Brindes.com.
Figura 86 – Painel da ferramenta Attracta SEO.
Figura 87 – Painel da ferramenta Goo.gl.
Figura 88 – Código QR Code do site Grupo Up10.
Figura 89 – Diagrama UML de Caso de Uso – Após as melhorias.
Figura 90 – Resultados no Google Webmaster.
Figura 91 – Resultados no Google Webmaster em tabela
Figura 92 – Resultados no Google Webmaster relevância de Palavras-chaves.
Figura 93 – Resultados no Google Webmaster tráfego de domínio.
Figura 94 – Resultados no Google dos links direcionados ao Grupo Up10.
Figura 95 – Resultados no Google referente ao nome da empresa.
Figura 96 – Resultados no Bing referente ao nome da empresa.
Figura 97 – Resultados no Yahoo referente ao nome da empresa.
Figura 98 – Resultados de visitas referentes a 2011.
Figura 99 – Resultados de visitas referentes a 2012
Figura 100 – Resultados de visitas referentes a 2013.
vii
Figura 101 – Tabela de visitas ao site.
Figura 102 – Gráfico de visitas ao site.
Figura 103 – Gráfico de pedidos, vendas e faturamento em anos diferentes.
Figura 104 – Ficha de custo do projeto Grupo Up10.
1
1 Introdução
No mercado em que vivemos, mudanças são constantes. Neste sentido
as organizações necessitam cada vez mais de informações rápidas e precisas.
O mundo vive na era da informação, a qual pode ser facilitada pela utilização
de recursos oferecidos pela tecnologia e sistemas de informação.
Desenvolver ferramentas e aplicar melhorias em uma estrutura já
desenvolvida dentro do ambiente web (site da empresa) é o principal objetivo
desse projeto, mudanças e inovações são maneiras de obter sucesso, gerar
lucro e conquistar clientes.
A primeira etapa do projeto é organizar os conteúdos, as imagens dos
produtos, padronizando tamanhos, fontes e cores, isso seguindo sempre as
cores padrões da empresa, deixando-as de forma organizada e acompanhado
as tendências do mundo moderno digital. Criamos uma conexão entre o site e
as principais redes de relacionamentos, interagindo e mantendo contatos com
os clientes. Muito importante para a empresa acompanhar sua marca nas
redes e mídias sociais.
Nesse mundo de enormes quantidades de informações e dados o
termo usabilidade tornou referência no cenário web, e consequentemente um
passo fundamental nesses processos de melhorias que implantamos no site,
usando algumas ferramentas como uma linguagem de programação, criando
um formulário de contato e sugestões, nele o cliente deixa seus dados em
nosso sistema e seu perfil armazenado para futuros contatos.
As informações precisam ser claras e objetivas, muitas vezes simples
mais usual, a finalidade é sempre entender o que o cliente esta procurando e
disponibilizar isso de maneira rápida e fácil.
A busca por informações, lugares, empresas, produtos são principais
objetivos de quem acessa a internet, e a empresa precisa elaborar técnicas
que possibilite as pessoas encontra seu produto e, ou serviços.
Para obter bons resultados nos sites de buscas como Google, por
exemplo, o site passou por algumas etapas de melhorias e correções.
Primeiramente analisar o servidor, ou seja, lugar no qual o site está hospedado
2
(instalado), e levantando as informações de acesso e resposta referente aquele
endereço web (site). Fazer a correção do código fonte de todas as paginas,
como titulo, descrições, parágrafos e validar no órgão de padronização World
Wide Web Consortium (W3C), com isso a estrutura torna-se mais limpa
favorecendo o contato mais rápido com os buscadores.
As técnicas de Search Engine Optimization (SEO) foram implantadas
das duas formas dentro (on-page) e fora do site (Off-Page), no código fonte
criamos as palavras chaves e fora do site elaboramos e criamos conteúdos
sempre relacionado e direcionado com links para o site principal, nesses
conteúdos foram estabelecida uma serie de marcadores relacionadas com a
empresa, produtos e todo o seu nicho de mercado.
A partir do momento que essas etapas foram concluídas chegamos a
um ponto importante também nesse projeto, como manter todos esses e os
novos clientes fieis no site e comprando? Junto com o departamento de
marketing criamos um contato direto com o cliente através de campanhas por
e-mails e em datas comemorativa e relacionadas a cada tipo de contato e ou
empresa, por exemplo, Dias dos Pais, Páscoa, Natal, Ano Novo.
Atender os seus clientes com padrões das melhores empresas do
cenário mundial, usar os sistemas de informação para melhor e adequar o site
aos perfis dos usuários, disponibilizando acessos objetivos com informações
claras. Para a empresa menores gastos mais lucratividade, sem contar que
com todas essas melhorias a organização estará atualizada e mais preparada
para encarar a concorrência.
A Tecnologia da Informação nos proporcionou administrar os
processos nesse projeto e elaborar forma de gerar informações para tomada
de decisão, com o foco estratégico, inovador e objetivo.
3
2 Empresa
A empresa Ability Brindes cadastrada no Cadastro Nacional de
Pessoa Jurídica (CNPJ) 10614777/0001-08 atua no setor de produtos
promocionais, buscando a satisfação de seus clientes, através de alternativas
inovadoras para seu atendimento. Mantendo em seu portfólio uma gama
variada de itens diferenciados, através do desenvolvimento constante de
parcerias com fabricantes dos mais diversos produtos com forte potencial
promocional. Seu nome fantasia (Grupo Up10) representa parceria com as
fabricas pelas quais são responsáveis pelo a produção dos seus produtos, ou
seja, o Grupo Up10 atende seus clientes no seu escritório, recebe o pedido
solicita para a fábrica especifica que produzirá o produto, essas parcerias
fazem com que os produtos sejam produzidos de maneira rápida e entre aos
seus clientes com transparência, criatividade, ética nos negócios e
responsabilidade socioambiental.
A empresa surgiu em 2005, idealizada por um empreendedor, o
diretor e empresário Alexandre Carbonero, tinha acabado de ser mandado
embora do seu antigo emprego onde atuava como vendedor de produtos
promocionais e mantinha um ótimo relacionamento com todos os clientes
conquistados em anos de trabalho. Isso aconteceu em meio a uma crise
internacional que tinha abalado à economia mundial, muitas empresas
simplesmente desapareceram e muitas pessoas ficaram sem trabalho e sem
oportunidades no mercado, foi quando a solução era colocar suas ideias em
praticas e arriscar mesmo sabendo que as chances eram mínimas de darem
certo. Com uma visão empreendedora e acreditando em seus sonhos começou
a usar seus conhecimentos e seus bons contatos de clientes que havia
adquirido na antiga empresa.
No começo, trabalhando em casa e apenas um computador simples,
um telefone e muita vontade de vencer, procurava manter seus contatos
sempre atualizados e oferecia seus produtos como fazia em seu antigo
emprego.
4
Usando suas habilidades de vender pegou seu primeiro pedido, 50 mil
canetas promocionais para uma grande empresa e acreditando muito que iria
da tudo certo fez sua primeira parceria com uma fábrica (produção de canetas)
na qual fez seu pedido e abriram as portas para continuar acreditando nas suas
ideias fortalecidas pelo sucesso do seu primeiro desafio e a satisfação do
cliente final. E depois de um ano trabalho em casa e realizado muitas vendas e
varias parceiras com fabricas que fazer todos os tipos de produtos
promocionais (Nécessaire, Mochila, Bolsas, Copos plásticos ou acrílicos, Pen
Drive, Canecas de porcelana ou cerâmica ou vidro, Squeeze plástico, Camisas
polo, Calendários de mesa, Agendas, Sacolas de TNT, Camisetas, Kit
churrasco, Bonés, Mousepad, Chaveiros emborrachado, Ecobags, Toalhas,
Bolsas térmicas, Blocos, Chaveiros plásticos ou acrílicos, Canetas metálicas,
Canetas plásticas).
A empresa possui um site (www.grupoup10.com.br) feito há mais de
dois anos por uma empresa de Web, a manutenção era cara e a empresa
(Grupo Up10) não tinha um departamento web interno. O site tinha poucas
visitas e as vendas eram centralizadas somente por telefone e e-mails o
espaço na web não era aproveitado como deveria e perdia se com isso muitos
orçamentos e fechamento de pedidos.
No começo de 2013 a empresa focou no ambiente web (internet) como
meio de crescimento, e de aumentar seu faturamento sem muito gasto, apenas
aproveitando as ferramentas que incrementasse seus processos. Ferramentas
de melhorias foram aplicadas e a empresa aumentou sua fatia no mercado e
ganhou nossos clientes.
O Grupo Up10 encara seus concorrentes de brindes promocionais (Só
Marcas - www.somarcas.com.br, Ashtar - www.ashtarbrindes.com.br e outras)
de forma competitiva e inovada, e acreditando que o importante não é ter todas
as informações e sim saber usar e gerencia de forma que traga benefícios para
empresa e satisfação para os clientes.
O site é usado como uma vitrine virtual os pedidos são feito direto no
site e enviado para o departamento de vendas em forma de orçamento para
ser analisados todos os requisitos como quantidade unitária, logo que será
5
impresso entre outros, depois disso a equipe de vendas entra em contato com
as fábricas e com o cliente para fechar o pedido.
A empresa conta com mais de dois mil produtos em sua galeria de
vendas e dezenas de fornecedores que fabrica os mais variados modelos de
brindes promocionais, proporciona a satisfação do cliente. O novo ambiente da
empresa conta com uma equipe pequena mais focada em resultados e com
metas objetivas a serem atingidas.
A web é o local onde se tem mais informações, onde podemos definir o
perfil de pessoas que queremos oferecer nossos produtos e serviços. Para o
Grupo Up10 que pensa em crescimento e melhorias é uma obrigação gerenciar
as suas informações dentro do mundo digital para obter destaque no mundo
moderno tecnológico e acompanhar seus clientes e seus concorrentes de uma
maneira mais rápida de clara e direta.
Usado os sistemas de informação a empresa percebeu que a TI é um
fator decisivo nos processos interno e externo, ajustando seu organograma e
colocando a Tecnologia da Informação como base para todos os seus
processos. Que poderá aumentar sua fatia de mercado e ganhar novos
clientes, fornecedores e parceiros.
6
Organograma da Empresa com a TI em destaque
Presidente
Financeiro
Vendas
Tecnologia da
Informação
Parceiros
Secretaria
Recursos
Humano
Assistente
Diretoria
Consultor de
vendas
Vendedores
Fabricas
Produção
Gerente
Assistente
Departamento
Web
Técnico
Figura 1 – Organograma da empresa Grupo Up10.
7
3 Fundamentação Teórica
São de fundamentais importâncias para a realização desse projeto
várias bibliografias que os autores fundamentam suas ideias e que servirá
como base para o projeto em desenvolvimento.
Entender o ambiente digital e a sua importância para empresa nesse
século XXI é acrescentar em seus processos de gestão uma nova visão de
lidar com as informações, é esta conectado na rede mundial de computadores
(Internet), onde as pessoas (clientes) podem fazer praticamente de tudo em
qualquer lugar do mundo, podem pedir produtos e serviços e ter nesse
ambiente gigantesca quantidade de informações disponíveis e acessíveis. Para
as empresa podem realizar transações de negócios com seus fornecedores e
instituição financeira entre muitas outras possibilidades. (ALBERTIN, 2010).
3.1 Conceito, Padrões e Normas Web.
Peça fundamental nos processos de qualquer organização,
independente do setor ou do seu nicho de mercado, a internet é uma rede
mundial de computadores que tem como maior vantagem padrões de
comunicação que são adotados por um número cada vez mais de maquinas
interligadas e trocando informações entre se. (CORNACHIONE 2001).
A internet foi idealizada como um sistema de comunicação de informações, em 1969, pelo Advanced Research Projects Agency (Arpa), que faz parte do departamento de defesa americano; assim, os sites de pesquisa da Arpa passaram a compartilhar informações e da acesso a comutadores de qualquer lugar (ALBERTIN, 2010).
As informações são passada e exibidas para os usuários como uma
coleção de documentos armazenados em servidores (computadores de grande
porte e de grande armazenamento de dados), os arquivos da internet ficam
nessas maquinas em formato de HyperText Markup Language (HTML) uma
linguagem de marcação de texto para a descrição das estruturas das paginas
web. Esse formato de arquivo é base de desenvolvimento das paginas para
que os leitores de conteúdos web chamados de browser possa ler e solicitar
para o usuário. Os browsers são softwares desenvolvidos unicamente para ler
os conteúdos na web, ou seja, nos servidores web e disponibilizar na tela do
8
usuário, os principais browsers na atualidade são Google Chrome, Internet
Explorer, Mozilla e Safari. (FREEMAN, 2008).
Antes de começar um projeto web precisamos conhecer alguns fatores
que devem ser analisados para que se tenha uma aceitação dentro do conjunto
de normas, diretrizes, recomendações, notas e artigos produzidos pelo World
Wide Web Consortium (W3C) órgão responsável por todas as páginas web.
(GOMES, 2013).
O World Wide Web Consortium é um organismo formado por centenas
de indivíduos e pela maior parte das empresas líderes do mercado informático
(Microsoft, Intel, IBM, Sun, Oracle, Apple, e tantas outras). Este consórcio tem
por objetivo de normalizar as tecnologias envolvidas na Web, de forma a
garantir o acesso a toda a gente, independentemente do equipamento utilizado,
das limitações físicas de cada indivíduo ou da localização geográfica. O W3C
foi fundado por Tim Berners-Lee desde 1994 (www.w3.org/Consortium).
Quando se fala de normas para a Web, trata-se, na prática, de três
componentes independentes: estrutura, apresentação e comportamento, ou
ainda de linguagens estruturais (HTML, XML e XHTML), linguagens de
apresentação (CSS), dentre outras. Para alcançar seus objetivos, o W3C
possui diversos comités que estudam as tecnologias existentes para a
apresentação de conteúdo na Internet e criam padrões de recomendação para
utilizar essas tecnologias. Com a padronização, os programas conseguem
terminar facilmente os códigos e entender onde deve ser aplicado cada
conhecimento expresso no documento (www.w3.org/Consortium).
Os motores de busca consideram mais relevantes as páginas que têm
os termos em títulos do que as que os têm em simples parágrafos. É
importante que uma página seja semanticamente correta, marcando o que é
um título, parágrafo, etc. (www.w3.org/standards).
Nos últimos anos, vem crescendo a conscientização para questão de
aperfeiçoar a acessibilidade, tanto no ponto de vista do usuário quanto das
máquinas, e hoje a web é feita com páginas estruturada em eXtensible
Hypertext Markup Linguagem, o ((X)HTML) uma reformulação da linguagem de
marcação HTML baseada em eXtensible Markup Language, (XML) que foi
criada para suprir a falta de flexibilidade do HTML. O XHTML Pode ser
9
interpretado por qualquer dispositivo, independentemente da plataforma
utilizada, pois as marcações possuem sentido semântico para as máquinas, ou
seja, trabalha o conteúdo separado da forma utilizando e cada marcação para
o que ela realmente foi criada (GOMES, 2013).
A linguagem de estilos Cascading Style Sheets (CSS) é utilizada para
definir a apresentação de documentos escritos em uma linguagem de
marcação, como HTML ou XML. É um conjunto de regras que diz como será o
aspecto de uma página web, cores, fontes, tamanhos, fundos, links, etc.
fundamental para a acessibilidade e usabilidade dos websites (GOMES, 2013).
Em todo projeto precisa haver uma troca de informações entre cliente e
desenvolvedor, é muito importante ter as ideias bem elaboradas,
documentadas e definidas, isso vale e conta muito quando queremos
desenvolver um projeto de Websites (páginas Web) de qualidade e que atenda
as necessidades do cliente ou usuário final (GOMES, 2013).
Veja na figura um projeto web.
Figura 2 – Estrutura básica de um website.
3.2 World Wide Web
A web ou www (World Wide Web) é uma coleção de dados e
documentos armazenados nos servidores web que são localizados pelos
navegadores e exibidos para os usuários. É importante destacar que a
10
comunicação www é realizada através de alguns protocolos tendo como
principais o HTTP (Hypertext Transfer Protocol) utilizado para sistemas de
informação de hipermídia e textos, o TCP/IP (Protocolo de Controle de
Transmissão/Protocolo da Internet) é conjunto de protocolos de comunicação
entre computadores em rede Ele é a base para a comunicação de dados
da World Wide Web (ALBERTIN, 2010).
A URL (Uniform Resource Locator) é basicamente o endereço na
internet, uma URL é única e nela é armazenado seu nome na web, seu
diretório no servidor e todos os arquivos referentes às paginas do seu site e é
através dela que podemos desenvolver inúmeras atividades, buscar o que
queremos de maneira rápida e precisa seja uma pesquisa sobre determinado
assunto, trocar correspondências, arquivos (fotos, sons, animações etc.) ou
usar de forma profissional dentro da organização para estabelecer
comunicações entre funcionários, clientes, fornecedores ou ainda oferecer seus
produtos e serviços na plataforma digital (SANTOS, 2009).
A Web funciona basicamente com dois tipos de programas cliente e
servidor, o cliente se refere ao browser o solicitante das informações e o
servidor referindo se ao provedor onde ficam armazenados os arquivos que
serão solicitados pelo cliente (SANTOS, 2009). Veja a figura abaixo:
Figura 3 – Comunicação cliente e servidor fonte: http://paginas.fe.up.pt.
3.3 O Endereço na rede
Na internet o endereço é o seu domínio registrado onde cada máquina
identifica o IP (Internet Protocol) protocolo no qual seu nome (domínio) se
refere, e é através desse protocolo que seu domínio é encontrado na web,
quando solicitado os browsers busca as informações no seu servidor de
11
hospedagem, ou seja, onde fica seus arquivos com as informações referende
ao seu domínio (SANTOS, 2009).
No Brasil o órgão responsável pelos registros de domínios é o site:
Registro.br
Figura 4 – Site registro.br Fonte: http://registro.br/.
Exemplo de domínio
Figura 5 – Exemplo de um domínio registrado.
Muito usado nos sites, o subdomínio funciona como um subsite dentro
do site principal, e os arquivos que compõem este subsite vão ficar dentro de
um diretório/pasta com o mesmo nome do subdomínio. Exemplo: o site é
www.seusite.com.br, quando criamos um Subdomínio “tecnologia”, uma
12
pasta/diretório será criada dentro do site com o mesmo nome do subdomínio
(“tecnologia” em /public_html/tecnologia), e a URL de acesso será
http://tecnologia.seusite.com.br ou www.seusite.com.br/tecnologia. Pode ser
usado para criar um blog dentro do site principal (SANTOS, 2009).
Exemplo de Subdomínio.
Figura 6 – Exemplo de um Subdomínio.
Os serviços de hospedagens são os servidores onde ficarão todos os
arquivos que serão apresentados aos usuários quando digitado seu domínio no
browser, no Brasil podemos citar alguns serviços de hospedagens como UOL
Host, Locaweb, HostGator, Ycorn, entres outros. E quando contratamos um
desses serviços precisamos transferir os arquivos que queremos disponibilizar
no ambiente web, e para isso é usado o FTP (File Transfer Protocol), protocolo
de transferência de arquivos de outros computadores para o nosso (download),
ou arquivos locais para comutadores à distância (Upload) (SANTOS, 2009).
3.4 Linguagem de Programação
Define como um conjunto de regras utilizadas para criar programas
estabelecendo uma comunicação com computador, fazendo com que ele
execute o que você determina. As linguagens de programação para o
desenvolvimento web são as mais próximas da inteligência humana
classificada como de alto nível, exemplo: PHP, Javascript, JQuery, Aspnet,
entre outras (XAVIER, 1999).
3.5 Código-fonte
Os códigos-fonte são esses conjuntos em sequencia representado em
palavras ou símbolos de forma ordenada, contendo instruções em uma
das linguagens de programação existentes, de maneira lógica. Existem
linguagens que são compiladas (Executada) e as que são interpretadas. As
13
linguagens compiladas, após ser compilado o código fonte, transformam-se
em software, ou seja, programas executáveis. Um compilador de uma
linguagem de programação é um programa que traduz as instruções escritas
nesta linguagem de programação (código-fonte) para instruções escritas na
linguagem que o computador consegue executar diretamente: a linguagem de
máquina. O compilador realiza a tradução de todas as instruções do código-
fonte e gera como resultado um arquivo com o código em linguagem de
máquina (código-objeto). (XAVIER, 1999).
Figura 7 – Código-fonte do cabeçalho do site Grupo Up10
Existem diversas linguagens de programação e ferramentas que
auxiliam e complementam essas linguagens no desenvolvimento web. Veja
abaixo as que serão base nesse projeto.
3.6 Asp.net
Era uma tecnologia Microsoft para a criação de paginas dinâmica web
baseadas em scripts que rodava no servidor embutidos em uma página HTML
e executados por um servidor Web. O Asp, no entanto não era perfeito por ter
um código desestruturado dificultava a manutenção e algumas vezes
apresentavam muitos erros. O Asp.net surgiu como uma revisão do Asp
corrigindo os problemas e criando códigos estruturados com separação entre
lógica e apresentação, fácil de implementar além de suporte a múltiplas
linguagens (SIMON, 2004).
14
3.7 Adobe Dreamweaver
Figura 8 - Adobe Dreamweaver – Área de trabalho.
O Adobe Dreamweaver é um gerenciador de conteúdos. Com ele
podemos administrar desenhar, codificar e desenvolver sites, páginas e
aplicativos para a Web. Ele permite trabalhar com codificação manual e
também com ambiente de edição visual. O Dreamweaver esta preparado para
suportar com diversas linguagens para a construção de websites, tais como
XHTML, HTML, PHP, jQuery, Javascript, CSS e outras, fornecendo um
ambiente de codificação completo que inclui ferramentas de edição de códigos
como codificação por cores e preenchimento de tags (Marcadores) além de
uma interface completa para cada linguagem que for utilizada (GOMES, 2013).
15
3.8 Adobe Photoshop
Figura 9 - Adobe Photoshop – Área de trabalho.
Idealizado nos anos 80, mais precisamente em 1987 pelos os irmãos
Knoll (Thomas e Jhon Knoll) ainda com o nome de Display, o programa
despertou o interesse da poderosa Adobe (empresa de Software) que comprou
a licença do software um ano depois, incrementado suas ferramentas e
surgindo assim o que se tornou hoje o maior software de edição de imagem. O
Photoshop cria e mescla imagens, aplica diversos efeitos especiais e oferece
uma facilidade muito grande para o design que desejam imagens com alta
qualidade gráfica tanto para impressão como para a web. O software possui
diversos recursos que possibilita interagir com diversos programas como o seu
colega Adobe Dreamweaver gerenciador de sites. O Photoshop pode criar
diferentes tipos de arquivos de imagens adequando o tipo para o uso
específico (Andrade, 2010).
16
3.9 Corel Draw
Figura 10 – Corel Draw – Área de trabalho.
O Coreldraw é um completo programa de desenhos que trabalha com
imagens vetoriais, oferecendo várias ferramentas e efeitos que permitem uma
arte de alta qualidade e com acabamento profissional. É um dos programas de
edição gráfica mais utilizada no mundo, ele permite a criação e manipulação de
desenhos artísticos, publicitários, logotipos, capas de revistas, livros, CDs,
imagens de objetos para aplicação nas páginas de Internet (botões, ícones,
etc.) confecção de cartazes, etc. (CUNHA, 2012).
3.10 Usabilidade Web
Na internet tudo é muito rápido e as pessoas querem encontrar as
informações claras e fácies, o conceito de usabilidade tornou algo fundamental
nas páginas web que consiste em estruturar um site pensando no usuário final,
concentrando esforços para a facilidade do uso, criando um sistema
transparente e de fácil entendimento e operação para o usuário consiga
realizar sua tarefa desejada. Procurar coisas em um website e no mundo real
tem muitas semelhanças em comum, acontece que na web quando entramos
17
em um site pela primeira vez não há ninguém lá para nos orientar os caminhos
a seguir e se as informações da pagina inicial não tiver o que procuramos
simplesmente mudamos de site e provavelmente não voltaremos mais lá.
Clareza pode ser um diferencial para conquistar o visitante. (KRUG, 2008).
Abaixo o comportamento de um visitante em um Website
Figura 11 – Navegação do usuário em um website – Fonte: (KRUG, 2008).
18
É preciso também compreender que muitos usuários não são
totalmente familiarizados com computadores e com a web, que seus
equipamentos possuem limitações e que, na maior parte dos casos, a visita ao
site é um meio e não um fim. As descrições de produtos precisam ser
detalhadas o suficiente para dar uma boa ideia do produto ou serviço para as
pessoas e ajudá-los a diferenciar as opções. É essencial que o usuário consiga
visualizar o que é prioritário e o que é secundário no site e entender como as
informações estão estruturadas e localizadas. Um bom exemplo é a criação de
um mapa do site contendo todos os links de todas as paginas de maneira
organizada. Priorizar a facilidade de navegação e a simplicidade, o usuário
precisa encontrar a informação procurada em no máximo três cliques e analisar
o conteúdo que deve ser o mais conciso e objetivo possível (KRUG, 2008).
A usabilidade e acessibilidade (acessível a pessoas independentes das
suas capacidades físico-motoras, perceptivas, culturais e sociais) devem ser
analisadas sempre que pensarmos em construção de paginas web, usando o
CSS pode ser um ponto positivo para conseguir flexibilidade já que suas folhas
de estilos são suportadas pela maioria dos navegadores, criando aparência
amigáveis e facilitando o acesso a imagens, textos que podem ficar mudando
de com o que tornar mais útil para quem tem problema de pouca visão ou
usam lentes (KRUG, 2008).
3.11 Otimização Web
A busca por informações cada vez mais rápidas e precisas tornou algo
indispensável na sociedade de hoje, e no ambiente web é o ponto chave para
encontrar algo, alguém, informações e quase tudo que podemos imaginar, e
para isso existem os buscadores que são sistemas projetados para encontrar
informações armazenadas em um sistema computacional a partir de palavras-
chave indicadas pelo utilizador, reduzindo o tempo necessário para encontrar
informações (GABRIEL, 2012).
19
3.12 Motores de Busca
Os motores de busca surgiram da necessidade de organizar os
conteúdos da internet e facilitar o acesso aos mesmos. Em 1990, Alan Emtage
estudante da Universidade McGill em Montreal Canadá, criou o primeiro
serviço de busca na internet chamado de Archie. Na verdade o Archie não era
um motor de busca, mais sim um programa que possuía um índice de diretórios
referentes a todos os arquivos (por isso o nome Archie “Arquivo”) que estivesse
armazenado em site de FTP anônimo em uma determinada rede de
computadores (LEDFORD, 2008).
Com o tempo foram surgindo vários outros programas que tinha o
objetivo de organizar os arquivos na web. O primeiro serviço na forma de motor
de busca surgiu em 1993, criado por Matthew Gray e se chamava Wandex,
esse programa vasculhava a internet e indexava os arquivos. Foi à base para
da vida os rastreadores (crawlers) existente hoje (LEDFORD, 2008).
Os principais motores de busca e seu ano de surgimento.
Excite – 1993;
Yahoo – 1994;
Web Crawler – 1994;
Lycos – 1994;
Infoseek – 1995;
Alta Vista – 1995;
Inktomi – 1996;
Ask Jeeves – 1997;
Google – 1997;
MSN Search (LEDFORD, 2008).
Conceito de motores de busca
Rastrear e indexar são as duas fases principais dos motores de
buscas, para mostrar os resultados das pesquisas disponíveis aos usuários
solicitantes. O motor de busca é um software que usa aplicativo para coletar
informações sobre as paginas web, geralmente palavras-chaves ou expressões
que seja possíveis indicadores do que esta contido na pagina web como um
todo, URL, código que compõe a página e links (LEDFORD, 2008).
Clawler (rastrear) é quando o motor de pesquisa indexadores acessam
as paginas publicamente, seguindo os links (páginas) assim como um usuário
20
humano faria, a função é usado para extrair estes documentos fora e importá-
los para o banco de dados de rastreamento focado e repositório. Indexação é a
junção de informações de uma pagina para ser disponibilizado através dos
resultados no campo de pesquisa. Lembrando que uma página pode ser
rastreada, mas não indexada, e, em casos raros, pode ser indexado, mesmo
que não tenha sido rastreado (CARMONA, 2006).
Figura 12 - Pesquisa simples nos buscador Gooogle. Fonte: http://ianieba.com/wp-
content/uploads/2011/07/googleCrawler.png acessado dia 27/10/2013.
3.13 Google o maior buscador atualmente
Empresa Americana fundada em 1998 por Larry Page e Sergey Brin,
mudou o jeito de se conectar no mundo web, a empresa conseguiu seus
objetivos com ideias inovadoras e por colocar no mercado diferentes tipos de
software e ferramentas que forma um verdadeiro conjunto de inovação
tecnológica. A princípio era criar um buscador, ou seja, um site que
conseguisse absolver o máximo de conteúdos da web e disponibilizar a quem
solicitasse através de palavras chaves. A quantidade de informações na
Internet é tão grande e tão diversificada que é praticamente impossível
21
encontrar tudo o que se precisa sem o uso de um mecanismo de busca.
Existem ferramentas de procura muito boas na Internet, como o Bing, Yahoo e
o Ask. No entanto, nenhum desses sites consegue ter a amplitude do Google.
Uma das boas razões para isso é que o Google atualiza sua base de
informações diariamente (GOMES, 2009).
O software utilizado nas buscas é o PageRank, um conjunto de
algoritmo que analisa a rede dando peso numéricos a cada elemento de
coleção de documentos hiperligado na internet medindo sua importância
através de um motor de busca. O PageRank representa um link em qualquer
lugar da internet para uma página específica que varia conforme sua
importância (GOMES, 2009).
Figura 13 - Representação de PageRank. Fonte: http://javarevisited.blogspot.com.br/2011/11/latest-google-pagerank-update-in.html acessado dia 20/10/2013.
Uma boa unidade de medida para definir a RankPage de uma página pode se a porcentagem (%) de pagina que ela é mais importante. Por exemplo, se tem uma pagina tem RankPage de 30% significa que ela é mais relevante que um terço de toda a internet. Se seu RankpPage é de 99% significa que ela é superior a quase todas as páginas da internet (GOMES, 2009).
3.14 Search Engine Marketing (SEM)
É o conjunto de ações de marketing de busca, geralmente divididos
em Search Engine Optimization (SEO) e anúncios em Links Patrocinados. O
marketing de busca são as formas que usamos os sites de pesquisas para
alcançar os objetivos específicos de marketing, toda busca começa com
alguém digitando uma palavra no campo de pesquisa de um determinado
22
buscador e são essas palavras que define os termos de busca, chamadas
também de palavras-chaves, por exemplo, (tecnologia) ou pode ser formadas
por pequenas frases como (tecnologia em website) dessa forma o buscador
apresenta as páginas relacionadas a essas palavras. As páginas específicas
ao termo são chamadas de paginas de resultados de busca ou Search Engine
Result Page (SERP). (GABRIEL, 2012).
Os resultados são apresentados de duas formas, uma apresenta os
resultados pagos (links Patrocinados) à outra os resultados orgânicos (natural).
Os apresentados referentes à busca orgânica são provenientes da análise que
os buscadores fazer das páginas de dos conteúdos na web considerando a
relevância das palavras-chaves da busca. Com esse resultado se baseia na
análise dos conteúdos web, ou seja, seus órgãos, por isso são chamados de
orgânicos (GABRIEL, 2012).
É importante estudar o perfil dos usuários, suas preferencias seus
gostos, sua localidade etc. são fatores relevantes para obter melhores
resultados tanto nos resultados orgânicos quanto nos pagos. Marketing e TI
são dois fatores que precisam atuar de modo sincronizado na gestão de
marketing de busca com a ária de negocio da organização, elaborando planos
de indicadores de desempenho e estruturando os processos no dia a dia da
empresa. O objetivo de marketing pode ter vários interesses a serem
alcançados pela organização, pode ser aumentar as vendas, promover a
marca, aumentar o trafego para o site, entre outros. (GABRIEL, 2012).
A partir do SEM as técnicas referentes à otimização orgânica são
chamadas de Search Engine Optimization (SEO). E as técnicas pagas
chamadas de links patrocinados (LP) (GABRIEL, 2012).
Na esquematização SEM, podemos dizer que:
SEM = SEO (otimização orgânica) + LP (Links Patrocinados).
SEO = ações on-page (conteúdo/código/estrutura) + ações off-page de
contruçao de links (links building) (GABRIEL, 2012).
23
3.15 Search Engine Optimization (SEO)
É um conjunto de técnicas, métodos e/ou estudos que visam melhorar
o posicionamento das páginas web no mecanismo de busca, para isso o site
precisa ser reconhecido pelo crawler e atender alguns critérios que são
fundamentais no processo de indexação dos buscadores. Entre ele destaca a
popularidade do site, links, título, palavras-chaves, conteúdo do site,
maturidades do site, entre outros (LEDFORD, 2008).
A Otimização para mecanismos de pesquisa pode muitas vezes se
resumir a pequenas modificações em partes do site. Quando vistas
isoladamente, essas mudanças podem parecer como uma pequena melhoria,
mas quando combinadas com outras otimizações, podem representar um
impacto significativo na experiência do usuário e no desempenho nos
resultados de pesquisa orgânica. (GABRIEL, 2012).
3.15.1 Escolhendo as palavras-chaves
Resumidamente o termo palavras-chaves são as palavras usadas para
catalogar, indexar e encontrar o seu site. A escolha eficiente ajuda na
visibilidade do site nos motores de busca. Existem ferramentas de pesquisas
de palavras-chaves que podem ser usadas com o intuito de facilitar a escolha
das mesmas. O Google Adwords Keyword Tool fornece sugestões de palavras-
chaves, mostra a competitividade de cada palavra nos motores de busca e sua
popularidade. Uma das maneiras de fazer com que um site seja indexado nas
buscas virtuais é a inserção de termos relevantes em determinados lugares do
site. Por relevância não se entende o tema e, sim, a palavra e a quantidade de
vezes que ela foi procurada no campo de pesquisa dos buscadores, quanto
mais procurada, maior sua relevância é, consequentemente, a probabilidade de
ser procurada novamente. Precisa-se também verificar as palavras chaves que
podem ser usadas que não possuem tanta concorrência essa informação pode
ser vista na ferramenta Google Adwords Keyword Tool (LEDFORD, 2008).
O Google Trends é outra ferramenta do Google que mostra os termos
mais populares buscados recentemente. Esta ferramenta apresenta gráficos
com a frequência em que um termo particular é procurado em várias regiões do
mundo, e em diversos idiomas. O serviço também permite que o usuário possa
comparar o volume de procuras entre duas ou mais condições. Notícias
24
relacionadas aos termos buscados são mostradas ao lado e relacionadas com
o gráfico, apresentando possíveis motivos para um aumento ou diminuição do
volume de buscas. A ferramenta permite descobrir em quais períodos do ano
(ou em vários deles) as palavras-chave relacionadas ao seu ramo de negócio
teve maior procura. Por exemplo, fazendo uma pesquisa por “celular”, é
possível analisar como foi a demanda por este termo no último ano. Além
disso, ainda é possível comparar o resultado com anos anteriores, ou com
outras palavras-chave durante o mesmo período. O Google Trends é uma
excelente ferramenta para auxiliar no planejamento e identificação novas
palavras-chave para incrementar os processos de SEO (FELIPINI, 2012).
3.15.2 Links Quando se fala em SEO a primeira coisa que pensamos é no termo
palavras-chaves, mais os links são tão fundamentais quanto às palavras-
chaves, uma página sem links é como uma ilha deserta pode ser bela e cheia
de diamantes mais se ninguém a conhece de nada adianta. Os links têm como
propósito vincular o site a outros que seja relevante quanto às informações
presente nas páginas do site como um todo. Ter um link no seu site apontando
para outro site é importante, mais ter links fora do site que aponta para as
paginas do seu site faz toda a diferença na relevância dos motores de buscas.
Lembrando que nunca podemos exagerar na quantidade de links os crawler
pode identificar como fazenda de links e com isso afetando o trafego do site.
(LEDFORD, 2008).
3.16 Otimização On-page
A TI é essencial nesse processo de otimização interna do site, pois
essa atividade é geralmente desenvolvida por profissionais da área de
Tecnologia e que tenho conhecimento de código e técnicas de otimização
buscas para que seja feito um trabalho com objetivo de atrair o publico alvo de
maneira correta (GABRIEL, 2012).
25
As regras e técnicas são basicamente implementadas nesses pontos
importantes de um website.
URL;
Tag Title;
Meta-tags;
Meta-tag “Description”;
Meta-tag “Keyword”;
Alt e Title na tag <img>
URL
A URL é muito importante para os motores de busca encontrar o site,
por isso é fundamental ter na URL palavras-chaves referentes ao assunto
principal do site. No processo de otimização existem um limite de palavras que
podem ser colocadas em uma URL, a quantidade de parâmetro na URL não
pode passar de dois (GABRIEL, 2012).
Tag Title
Muito levado em conta pelos motores de buscas o titulo do site é algo
que precisa ser observado e definido corretamente. A tag de título <title>
informa tanto os usuários quanto os mecanismos de pesquisa qual assunto
específico daquela página web. O numero máximo de caracteres em um título
permitidos são de 60 a 65 caracteres, ate esse valor é aceitável pela maioria
dos motores de buscas. Os spideres ou crawlers examinam o título e as
palavras usadas nele são interpretadas como sendo o trópico da página.
(LEDFORD, 2008). Exemplo:
Sem um título <title>HOME</title>
Com um título <title>Grupo UP10 - Brindes Promocionais</title>
Meta-tags
As meta-tags apesar de não ter muita relevância por conta do mau uso
de desenvolvedores no passado, ela tem sua importância nos processos de
otimização de busca, são comandos especiais inseridos no código HTML ou
xHTML no topo das paginas do website, marcadores (tags) são inseridos com
palavras relacionada aquela pagina. São divididas em:
26
Meta-tag “Description”
As Description geralmente são frases que representa aquele pagina, ou seja,
uma descrição de no máximo 150 caracteres especificando o conteúdo
referente a pagina ou ao website. Exemplo:
<meta name= “description" content= “Fabrica de Software web,
Desenvolvendo tecnologias inovadoras” />
Meta-tag “Keyword”
São destacadas as principais palavras-chaves nessa meta-tag,
podendo ser definida ate 6 palavras e que possua de 200 a 250 caracteres.
Exemplo:
<meta name= “keywords” contente= sistema de informação, tecnologia, TI,
sistemas, internet, website>
(GABRIEL, 2012).
Alt e Title na tag <img>
São dois parâmetros que poder ser usados para criar uma identidade às
imagens, são definidos dentro da tag <img>, facilitando o acesso dos motores
de busca, pois os mesmo registram os textos e links das paginas mais não os
conteúdos gráficos, por isso a importância de usar esses parâmetros. Na tag
"alt": são adicionadas palavras-chave de uma imagem permite descrever esta
imagem, e esta descrição facilita muito a vida dos buscadores, já que o seus
robôs não precisam mais adivinhar o que está na foto. (GABRIEL, 2012).
Exemplo do uso da propriedade “Alt”.
<img src="http://nomedoseudomínio.com/suafoto.jpg" alt="Descrição da sua foto". />
Na tag "title" é usada para descrever para os usuários do navegador o
conteúdo de elementos gráficos na pagina, quando a o mouse passar sobre a
imagem. Nomear corretamente as suas fotos pode ser muito útil nos processo
de otimização, pois um arquivo chamado foto00000052.jpg não significa
absolutamente nada para o usuário ou para os robôs dos buscadores. Em
compensação, um arquivo chamado logo-da-empresa-grupo-up10.jpg já é bem
melhor e inidentificável (GABRIEL, 2012).
27
Exemplo do uso da tag “title”.
<img src="[http:// nomedoseudomínio.com/suafoto.jpg]" alt="Descrição da sua foto".
title="Nome da sua foto"./>
3.16.1 Conteúdos e Estruturas das páginas
Os conteúdos das paginas é outro ponto relevante importantíssimo
para os mecanismos de buscas no momento da indexação, fazer um conteúdo
recheado de palavras-chaves, títulos nas imagens e seguindo as
recomendações do World Wide Web Consortium (W3C) pode ser fundamental
para ter os resultados esperados nos mecanismos de buscas. Importante
destacar que os buscadores não enxerga arquivos em Flash ou imagens, é
preciso ter um atenção com esses tipos de arquivos, o essencial é adicionar
links e título no formato de texto, que poderão ser indexado (GABRIEL, 2012).
Montar as páginas do site pensando nos mecanismos de busca pode
ser um passo fundamental para ter sucesso nos ranking de pesquisas, a
organização da estrutura das paginas como link para outras paginas o e design
são pontos favoráveis à indexação. Evitar na estrutura fatores como arquivos
em Flash mal elaborados, Frames mal projetados que impedem os buscadores
de acessar a página do Website (GABRIEL, 2012).
Frames são comando no código HTML que permite que a página seja estruturada em parte independentes formando um conjunto de paginas (GABRIEL, 2012).
3.17 Saturação (Search Engine Saturation - SES)
A saturação é o índice que um domínio possui em relação aos
buscadores, ou seja, o número geral das páginas indexadas em todos os
buscadores (Google, Ask, Yahoo, Bing...), é a soma das paginas que pode
chegar ao seu site (domínio) principal. Existem várias maneiras de aumentar
esse índice e o SES destaca algumas sugestões que aumentaram o trafego de
links e páginas nos buscadores. A criação de subdomínio, blogs ou ainda
destacar uma área do site principal com criação de artigos ou notícias que vão
atrair o público (GABRIEL, 2012).
28
3.17.1 Servidor do Site
O desempenho do servidor do website é determinante tanto para os
buscadores como para as pessoas que estão acessadas as paginas, ou seja,
arquivos pesados como imagens em alta resolução e vídeos podem deixar a
página com um tempo maior para ser carregada pelo servidor de hospedagem
e dificultando o acesso dos robôs de busca e das pessoas (GABRIEL, 2012).
3.17.2 Sitemaps
O Sitemap é outro arquivo importante para os buscadores, em formato
XML (eXtensible Markup Language) ou .TXT. O nome do arquivo não possui
um padrão obrigatório, mas geralmente é chamado de SITEMAP.XML. Com a
finalidade de listar as páginas de um site que gostaríamos de ter presentes nos
resultados de busca. Os sites de busca oferecem ainda um mecanismo para
que webmasters submetam o conteúdo de seus sites através de
um resumindo, arquivo sitemap.xml é usado como um índice aos buscadores,
facilitando o acesso a essas páginas e arquivos. Pode ser criado de varias
formas, manualmente através de aplicativos ou usando ferramentas online para
gerar sitemaps, um exemplo é o site www.xml-sitemaps.com que cria
sitemaps.xml sem a necessidade da instalação de um programa no
computador. Uma vez gerado o (ou os) arquivo(s) sitemap, este deve ser
colocado preferencialmente no diretório principal do site. Em seguida, devem
ser informadas as ferramentas dos buscadores a localização e nome do
arquivo para que comece o processo de rastreamento e indexação. No caso do
Google a ferramenta é o Google Webmaster Tools (GABRIEL, 2012).
3.18 Otimização Off-Page
Consiste em criar conteúdos fora do site com link direcionado para o
domínio principal no caso o site. Existem diversas formas de gerar conteúdos
dentro da web, favorecendo o Marketing de busca, aumentando o número
visitas e ganhando novos clientes. As redes sociais é o lugar onde existem
muitas pessoas com diferentes valores, visões, ideias ou ideais, trocando
informações sobre amizades, refeições, empresas, conflitos sociais e entre
29
outros, aproximando a distancia entre pessoas de todas as partes do mundo
(GABRIEL, 2012).
3.18.1 SMM (Social Media Marketing) e SMO (Social Media Optimization)
Social Media Marketing ou Marketing em mídias sociais resume em
usar as mídias para desenvolver conteúdos com o objetivo de aumentar o
numero de paginas indexada nos buscadores e valorizar a marca da
organização. Social Media Optimization consiste em todas as ações dentro e
fora do site para atingir esse objetivo, SMO inclui produzir conteúdos para atrair
o usuário e facilitar seu acesso. Exemplo de ações feitas com esse objetivo é a
integração de botões de mídias sociais na pagina principal do site, “curtir”,
“compartilhar”, “tweet” (GABRIEL, 2012).
3.18.2 SMM (Social Media Marketing).
Representa o trabalho fora do site, com o desenvolvimento de
conteúdos nas redes sociais em blog, site de anúncios, portais usado
estratégia para atrair visitas para o site, cada método usado favorecera para
aperfeiçoar as campanhas de marketing de busca (GABRIEL, 2012).
3.18.3 Mídias Sociais
Mídias sociais são ambientes com foco de reunir pessoas e trocar
mensagens fotos, vídeos, dados, participarem de comunidades com um
determinado assunto no qual nos interessa, o Brasil é um dos pais com mais
acesso a essas plataformas, as pessoas passam muito tempo em alguma
dessas redes se divertido, atualizando sobre algum assunto e etc. As empresas
perceberão a importância de participar e conquistar novos clientes, desenvolver
conteúdos para atrair as pessoas, além de monitorar como as pessoas estão
analisando sua marca (TELLES, 2011).
As mídias sociais divide em algumas categorias, mesmo sendo
possível compartilhar quase tudo nelas, cada uma tem seu foco ou foi criada
para aquela função em especial (TELLES, 2011).
30
Abaixo suas divisões e como usa-las para otimização de marketing de
busca:
Compartilhamento de vídeos
Atualmente a rede referência é o Youtube propriedade do maior
buscador da internet o Google, no Youtube podemos criar canais com as
informações da empresa, como o site, outras canais, outras mídias e inserir
vídeos com títulos e palavras-chaves para ser indexado nos buscadores, é uma
ótima ferramentas nos processos de marketing de busca (TELLES, 2011).
Compartilhamento de Fotos
Existem diversos sites que podemos compartilhar fotos (Instagram,
Picasa), mais o Flickr é o principal na web, oferecendo uma plataforma intuitiva
e fácil de usar, no Flickr podemos criar canais e adicionar milhares de fotos
com título e tags para os rastreadores indexar com mais facilidade, pode
contribui muito nos processo de SEO (TELLES, 2011).
Compartilhamento de Apresentações
São sites muito interessantes para as empresa divulgares suas
apresentações de um jeito interativo e usual. As apresentações podem ser
criadas em um editor de texto como no Microsoft Word ou em um editor de
apresentações como o Microsoft Power Point, nesses sites podemos
disponibilizar conteúdos aos clientes no formato PDF ou como catálogos
digitais e podendo ser compartilhado nas mídias sociais, enviados por e-mail
ou apresentar no site principal, as principais mídias de compartilhamento de
arquivos são o Slideshare que cria apresentações em PDF, Calaméo e Issuu
são sites que quando armazenamos nossos arquivos são gerados catálogos
digitais muito interativo e de grande contribuição para o marketing da empresa
(TELLES, 2011).
Blog e Microblogging
Com o surgimento dos Blogs ficou mais simples publicar suas ideias na
web. Blogger (Ferramenta para desenvolvimento de blogs) pertencente ao
Google e Wordpress aplicativo de sistema de gerenciamento de
conteúdo para web, voltado principalmente para a criação de blogs via web,
esses sistemas proporcionaram uma maior facilidade na publicação e
manutenção dos conteúdos na web. Além disso, a posterior agregação da
31
ferramenta de comentários aos blogs também foi fundamental para a
popularização do sistema e indexação nos buscadores, são adicionados em
cada post o título, as tag e diversas palavras-chaves. O Microblogging satisfaz
a necessidade de comunicação mais rápida com post menores podendo haver
links para outra pagina na web, as empresa pode estabelecer um canal direto
com o cliente e solucionado algum problema ou direcionando-o para a página
principal da empresa (site). Os microblogging mais populares são o Twitter e o
Tumblr (TELLES, 2011).
Redes Sociais
Os sites relacionamentos são ambientes que focam reunir pessoas e
trocar informações através seus perfis que são criados com dados, fotos
pessoais, vídeos e diversas experiências, compartilhada através de
comunidades, grupos, listas de amigos em comum. A maioria das redes sociais
é habitada por milhares de pessoas com diferentes gostos e diferentes
interesses. Facebook, Linkedin, Formspring, Google+, são sites de
relacionamento com grandes quantidades de pessoas e muito explorado pelas
empresas, como forma de alcançar novos clientes e aumentar sua fatia no
mercado, são sites que foram criados com uma arquitetura para o usuário
normal no caso o cliente e com um espaço para as empresas apresentarem
seus produtos e serviços (TELLES, 2011).
3.19 Outras formas de Otimização Off-Page
Google Places ou Google mapas: uma ferramenta poderosa do
Google (Buscador) pode criar um perfil para empresa com o nome, descrição e
palavras-chaves, adicionar o site, categorias de produtos, vídeos, além de
gerar um mapa que pode ser disponibilizado no site principal de facilitar a
visibilidade da localidade da empresa física para visite de clientes e
fornecedores (GABRIEL, 2012).
QR Code: Muito usado em publicidade o QR Code é uma figura no
formato de código de barras que permite aos usuários com uma câmera de um
celular, por exemplo, ler o código e visualizar as informações ali armazenadas.
Os QR Code são criados através de ferramentas muitas vezes gratuitas como
o Goo.gl da Empresa Google, basta informa ao site (goo.gl) uma URL ou seja
32
um link que será armazenado no código quando gerado, as empresa podem
usar essa fora de marketing em vários meios, on-page, off-page ou físico (nas
embalagens do seus produtos por exemplo) (TELLES, 2011).
3.20 Landing page
A definição de Landing Page refere a todas as paginas que uma
pessoa acessa e nela tem um ou mais links, banners que consequentemente
despertara a curiosidade do visitante para abri-lo, esse é o objetivo das
Landing Page converter visitante em usuário. Esse processo pode ocorrer
também nas campanhas de e-mail marketing e nos resultados de buscas. Nos
planos de marketing as Landing Page são responsável por convencer o
público-alvo a tomar determinadas ações planejadas (GABRIEL, 2012).
Um dos erros mais comuns nas estratégias de marketing de busca é não prestar atenção adequada as Landing Page. Elas devem ser desenvolvidas e otimizadas especificamente para converter o visitante em cliente da conversão que se espera dele (GABRIEL, 2012).
3.21 Conversão
A conversão é a chave para o sucesso dos planos de marketing de
buscas, e fundamental para saber se as ações de marketing estão indo bem ou
não. A conversão na maioria das vezes esta relacionada a vendas e
classificada em dois tipos, receita e pré-receita, a primeira referido a venda
direta e a segunda envolve outros passos como um preenchimento de um
formulário, assinatura de um newsletter, download... E precisa ser rastreados e
mensurados por meio de indicadores, estabelecendo um controle e possíveis
ajustes nas ações de marketing (GABRIEL, 2012).
O objetivo da conversão pode ser qualquer coisa que se deseje que o visitante faça na pagina: conhecimento sobre a empresa/produto compra download, preenchimento de formulário, um simples click para ir a outra pagina do site interação com alguma parte especifica do site, interação com as marcas entre outras (GABRIEL, 2012).
3.22 Monitoramento, Controle e Ajustes.
É fundamental a monitoração dos conteúdos e das ferramentas
utilizadas nos processos de marketing de busca, as quantidades de visitas,
33
quais as páginas mais visitas, de onde vem às visitas, qual a taxa de conversão
e rejeição, ter o controle desses monitoramentos nos permite fazer os ajustes
necessário para aumentar a relevância nos meios que forem mesmo
mensurados no monitoramento (GABRIEL, 2012).
3.23 Internet no Ambiente Empresarial
O Ambiente empresarial passou por várias mudanças no decorrer dos
anos e atualmente com o surgimento cada vez mais forte e crescente da TI as
organizações passaram a terem uma visão de gestão da informação
diferenciada, essa evolução refere ao poder de uma infraestrutura capaz de
minimizar de forma significativa, as restrições do ambiente empresarial para
que possa fazer de forma mais rápida, objetiva, automática e ampla seus
processos, sem grandes mudanças de regras e oferecendo respostas
organizacionais para o sucesso ou para a sua sobrevivência nesse novo
ambiente empresarial (ALBERTIN, 2010).
Muito importante para a organização e seus empreendedores é
entender os princípios básicos de como ter um negocio na internet e
principalmente como fazer com que ele tem um impacto no faturamento e na
geração de lucros para a empresa (SANTOS, 2009).
Os sistemas de informação penetrarão nas organizações, seja no
ambiente físico ou web, com o objetivo de aplicar soluções aos problemas
frequentes relacionados ao controle e comunicação das informações
permitindo as organizações decidirem e operar seus processos recursos e
pessoas, pode se dizer que é um sistema que acessa dados com recurso de
entrada e os transforma em produtos de informação como saída (SANTOS,
2009).
3.24 Conceitos do Projeto
A proposta do projeto é deixar claro que o tratamento das informações
faz parte de toda a atividade de negocio de uma empresa que oferece um
produto ou serviço. A TI tornou um componente critico do planejamento
estratégico corporativo e da vantagem competitiva das empresas (ALBERTIN,
2010).
34
Quando se fala em competitividade analisamos o mundo tecnológico e
suas mudanças, suas contribuições no mercado. A internet mudou a maneira
como as pessoas se comunicam e fazem negócios. Nos dias atuais os
internautas (sejam clientes ou simples visitantes) buscam páginas que tenha
usabilidade, que sejam dinâmicas fáceis, de serem encontradas e acima de
tudo páginas que tenha informações objetivas (OLIVIERO, 2012).
Fazer o planejamento definir e refinar os objetivos e desenvolver o
curso de ação necessária para alcançar esses objetivos. Coletar os requisitos
faz parte de toda a documentação que será usada no decorrer do projeto, ter
todos os processos de desenvolvimentos claros e definidos no escopo é
fundamental para atingir o objetivo. Definir e sequenciar as atividades
especificando-as e identificando com base na documentação e requisitos
levantados do projeto, elaborando um cronograma com as estimativas de
duração das atividades que será desenvolvida frisando o orçamento e os
custos que iram impactar no planejamento e evolução do projeto (PMBOK,
2012).
Todo empresa que busca o mundo digital para os seus negócios
precisar usar ferramentas para aprimorar suas paginas (site, e-commerce,
blog) e com a presença da TI, tratando as informações e buscando sempre
inovações pode ser fundamental para se manter no mercado web (ALBERTIN,
2010).
3.25 Planejamento
Fazer o planejamento de todas as etapas do projeto, analisar os
processos internos da empresa e os concorrentes no mercado. A forma mais
usada para representar o ambiente (macro e micro) apresentando diversos
fatores que podem afetar o produto de uma empresa. Esses fatores, que estão
presentes no ambiente, podem tanto se configurar como ameaças ou como
oportunidades, é a matriz de SWOT (strengths, weaknesses, opportunities e
threats) (GABRIEL, 2010).
35
Modelo SWOT:
Figura 14 – Estrutura da matriz SWOT.
Para construir a Matriz SWOT, começamos elencando todas as forças,
fraquezas, ameaças e oportunidades relacionadas à empresa/produto.
Vejamos:
Pontos fortes (strengths): Exemplo “Que recursos especiais à
empresa possuem e pode aproveitar?”.
Pontos fracos (weaknesses): Exemplo “Onde a empresa tem
menos recursos que os concorrentes?”;
Ameaças (threats): Exemplo “Que ameaças são provenientes dos
seus concorrentes sobre seu produto/empresa?”.
Oportunidades (opportunities): Exemplo “Que oportunidades
podem ser identificadas no microambiente (fornecedores, canais
etc.)?” (GABRIEL, 2010).
36
Antes de iniciar o projeto precisamos criar o escapo com base nas
informações adquiridas na matriz SWOT, e definir as etapas do projeto
estabelecer uma sequencia de todas as fases que compõe a duração, controle,
necessidade e o tempo definido com inicio e fim do projeto. A estrutura
analítica do projeto (EAP) é a base para o detalhamento do projeto e depois de
elaborada passa a ser a base para a manutenção do escopo do projeto. A EAP
é uma estrutura gráfica hierárquica que pode ser representada por uma
espécie de organograma ou por uma lista (PMBOK, 2012).
Exemplo de um EAP:
Figura 15 - Exemplo de EAP. Fonte: http://gestaodeprojetos10.blogspot.com.br
acessada de 27/10/2013.
3.26 UML (Unified Modeling Language)
Usar algumas ferramentas como, a UML (Unified Modeling Language),
uma linguagem de Modelagem de dados criada para visualizar, especificar,
construir e documentar os artefatos de um sistema de software. Uma
linguagem adotada, desde 1997, como padrão internacional pelo OMG (Object
Management Group). A UML provê um conjunto de diagramas e seus
componentes, todos com notação e comportamento (semântica) bem definidos.
(PIMENTEL, 2009).
A UML se divide em treze diferentes tipos de diagramas que são
usados para modelar diferentes tipos de projetos e desenvolvimento de
softwares. No projeto utilizaremos o diagrama de Caso de Uso, descrevendo
37
como o usuário interage ao site, quais as funcionalidades que o usuário
procura, documenta o que o sistema faz do ponto de vista do usuário. O
Diagrama de Caso de Uso é representado por alguns componentes, no formato
oval são as funcionalidades representadas no sistema e o usuário, funcionário
etc. de acordo com o estudo de caso analisado. (PRESSMAN, 2011).
No quadro abaixo segue a definição de algumas figuras do diagrama:
Usuário / Ator
Caso de Uso
Comunicação
E/ou
Figura 16 - Componentes do diagrama de Caso de Uso.
O Modelo de Caso de Uso ilustra as funções pretendidas do sistema (casos de
uso), suas vizinhanças (atores) e relacionamentos entre os casos de uso e
atores (diagramas de casos de uso). O papel mais importante de um modelo de
caso de uso é o de comunicação. Ele provê um veículo usado pelo cliente ou
usuários finais e os desenvolvedores, para discutir a funcionalidade e o
comportamento do sistema. Inicia na Fase de Concepção com a identificação
dos atores e casos de uso principais do sistema. O modelo é então
amadurecido na Fase de Elaboração-informação mais detalhada é adicionada
aos casos de uso identificados, e casos de uso adicionais são introduzidos à
medida que forem necessários. (PIMENTEL, 2009).
Composto por:
Atores – são parte do sistema - eles representam algo ou alguém que
deve interagir com o sistema.
Casos de Uso – Eles representam a funcionalidade fornecida pelo
sistema, é uma sequência de transações executadas por um sistema,
que produz um resultado mensurável de valores para um ator em
particular.
SITE
38
Comunicação - Esse tipo de associação é normalmente chamado como
uma Associação de Comunicação, desde que ela represente uma
comunicação entre um ator e um caso de uso. Uma associação é
representada como uma linha que liga os elementos a serem
relacionados. A navegação em somente uma direção pode ser
representada pela adição de uma seta que indica a direção na linha da
associação. (PIMENTEL, 2009).
3.27 Matriz SWOT
Elaborada com base nas informações coletadas do ambiente interno e
externo da empresa Grupo up10.
Forças Fraquezas
Interno
Grandes Variedades de Produtos;
Padrões de atendimentos;
Softwares Atualizados;
Grandes Clientes;
Grandes Parcerias;
Comprometimento;
Preços competitivos.
Participação de mercado;
Marketing;
Participação na Web;
Pouco investimento em
Tecnologia da informação;
Orçamento limitado;
Oportunidades Ameaças
Externo
Crescimento rápido no mercado;
Novas tecnologias;
Criar promoções para atrair
clientes de concorrentes;
Ampliar propagandas digitais;
Crescimento web;
Ampliação da Tecnologia da
Informação.
Novas estratégias da
Concorrência;
Novos entrantes no mercado;
Crise econômica;
Crescimento da concorrência;
Aumento dos preços dos
fornecedores.
Figura 17 – Matriz SWOT.
39
3.28 Escopo de projeto
Melhorias no Site
Grupo Up10
Design
Visibilidade
Usabilidade
Cores
Palavras-
Chaves
Mapa do Site
Menus
Ícones
Formulários
Catálogos
Blogs
Mídias Sociais
Planejamento
Análise
Requisitos
Ajustes
Documentaçao
Interna
Externa
Hardware
Software
Pessoas
Ambiente
CSS
Imagens
Monitoramento
Controle
Anúncios
Catálogos
Digitais
QR Code
Portais Web
Buscadores
Resultado Final
Vendas
Faturamento
Figura 18 – Escopo do Projeto.
40
O objetivo de uma EAP é identificar elementos terminais (os produtos,
serviços e resultados a serem feitos no projeto). Especificando basicamente as
três etapas principais do que será implantada no projeto para chegar aos
objetivos desejados pela empresa: abaixo a EAP do Projeto Grupo Up10.
EAP
Projeto
Design
Visibilidade
Usabilidade
Elaborar Técnicas
Criar Métodos
Início
Planejamento
Final
Monitorar
Aplicar Melhorias
Figura 19 – EAP do projeto.
4 Desenvolvimento
Avaliado todo o ambiente interno e externo da empresa, concluímos
que o projeto teria três etapas chaves, como o objetivo final não era só atrair
usuários para o site mais principalmente mantê-los fieis e possivelmente torna-
los clientes. A empresa tinha todas as ferramentas necessárias para a
realização do projeto, e as outras seria gratuitas disponíveis na web.
Na primeira fase foi realizada uma análise no design e nas cores,
imagens e arquivos foram aplicados no site. Foi preciso preparar o ambiente
(Site) para cativar o usuário a voltar, e encontrando com mais facilidade o que
se procura.
As alterações no design tem um objetivo ainda maior, que faz parte da
segunda fase, deixar o ambiente o mais usual possível, com as informações
claras e destacadas para os usuários, atendendo os métodos de usabilidade.
Na terceira fase e com o ambiente organizado e usual, foram criados
os métodos de marketing de busca, gerando informações de qualidade em
diferentes ferramentas dentro da rede mundial de computadores (Internet)
atraído visitante e aumentado à fatia da organização no mercado.
41
Vejamos como foram realizados esses procedimentos e os resultados
obtidos no decorrer do projeto.
4.1 Design, Usabilidade e Visibilidade.
4.1.1 Fundo do Site
O fundo tinha uma imagem que foi alterada por uma cor simplesmente,
dando um contraste no conteúdo do site e deixando-o mais leve em seu
carregamento. Veja abaixo o arquivo CSS e as alterações:
Figura 20 – CSS antigo.
Figura 21 – CSS Alterado.
42
4.1.2 Cabeçalho
Figura 22 – Cabeçalho antigo.
O cabeçalho antigo possuía vários aspectos negativos de acordo com
as normas W3C, que dificultava o acesso do usuário ao site, todo seu conteúdo
era em Flash um tipo de arquivo que deixa o site pesado e não é acessível nos
dispositivos moveis (Tablet, Smartphone), além de tudo os buscadores tem
muita dificuldade de indexar esses arquivos. O método foi criar imagens e
substituir os arquivos Flash, as imagens são arquivos mais leves e mais fáceis
de serem abertas independentes dos dispositivos usados pelo usuário, às
imagens foram adicionas no cabeçalho do site com título definidos e fazendo
referencia aos menus clicados pelos visitantes. Exemplo: Menu Empresa um
cabeçalho com imagem relacionado à empresa e assim por diante.
Veja o cabeçalho alterado:
Figura 23 – Cabeçalho alterado.
43
Ainda no cabeçalho foi aplicado título, meta tags e palavras chaves, dando uma
identidade para cada pagina, e facilitando a indexação nos buscadores
contribuindo nos processos de visibilidade, métodos que importantes numa
pagina web e que não tinha no site. Nas imagens foram aplicadas as palavras-
chaves na tag <alt> e os títulos na tag <title> visando os processos de
indexação e acessibilidade dos usuários.
Veja as figuras:
Figura 24 – Código-fonte cabeçalho antigo.
Figura 25 – Código-fonte cabeçalho alterado.
Figura 26 – Palavras-chaves e Títulos nas imagens.
44
4.1.3 Conteúdo do site
O conteúdo do site é o ponto principal para manter ou não o visitante
na pagina, para melhorar o design e a usabilidade foram desenvolvidos
diversos métodos e usados varias ferramentas que contribuíram para o objetivo
final. As alterações foram feita de modo que o usuário se sinta atraído e
possivelmente retorna ao site mais tornar para preencher um formulário,
assinar um Newsletter, mandar um e-mail ou ainda ligar para falar com nossa
equipe. Observe o site antigo na figura abaixo e análise o conteúdo:
Figura 27 – Conteúdo do site antigo.
A fim de melhorar a usabilidade foi elaborado um mapa do site
contendo todas as paginas em uma pagina só, com a ajuda do Adobe
Dreamweaver CS6 a pagina foi criada em formato HTML e incrementado na
barra lateral do site. Os menus das laterais foram alterados por imagens mais
atrativas, com auxilio do Adobe Photoshop foi possível criar imagens adaptada
a cada menu e chamando a atenção do usuário com o design diferente. Sem
contar que foi adicionado mais um menu referente a copa 2014 com as cores
45
do Brasil, no Adobe Dreamweaver CS6 foi possível ajustar os menus e
padronizar em tamanhos, links e fontes.
Um newsletter seria uma forma de obter o contato do usuário com mais
facilidade, para possíveis contatos futuros, o que ate então não tinha na pagina
a newsletter foi criada através do Adobe Dreamweaver CS6, e direcionada para
o e-mail do departamento de TI e marketing com o objetivo de avaliar esses
contatos e assim retornar ao usuário cadastrado alguma informação.
Veja o código em ASP.NET da criação da Newsletter
Figura 28 – Estrutura do newsletter inserida no site.
Um problema que foi analisado e detectado foi o número alto de
telefonemas constantes de clientes, fornecedores, transportadoras e visitantes
que queria chegar à empresa mais não encontrava o endereço, muito menos o
mapa de localização. Usando a ferramenta Google Places foi possível criar um
46
perfil da empresa e disponibilizar o mapa e diversas informações como
produtos, contatos, horários de funcionamento para os visitantes ou quem
procurasse o endereço da empresa. Além de ter o nome da organização no
maior buscador atualmente (Google) favorecendo nas pesquisas e indexação.
Com o intuito de facilitar ainda mais o acesso ao mapa, usando o
Adobe Photoshop e criando em imagem em formato .GiF (Formato de imagem
para web) que chama a atenção para a informação, levando o usuário ao perfil
no Google Places através da URL adicionada a imagem e visualizando o mapa
da empresa.
Veja a figura do perfil no Google Places:
Figura 29 – Perfil da empresa no Google Places.
47
A empresa queria disponibilizar seus produtos de forma mais atrativa,
interativa e cativante aos olhos do usuário, e na análise feita percebemos que
os concorrentes diretos já possuíam catálogos digitais em suas paginas web. A
ferramenta usada é um site de compartilhamento de arquivos em formato de
catálogos digitais uma mídia social e gratuita. A fim de aumentar seu Market
Share e esta na frente dos concorrentes, foi criado um perfil nesse e em mais
dois sites de compartilhamento de arquivos, o que por ventura os concorrentes
não usam, dando possibilidade de escolhas aos clientes e usuários. As
ferramentas usadas foram o Calaméo, SlideShare e Issuu.
Veja o Perfil no Calaméo, e os catálogos que foram acrescentados no
site. A ferramenta armazena arquivos em vários formatos, Power Point, PDF
etc. No caso do projeto os catálogos foram criados no Power Point, com auxilio
do Corel Draw e Adobe Photoshop e salvo em PDF e armazenado na mídia
que gera um arquivo em formado de catálogo digital, com opções de gerar o
código HTML para ser colocado nas paginas do site, gerar um URL, ou
compartilhar por e-mails ou redes sociais.
Figura 30 – Perfil do Calaméo – Ferramenta dos catálogos digitais.
48
Nessa ferramenta podemos definir as informações da empresa e
disponibilizar os contatos, descrições referente a empresa/produto além tudo
podem contribuir muito nos processos de visibilidade nos buscadores, pois são
estabelecidas e definidas as palavras-chaves relacionadas a empresa/produto.
Veja as palavras referentes ao Grupo Up10
Figura 31 – Palavras-chaves no Calaméo.
SlideShare e Issuu são ferramentas semelhantes e muito favoráveis nos
processos de marketing de busca. Veja os perfis de cada uma com as
informações do Grupo Up10.
49
Figura 32 – Perfil do SlideShare – Ferramenta dos catálogos digitais.
O SlideShere muito conhecido no Brasil por sua rica fonte de
informações dos mais variados assuntos.
Figura 33 – Palavras-chaves no SlideShare.
Perfil no Issuu, ferramentas de documentos digitais é usada por milhares
de empresa em todo mundo.
50
Figura 34 – Perfil do Issuu – Ferramenta dos catálogos digitais.
Na pagina principal do site foi aplicado os catálogos da ferramenta
Calaméo, os catálogos é uma forma simples de visualizar os principais
produtos da empresa, dividido em duas linhas (Confecções e Importados), o
visitante pode visualizar clicando nos ícones ou acessando o perfil do Grupo
Up10 na mídia (Calaméo). Veja como ficou a pagina principal do site depois
das alterações.
51
Figura 35 – Conteúdo do site alterado.
4.1.4 Rodapé
Carente de mudanças o rodapé do site estava apagado em nada
chamava a atenção dos usuários. As mudanças foram destacar os contatos da
empresa (telefones, e-mail, mídias e redes sociais). Veja o rodapé antigo.
Figura 36– Rodapé do site antigo.
As alterações no rodapé contaram com nuvem de tag, ou seja, uma
nuvem de palavras-chaves relacionadas a todas as paginas do site, o objetivo
principal dessa nuvem foi a geração de links que contribuirão para os
processos de marketing de busca, a o arquivo foi gerado em um gerador de
nuvem de palavras-chaves, gerando um código em HTML ou em Flash para
ser acrescentado no site, caso do projeto como o intuito não direcionado
52
exclusivamente aos usuários foi adicionado ao rodapé em formado Flash, já
que não afeta usabilidade do usuário mesmo se não for executado.
A ferramenta usada foi um site chamado tagcloud.
Figura 37 – Tag Cloud - criação de nuvem de tags.
.
Todas as Mídeas sociais e blogs serao citada nos processos de
visibilidade e que foram engrementada no site para atrair o publico digital.
Veja como ficou o rodapé como todas essas alterações acima:
Figura 38 – Rodapé do site alterado.
4.2 Processos de visibilidade web
A visibilidade de uma informação publicada na web é a medida da
facilidade com que os utilizadores da web a encontram e interpretam. É
necessário fazer com que as páginas na web sejam visíveis, para que todas as
pessoas possam facilmente encontrar a informação nelas contida. Existe
alguns fatores que precisa ser levado em consideração para fazer com que as
53
páginas sejam visíveis e atrativas, o design a usabilidade e otimização de
serviços de pesquisas, seja dentro do site (On page) no codigo fonte, ou fora
do site (off Page) mídias sociais.
As melhorias no design e os métodos de usabilidade aplicados acima
nos possibilita desenvolver a otimização (SEO) para os mecanismos de busca,
e a princípio os processos de otimização dentro do site já foram iniciados juntos
com as melhorias no design e usabilidade. A definição de títulos nas páginas,
as meta-tags e descrições é a base para a otimização onpage.
Na análise feita do site Grupo Up10 o usuário encontrava o site por três
métodos, como mostra o diagrama UML de caso de uso.
Telefone
Browser SITE
Fazer pedido
Conhecer a empresa
Figura 39 – Diagrama UML antes do projeto.
O primeiro passo é analisar como esta o site de acordo as normas
W3C, organização de padronização do World Wide Web, a avaliação nesse
órgão dará a ideia de como esta nosso código e como melhorar seus erros
para serem encontrados com mais facilidade pelos buscadores. No projeto
esse procedimento foi analisado e concluímos que o codigo do site é antigo e
muitos das mudanças poderiam afetar o seu funcionamento. Foram alterados
poucas coisas mais adicionados componentes que favorece a otimização.
54
Veja a avaliação na figura abaixo:
Figura 40 – Validador W3C.
Escolher as palavras-chaves é fundamental para a otimização, a
ferramentas mais apropriada, e usada nesse projeto foi o Google AdWords,
observe a relevância da palavra brindes, umas das palavras-chaves escolhidas
para a otimização nos motores de busca. Essa relevância mostra quantas
vezes essa palavra foi digitada no campo de pesquisa do buscador (Google).
Figura 41 - Tela do Google Keyword Tool.
55
Para o desenvolvimento da otimização On page algumas ferramentas
são chaves nesses processos, o Adobe Dreamweaver o principal gerenciador
de websites atualmente, nele podemos fazer a conexão aos arquivos do
servidor e definir as meta-tags, palavras-chaves e entre outras infinitas
utilidades. Nosso servidor de hospedagem é a Locaweb, como mostra a figura
abaixo o painel de controle do site dentro do servidor:
Figura 42 – Painel do Servidor Locaweb.
Outras ferramentas usadas para a otimização com o apoio sempre do
Adobe Dreamweaver foram um gerenciador de arquivos FTP, ou seja, a
ferramenta tem a função de conectar ao servidor de hospedagem, o FileZilla é
um software gratuito e muito usado para fazer upload e download de arquivos
na web. Outra ferramenta foi o XML-Sitemap.com, um gerenciador de
sitemap.xml, arquivo fundamental para os motores de buscas encontrar o site
na web. O sitemap.xml é um arquivo gerado nessa ferramentas, através da
URL oferecida para o mapeamento. Quando gerado o arquivo é colocado na
raiz do site, através de um gerenciador de arquivos FTP (Adobe Dreamweaver,
FileZilla, etc.).
56
Veja abaixo as telas do FileZilla e do o XML-Sitemap.com:
Figura 43 – Painel do FileZilla – gerenciador de FTP.
57
Figura 44 – Painel do XML-Sitemap.
As ferramentas web essenciais para se ter um acompanhamento dos
processos de otimização e alavancar os resultados de forma controlada e
monitorada são: Google Webmaster e Bing Webmaster, ferramentas muito
similar e fundamental nesse projeto. O Google Analytics que monitoras as
visitas teve seu papel no controle e monitoramento de usuários e visitantes,
essa ferramenta gratuita do Google gera o código que é acrescentados nas
páginas que desejamos acompanhar o trafego de visitas. Nesses gráficos são
apresentados os visitantes novos e os que voltaram ao site. No projeto a
ferramenta é usada na pagina principal do site, e todo o trafego do site é
disponibilizado no provedor de hospedagem (Locaweb).
58
Veja o painel do Google Analytics com o trafego da pagina principal do
site Grupo Up10.
Figura 45 – Painel do Google Analytics.
O Bing Webmaster é uma ferramenta da Microsoft gratuita, usada para
monitorar e otimizar as paginas web, mais nesse projeto será detalhado o
Google Webmaster e todos os métodos foram aplicados também no Bing.
Veja o painel do Bing Webmaster com o site Grupo Up10:
Figura 46 – Painel do Bing Webmaster.
59
O Google Webmaster monitora a otimização interno e externo do site,
o arquivo sitemap.xml gerado e colocado na raiz do site é adicionado no painel
do Google Webmaster, vinculando o site ao buscador no caso Google, com
essa conexão podemos também enviar as paginas do site manualmente no
painel da ferramenta, observe os procedimentos realizados com o site Grupo
Up10. Veja o processo realizado com o arquivo sitemap.xml
Figura 47 – Painel do Google Webmaster – Com conteúdo do sitemap.xml.
60
Veja o processo de enviar a URL manualmente para o buscador avaliar
e possivelmente indexar em sua base de dados, esse métodos pode ser feito
diariamente com um limite máximo de dez URL enviadas para o índice dos
buscadores, no Bing é o mesmo processo manualmente dez URL por dia.
Veja o processo no Google Webmaster com as páginas do site Grupo
Up10:
Figura 48 – Painel do Google Webmaster – com as URLs enviadas ao buscador.
4.2.1 Blog interno (Subdomínio)
A otimização On Page, mais dentro de um subdomínio da raiz do site
principal, o blog feito em HTML com a função de indexar nos motores de
busca, com um código limpo e leve, o blog possui apenas duas páginas sendo
a home e contato, os outros menus são direcionados para o site principal, esse
duas páginas tem suas funções fundamentais, a home criado para ser
indexada nos buscadores com todo um conjunto de informações no cabeçalho
do código-fonte. A página contato possui um formulário que quando preenchido
as informações são enviada para outra ferramenta a de e-mail marketing,
usada para fazer a otimizaçao Offpage. O blog foi desenvolvido no Adobe
Dreamweaver, e colocado numa subpasta dentro do servidor de hospedagem
através do gerenciador de FTP o FileZilla.
61
As figuras abaixo representa a estrutura do blog.
Figura 49 – Painel do Bing Webmaster.
Figura 50 – Painel do Blog interno Grupo Up10.
A ferramenta de e-mail marketing usada para fazer as campanhas e
atrair visitas é a E-goí, uma ferramenta que pode ser usada gratuita ou paga,
oferecendo todos os métodos de e-mail para criar campanhas e formulários
para captar contados.
62
Veja as campanhas realizadas com o E-goí:
Figura 51 – Painel de campanhas no E-goí.
4.3 Otimização Off-page
A importância de gerar informação da organização dos produtos em
outras páginas com links que levam ao site principal faz parte do SEO Offpage,
No projeto a criação de varias pagina com links do site principal foram
fundamentas para atingir os objetivos e aumentar as visitas no site. Os blogs
feitos em ferramentas gratuitas e abastecidos com informações diárias dos
produtos e da empresa, seguido todo um planejamento de definir palavras-
chaves, títulos específicos e informações chamativas em cada post
desenvolvido dentro de cada blog.
Os blogs têm ótimas vantagens nos processos de otimização de
paginas na web, por serem ferramentas já conhecidas pelos motores de busca,
os resultados pode ser muito mais rápido que em uma pagina de um website
normalmente feita em software físico, ou seja, fora na internet que precisa ser
apresentado aos buscadores a sua existência.
As ferramentas usadas foram a Blogger, Wordpress e Tumblr, as
principais quando se trata de blog na web.
63
O Blogger ferramenta do Google para criação de blogs, na figura
abaixo mostra as palavras-chaves (marcadores) usados para os motores de
busca e o título em uma das postagens.
Figura 52 – Conteúdo do Blog Grupo Up10 no Blogger.
Esse blog indexa muito rápido no Google principalmente, observe sua
colocação no buscador Google, é o segundo link referente à palavra chave
Grupo Up10:
64
Figura 53 – Blog Grupo Up10 nos resultados de busca.
Figura 54 – Blog Ability Brindes no Blogger.
Worpress e Tumblr são ferramentas poderosas para a criação de blogs
que foram usadas para atrair visitas para o site:
65
Veja os perfis nas ferramentas:
Figura 55 – Blog Grupo Up10 no Tumblr.
Blog Wordpress elaborado bem no final do projeto, focando a Copa
2014, o blog vem gerando visitas para o site principal, lembrando que o
Wordpress é a maior e melhor ferramenta de criação de blogs, com grande
relevância nos motores de busc
Figura 56 – Blog Grupo Up10 no Wordpress.
4.3.1 Social media Marketing (SMM)
Realiza um trabalho nas mídias sociais é algo importantíssimo para o
marketing de busca. As redes sociais permitem a criação de um novo mundo,
onde as pessoas podem se conectar com mais indivíduos do que conseguiriam
no mundo off-line, escrever livremente e alcançar vários amigos ao mesmo
66
tempo, procurar opiniões sobre produtos, eventos e muito mais. Para as
empresa pode ser a chave para novos clientes e faturamentos. Destacando a
seguir as mídias digitais usadas para otimização e expansão do site e da
empresa Grupo Up10.
O Facebook é a maior plataforma na atualidade, com mais de um
bilhão de usuários no mundo inteiro, e a mais acessada no Brasil. Criar uma
fan page no Facebook, além de criar um alto engajamento com os usuários,
pode ainda aumentar o tráfego para o site (contribuindo para
um PageRank mais alto). As definições de título, a introdução do site no topo
da página e links, hastag e descrições nas postagens são fatores que favorece
a otimização. Fan page do Grupo up10 preenchida para os processos de
buscas:
Figura 57 – Perfil Grupo Up10 no Facebook.
67
As postagens também com as técnicas de otimização
Figura 58 – Post no Perfil Grupo Up10 no Facebook.
Google+
Google+ rapidamente se tornou uma rede social muito acessada,
concorrendo com o Facebook, o Google+ é a rede social do Google o que
torna interessante usa-la para a otimização e geração de conteúdos das
empresas. A criação de comunidades pode ser o primeiro passo para crescer
dentro da rede, seguir e ser seguido é o move a os usuarios do Google+, no
projeto Grupo Up10 a comunidade no Google+ gera trafego e visitantes ao site.
68
Veja o perfil da comunidade
Figura 59 – Perfil Grupo Up10 no Google+.
Youtube
Montar uma estratégia de otimização para seus vídeos é uma tarefa
muito importante. Realizar a otimização no Youtube e tirar vantagens do
aumento das visualizações e, consequentemente, o posicionamento do seu
vídeo. Inclui palavras-chaves, descrições nos vídeos e compartilhar no site ou
nas outras mídias sociais. O Youtube por ser uma ferramenta do Google a sua
otimização é mais rápida, quando definidas todas as técnicas corretas o
resultado pode ser um grande número de visitas no site.
Veja as técnicas criadas no perfil Grupo Up10:
Figura 60 – Perfil Grupo Up10 no Youtube.
69
O título, a descrição e as palavras-chaves definidas em um dos vídeos
postados no perfil da empresa.
Figura 61 – Palavras-chaves no Youtube.
Os vídeos criados para o Youtube, são feito com conteúdos da
empresa na ferramenta também do Google chamado Picasa.
Figura 62 – Picasa – Criação de vídeos.
70
A grande vantagem do Twitter é a simplicidade. Por ser baseado em
mensagens curtas, a transmissão é muito rápida e objetiva. Por este motivo,
dificilmente um usuário irá vasculhar os tweets antigos de seu perfil, ou seja, a
frequência das postagens deve ser maior que em outras mídias sociais. Os
Perfis criados estão vinculados as outras mídias de blogs, com o objetivo de ter
sempre conteúdo no perfil do Twitter.
Figura 63 – Perfil Grupo Up10 no Twitter.
Figura 64 – Perfil Ability Brindes no Twitter.
71
Um perfil na mais nova de todas as mídias sociais pode ser a porta
para as novas tendências de comunicações digitais. O perfil Grupo Up 10
também pode ser acessado na rede criada para os dispositivos moveis.
Figura 65 – Perfil Grupo Up10 no Instagram.
Flickr
Além de compartilhamento de fotos, o Flickr proporciona a cada
imagem palavras-chave e links referente a imagem, produto, etc. As imagens
publicadas nesta classificação, e como os processos de SEO bem
estruturados são bem vistos pelos motores de busca. As fotos também podem
ser compartilhadas com os outras mídias ou publicada em blogs ou outros
aumentado a visibilidade e o tráfego. O Flickr também é um ótimo lugar para
interagir com outras pessoas que compartilham os mesmos interesses.
Figura 66 – Perfil Grupo Up10 no Flickr.
72
Figura 67 – Palavras-chaves no Flickr.
Formspring
O FormSpring.me pode ser uma ferramenta muito útil para
empresas também, porque criará uma base de perguntas e respostas de
forma orgânica. E mesmo não tanto usada como as outras já citadas,
proporciona um grande poder na otimização e indexação dos motores de
buscas.
73
Perfil Grupo up10 Formspring
Figura 68 – Perfil Grupo Up10 no Formspring.
Linkedin é uma rede social para contatos profissionais. Seu perfil é
composto por informações básicas, histórico profissional/escolar e habilidades
profissionais. Para uma empresa é sem dúvida a rede principal, com uma
estrutura para a criação de uma comunidade para a organização, uma página
com as informações, produtos e muitos detalhes da empresa produtos,
palavras-chaves e muito mais. Nossos processos de SEO é simplesmente
rápida na otimização e indexação.
74
Página com a comunidade Grupo Up10 no Linkedin.
Figura 69 – Perfil Grupo Up10 no Linkedin.
Figura 70 – Palavras-chaves no Linkedin.
75
Disponibilizar botões para compartilhar informações do site nas redes
sociais é permitir aos visitantes uma ótima forma de divulgação e tráfego, e
uma expansão da marca da organização. No site Grupo Up10 foi adicionado
dois botões somente na página de produtos que é a pagina mais importante
para gerar pedidos.
Veja abaixo os botões da rede de relacionamento Facebook:
Figura 71 – Botões do Facebook na página produto do site Grupo Up10.
4.3.2 SEO nos sites de anúncios
Um desafio novo nos processos de otimização são os site de anúncios,
no projeto teve sua contribuição e um retorno surpreendente, os procedimentos
são parecidos com os das mídias sociais, títulos bem elaborados, palavras-
chaves, vinculação com as mídias sociais, informações da empresa, imagens e
vídeos. O ideal é fornecer o máximo de informações possíveis sobre
empresa/produto em cada site de anúncios trabalhado, a frequência de
monitoramento e ajustes não é como em outros métodos, exemplo nas redes
sociais, os sites de anúncios têm seus processos de otimização, basta um
cadastro bem elaborado para começar a otimização nas buscas.
Abaixo os principais sites de anúncios trabalhos para os processo de
visibilidade nos mecanismos de buscas.
76
BrasilViaWeb
Figura 72 – Anúncio do Grupo Up10 – Brasil via web.
Lista Amarela
Figura 73 – Anúncio do Grupo Up10 – Lista Amarela.
77
VivAnuncios
Figura 74 – Anúncio do Grupo Up10 – VivAnuncios.
Classificados Brasil
Figura 75 – Anúncio do Grupo Up10 – Classificado Brasil.
Permulta Livre
Figura 76 – Anúncio do Grupo Up10 – Permulta Livre.
78
Classiaqui
Figura 77 – Anúncio do Grupo Up10 – Classiaqui.
Empresa do Brasil
Figura 78 – Anúncio do Grupo Up10 – Empresa do Brasil.
79
Guia de Serviços
Figura 79 – Anúncio do Grupo Up10 – Guia de Serviços.
Ilocal
Figura 80 – Anúncio do Grupo Up10 – Ilocal.
80
Guia Estadão
Figura 81 – Anúncio do Grupo Up10 – Estadão.
4.3.3 Parcerias com portais de Brindes
A empresa tinha algumas parcerias com portais de brindes, mais seu
perfil não era atrativo nesses sites, a função era formular essas informações
com o objetivo de convencer as pessoas a conhecer o site da empresa, a
empresa e seus produtos, com as informações estruturas (títulos, descrições e
palavras-chaves), e vinculada às redes sociais e a manutenção das imagens
dos produtos semanalmente, construíram para o aumento de trafego, aumento
de pedidos e vendas.
Veja os portais usados para aumentar as vendas Grupo Up10.
Figura 82 – Anúncio do Grupo Up10 – Portal Bríndice.
81
Figura 83 – Anúncio do Grupo Up10 – Portal eBrindes.
Figura 84 – Anúncio do Grupo Up10 – Portal Guia Personalizado.
Figura 85 – Anúncio do Grupo Up10 – Portal Brindes.com.
82
4.3.4 Ferramentas Complementares
Existem diversas ferramentas para a realização dos processos de SEO
de forma automática, o que pode ser muito favorável para incrementar os
processos de marketing de busca, a ferramenta Attracta contribui para a
otimização do site e dos blogs criados nos decorrer do projeto Grupo Up10. O
Attracta funciona de forma simples, a ferramenta que é gratuita recebe uma
URL e envia para os motores de buscas. Obseve o Painel do Attracta usado
no departamento de TI da empresa Grupo Up10.
Figura 86 – Painel da ferramenta Attracta SEO.
83
Google Gool.gl
Outro método que gerou e gera trafego para o site é o código QR Code
gerado na ferramenta Gool.gl do Google, o QR Code é uma tendência nova e
crescente como um jeito simples e rápido de se conectar a uma determinada
página web. Na ferramenta é adicionado a URL, que gera o código QR Code.
Esse código gerado com o site Grupo Up10 foi disponibilizado na web em seus
folders e e-mails e também em todas as embalagens dos produtos da
empresa. Veja a ferramenta Goo.gl
Figura 87 – Painel da ferramenta Goo.gl.
Figura 88 – Código QR Code do site Grupo Up10.
84
Com as aplicações das ferramentas e os métodos mencionados acima,
um novo diagrama UML mostra como os usuários chegam ao site, a
incrementarão possibilita um numero de trafego por meios das inúmeras
possibilidade de acesso.
Esta UML representa o caminho que o usuário realizara para chegar ao site e
realizar possíveis atividades:
Telefone
Browser SITE
Buscadores
Mídias Sociais
Sites de Anúncios
E-mail Marketing
Blogs
QR Code
Catálogos Digitais
Portais de Brindes
Fazer Pedido
Cadastrar Newsletter
Preencher Formulário
Conhecer a empresa
Usuário
Figura 89 – Diagrama UML de Caso de Uso – Após as melhorias.
85
4.4 Resultados
Os resultados começaram com apenas dois meses do início do projeto
com um aumento gradativamente de páginas indexadas nos buscadores, e
consequentemente o trafego de visitante no site aumentou também. A
monitoração de todos os processos de visibilidade em todas as ferramentas
proporcionou os ajustes e atenção para cada método aplicado.
A ferramenta Google Webmaster deixou claros os resultados em
relação aos números de paginas rastreados e indexados nos buscadores e
principalmente no buscador Google. O painel de resultados e a tabela mostram
esses números que era zero antes das aplicações de SEO.
Figura 90 – Resultados no Google Webmaster.
A tabela mostra esse índice com mais detalhes, notamos que não
existia nem uma pagina indexada no buscador, e com um pouco mais de 30
dias foi registrado 55 páginas indexada no índice do buscador Google.
86
Veja a tabela com os dados do Google Webmaster
Data
Total de páginas indexadas
Já rastreadas
Bloqueadas por robôs Removidas
25/11/12 0 1 0 0
2/12/2012 0 1 0 0
9/12/2012 0 1 0 0
16/12/12 0 1 0 0
23/12/12 0 1 0 0
30/12/12 0 1 0 0
6/1/2013 0 1 0 0
13/01/13 0 1 0 0
20/01/13 0 1 0 0
27/01/13 0 1 0 0
3/2/2013 0 1 0 0
10/2/2013 0 1 0 0
17/02/13 0 1 0 0
24/02/13 0 1 0 0
3/3/2013 0 1 0 0
10/3/2013 0 1 0 0
17/03/13 0 1 0 0
24/03/13 0 1 0 0
31/03/13 0 1 0 0
7/4/2013 0 1 0 0
14/04/13 0 1 0 0
21/04/13 0 45 0 0
28/04/13 0 45 0 0
5/5/2013 55 187 0 0
12/5/2013 40 258 0 0
19/05/13 63 289 0 0
26/05/13 92 311 0 0
2/6/2013 111 339 0 0
9/6/2013 137 367 0 0
16/06/13 162 400 0 0
23/06/13 185 432 0 0
30/06/13 230 476 0 0
7/7/2013 258 564 0 0
14/07/13 303 625 0 0
21/07/13 337 668 0 0
28/07/13 298 674 0 0
4/8/2013 286 687 0 0
11/8/2013 290 707 0 0
18/08/13 311 734 0 0
25/08/13 338 760 0 0
1/9/2013 320 808 0 0
8/9/2013 300 837 0 0
15/09/13 247 867 0 0
22/09/13 195 910 0 0
29/09/13 226 1132 0 0
Figura 91 – Resultados no Google Webmaster em tabela
87
Nesse outro resultado a ferramenta mostra as palavras mais
procuradas que levou o visitante ao site.
Figura 92 – Resultados no Google Webmaster relevância de Palavras-chaves.
88
Nesse resultado a Google Webmaster registra quais caminhos os
usuários usarão para chagar ate o site, e podemos notar que existe pelo nos
sites nos quais foram inseridos informações para os processos de SEO.
Figura 93 – Resultados no Google Webmaster tráfego de domínio.
89
Para ter o resultado de quantos links do site possui espalhado na
internet e direcionando o usuário a página principal basta fazer a seguinte
pesquisa.
Veja o resultado na figura abaixo:
Figura 94 – Resultados no Google dos links direcionados ao Grupo Up10.
É importante destacar que os processos bem elaborados, como nesse
projeto, afeta todos os buscadores na web, por terem um sistema de robôs de
busca muito parecidos e com as mesma funções, que é de vasculhar a internet
e indexar as páginas relevante a um determinado assunto, as técnicas são
elaboradas para todos os buscadores. Centralizamos sempre nos principais
que são Google, Bing e Yahoo.
90
Nas figuras abaixo mostram os resultado nesses três principais
buscadores em relação ao site Grupo Up10, seis meses do início do projeto.
Figura 95 – Resultados no Google referente ao nome da empresa.
91
Bing
Figura 96 – Resultados no Bing referente ao nome da empresa.
92
Yahoo
Figura 97 – Resultados no Yahoo referente ao nome da empresa.
93
O objetivo do projeto vai além de atrair visitas, o resultado maior é fazer
essas visitas voltarem e realizar pedido gerando vendas para a empresa e
faturamentos. Nos resultados obtidos através do provedor de hospedam do site
(Locaweb) mostra exatamente que mais de 50% voltaram para o site e
possivelmente solicitarão pedidos, conectou em alguma rede social da
empresa, visualizou os catálogos digitais ou entrarão em contato com empresa
por e-mail ou telefone. Os gráficos mostram os seis meses da realização do
projeto comparado aos outros anos em 2011 e 2012.
Vejamos os números totais de visitas no site nesses períodos.
2011
Figura 98 – Resultados de visitas referentes a 2011.
Figura 99 – Resultados de visitas referentes a 2012
94
Em 2013 com a realização do projeto obtiveram-se resultados
expressivos e o mais importante manteve o usuário fiel no site na empresa. O
crescimento de visitas, de pedidos, de vendas e de faturamento acelerou seu
crescimento no mercado como todo, superando alguns concorrentes,
conquistando novos clientes e novos fornecedores.
Observe os relatórios de 2013, especificamente os seis meses de abril
a setembro e veja os resultados.
Figura 100 – Resultados de visitas referentes a 2013.
Um resumo desses relatórios mostra o quanto foi importante os
processos de melhorias no design e os métodos de usabilidade e as técnicas
de visibilidade.
A tabela representa o número total de visitantes em anos diferentes:
Ano Totais Média Mês
2011 28598 4766
2012 25049 4174
2013 67841 11306
Figura 101 – Tabela de visitas ao site.
95
Representação Gráfica
Figura 102 – Gráfico de visitas ao site.
O departamento financeiro comprova como o projeto surtiu efeitos nos
pedidos vendas e no faturamento da empresa nesse período.
0
10000
20000
30000
40000
50000
60000
70000
80000
2011 2012 2013
Totais
Média Mês
96
Veja o gráfico comparado os mesmos períodos em anos anteriores e
em 2013.
Figura 103 – Gráfico de pedidos, vendas e faturamento em anos diferentes.
As principais ferramentas web citadas nesse projeto podem ser
acessadas no link abaixo, criando um controle interno e acesso rápido as
ferramentas.
www.grupoup10.com.br/links
Assim como o site antigo e o mapa do site, podem ser acessados nos
links.
www.grupoup10.com.br/siteantigo
www.grupoup10.com.br/mapadosite
0%
10%
20%
30%
40%
50%
60%
70%
80%
Pedidos Vendas Faturamentos
2011
2012
2013
97
O final do projeto mostra os custos para sua realização do mesmo e os
possíveis faturamentos no mesmo período da sua realização.
Ficha de Custos Projeto
Quantidades Equipamentos Valores
1 Computador R$ 3.000
Software
0 Software R$ 0,00
Desenvolvimento
700 h Serviços R$ 10,000
Valor Total
R$ 13.000
Responsável pelo Projeto
Ailton Sousa
Responsável pelo Desenvolvimento
Ailton Sousa
Empresa
Grupo Up10
Diretor Comercial
Alexandre Carbonero
Figura 104 – Ficha de custo do projeto Grupo Up10.
98
5 Conclusão A Tecnologia da Informação é um complemento fundamental nos
processos de negócios de qualquer organização, é adotada cada vez em todos
os setores empresarial gerando visões próprias da realidade objetiva e
estabelecendo mudanças em todos os aspectos organizacionais.
As informações existem em todas as empresas, estruturadas ou não,
muitas não conhece o valor das mesmas, e ver a Tecnologia da Informação só
como custo para empresa, e não como um fator chave para a organização. O
projeto cria um sistema de informação em múltiplas plataformas disponíveis na
web, sincronizando todos os dados de forma organizada e objetiva para atingir
uma meta, ou seja, atende o negócio de forma planejada e o cliente de forma
de maneira simples mais atrativa para o objetivo.
A tecnologia da informação é indispensável para a empresa moderna,
tanto como ferramenta de pesquisa, desenvolvimento de produtos, como para
subsídio ao seu planejamento estratégico, avanço e disputa de espaço na
economia globalizada. As tecnologias são atualizadas muito rapidamente e os
processos de mudanças precisam ser rápidos também, o mercado é cada vez
mais disputado por grandes e pequenos.
Ferramentas são usadas para diminuir a distancia entre clientes e
empresa, os Sistemas de Informação criam métodos e técnicas para o negócio
e para o cliente do negócio. Observar e analisar todo o ambiente micro/macro
de suas áreas não exploradas é o primeiro passo para montar um
planejamento de crescimento e expansão dentro e fora da organização.
Contudo as ferramentas aplicadas nesse projeto aumentou a visão de
como a Tecnologia da Informação deve ser ponto principal da empresa,
reorganizando seus processos e valorizando suas informações.
99
6 Glossário
A
Abstração: É o ato de abstrair, ou seja, isolar mentalmente para considerar à parte um
elemento de representação que não é dado separadamente na realidade.
C
Caracteres: Qualquer número, símbolo, letra do alfabeto, sinal de pontuação etc. que se
possa fazer aparecer na tela do computador usando seu teclado (denominação genérica) (é,
originalmente, a palavra caráter/caracteres degradada por suposta especialização).
Codificar: Reunir leis em código.
E
Escopo: É tudo aquilo que contempla um projeto de um produto ou serviço.
Nesse escopo do projeto também está incluído e definido aquilo que não faz parte do mesmo.
F
Flexibilidade: Aptidão do espírito para se aplicar a diversas ocupações.
Docilidade para ceder à vontade alheia.
L
Leiaute: Esboço ou anúncio que, contendo o trabalho final, deverá ser apresentado para a
aprovação do cliente (antes de ser reproduzido), contendo a organização dos aspectos mais
importantes a serem apresentados como: títulos, ilustrações, fontes, diagramação etc.
M
Market Share: Proporção relativa ao envolvimento nas vendas de um determinado produto
que está a ser comercializado. Parte das vendas relativas a esse produto.
Microsoft: é uma empresa multinacional de tecnologia e informática dos Estados Unidos,
que desenvolve e vende licenças de softwares, fabrica eletrônicos de
consumo como videogames e dá suporte a vários produtos e serviços relacionados,
predominantemente, com a computação.
Microsoft Access: Gerenciador de banco de dados.
Microsoft SQL Server: sistema gerenciador de Banco de dados relacional desenvolvido
pela Microsoft.
100
Mysql: é um sistema de gerenciamento de banco de dados (SGBD), que utiliza a
linguagem SQL.
O
Oracle: Sistema gerenciador de banco de dados.
Otimização: Ação de produzir condições apropriadas para o melhor desenvolvimento de
alguma coisa: otimização de um produto.
Mecanismos: Combinação de órgãos ou de peças dispostos de maneira que se obtenha um
resultado determinado.
P
Portfólio: Agrupamento de várias obras artísticas, fotos; utilizado para divulgação de algum
trabalho.
S
Secundário: Que, ou o que é de segunda ordem; que ocupa o segundo lugar em ordem,
graduação ou qualidade relativamente a outrem ou outro: desempenhar papel secundário na
peça.
V
Vetoriais: Espaço vetorial, estrutura de um conjunto cujo modelo é fornecido pelas
propriedades dos vetores livres do espaço.
Visibilidade: Propriedade pela qual os corpos são percebidos pelo sentido da vista.
Fonte: http://www.dicio.com.br
101
7 Referências bibliográficas ANDRADE, Marcos Serafim de. Adobe Photoshop CS5. 1ª ed. São
Paulo: Senac, 2010. ALBERTIN, Alberto Luiz Comércio Eletrônico. 6ª. ed. São Paulo:
Atlas, 2010.
CARMONA, Tadeu. Segredos do Google. 2ª ed. São Paulo: Digerati Books, 2006.
CORNACHIONE Jr., Edgard B. Informática aplicadas às áreas de
contabilidade, administração e economia. 3ª ed. São Paulo: Atlas, 2001.
CUNHA, Ricardo Oliveira. Dominando o CorelDRAW X5 1ª ed. Caratinga: Ricardo Oliveira Cunha, 2012.
FELIPINI, D. Como colocar seu site na primeira página do Google. 2ª
ed. Rio de Janeiro: Brasport, 2012.
FLATSCHART, Fábio Adobe Flash CS6. 1ª ed. São Paulo: Senac, 2013.
FREEMAN Elisabeth / Eric, Use a cabeça! Html com Css e Xhtml, 2ª
ed. Rio de Janeiro: Alta Books, 2008. GABRIEL, Martha. Marketing na Era Digital conceitos, plataformas e
estratégias. 1ª ed. São Paulo: Novatec, 2010. GABRIEL, Martha. Sem e Seo: Dominando o marketing de busca. 2ª
ed. São Paulo: Novatec, 2012. GIL, Antônio Carlos, Como elaborar projetos de pesquisa. 4ª ed. São
Paulo: Atlas, 2002.
GOMES, Ana Laura. Adobe Dreamweaver CS6. 1ª ed. São Paulo:
SENAC, 2013. GOMES, Lucinéia. Curso Essencial do Google. 1ª ed. São Paulo:
Digerati Books, 2009. GOOGLE, Manual de Otimização de sites para Mecanismos de
Pesquisa (SEO), 2009. Disponível no endereço: https://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/pt-BR//intl/pt-BR/webmasters/docs/guia-otimizacao-para-mecanismos-de-pesquisa-pt-br.pdf Acessado dia 13/10/2013.
102
INSTITUTE, Project Management Conhecimento em gerenciamento de
projetos (Guia PMBOK) 4ª ed. São Paulo: Saraiva, 2012.
KRUG, Steve. Não Me Faça Pensar. 2ª ed. Rio de Janeiro: Atlas
Books, 2008. LEDFORD, Jerri L. SEO – Otimização para Mecanismos de Busca -
Bíblia. 2ª ed. Rio de Janeiro: Atlas Books, 2008. LENGSTORF, Jason Pro PHP e jQuery. 1ª ed. Rio de Janeiro: Ciência
Moderna, 2011.
OLIVIERO, Carlos A. J. Faça um site: PHP 5.2 com MySQL 5.0: Comércio eletrônico: orientado por projeto. 1ª ed. São Paulo: Érica, 2010.
PIMENTEL, Andrey Ricardo Projeto de Software Usando a UML,
Apostila para Curso de Projeto de. Sistemas Orientado a Objetos. julho de 2007. 64 folhas (Trabalho acadêmico) Universidade federal do Paraná, Paraná Disponível: http://www.inf.ufpr.br/andrey/ci221/apostilaUml.pdf acessado dia 14/05/2013.
PRESSMAN, Roger S. Engenharia de Software Uma Abordagem Profissional. 7ª ed. Porto Alegre: Amgh, 2011.
SANTOS, Aldemar de Araújo Informática na empresa. 5ª ed. São
Paulo: Atlas, 2009. SIMON, Robinson. Profissional C# - Programando – De programador
para programador. 2ª ed. São Paulo: Pearson Education, 2004. TELLES, André A Revolução das Mídias Sociais. 2ª ed. São Paulo:
M.Books do Brasil, 2011.
XAVIER, Gley Fabiano Cardoso. Lógica de Programação. 1ª ed. São Paulo: Senac, 1999.
103
O AUTOR
Ailton Pereira Sousa nasceu no dia 25 de junho de 1986, no estado da Bahia.
Migrou para São Paulo em 2005, morando na cidade de Guarulhos, fez vários
cursos na ária de informática, buscando sempre realizar seus sonhos e
objetivos pessoais e profissionais.
Em 2010 começou a realização de um dos seus maiores sonhos a faculdade,
quatro anos de foco e determinação e meta concluída com a conclusão e
aprovação desse trabalho. Recebendo o título de Bacharel em Sistemas de
Informação no Centro Universitário Metropolitano de São Paulo, FIG–Unimesp.
Blog: www.focadoemti.com.br Site: www.ailtonsousa.com.br Skype: ailton.ti
“Nunca tenha inveja de ninguém, lute e corra atrás do que você quer e um dia os outros terão inveja de você.” (Ailton P. Sousa).