TRABALHO DE CONCLUSÃO DE CURSO FIG - UNIMESP

Transcrição

1 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 / Orientador. Prof. Erwin Alexander Uhlmann GUARULHOS 2013

2 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

3 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.

4

5 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.

6 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.

7 Sumário 1 Introdução Empresa Fundamentação Teórica Conceito, Padrões e Normas Web World Wide Web O Endereço na rede Linguagem de Programação Código-fonte Asp.net Adobe Dreamweaver Adobe Photoshop Corel Draw Usabilidade Web Otimização Web Motores de Busca Google o maior buscador atualmente Search Engine Marketing (SEM) Search Engine Optimization (SEO) Escolhendo as palavras-chaves Links Otimização On-page Conteúdos e Estruturas das páginas Saturação (Search Engine Saturation - SES) Servidor do Site Sitemaps Otimização Off-Page SMM (Social Media Marketing) e SMO (Social Media Optimization) SMM (Social Media Marketing) Mídias Sociais Outras formas de Otimização Off-Page Landing page Conversão Monitoramento, Controle e Ajustes Internet no Ambiente Empresarial Conceitos do Projeto Planejamento UML (Unified Modeling Language) Matriz SWOT i

8 3.28 Escopo de projeto Desenvolvimento Design, Usabilidade e Visibilidade Fundo do Site Cabeçalho Conteúdo do site Rodapé Processos de visibilidade web Blog interno (Subdomínio) Otimização Offpage Social media Marketing (SMM) SEO nos sites de anúncios Parcerias com portais de Brindes Ferramentas Complementares Resultados Conclusão Glossário Referências bibliográficas ii

9 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 iii

10 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. iv

11 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. v

12 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 Figura 99 Resultados de visitas referentes a 2012 Figura 100 Resultados de visitas referentes a vi

13 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. vii

14 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

15 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 s 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.

16 3 2 Empresa A empresa Ability Brindes cadastrada no Cadastro Nacional de Pessoa Jurídica (CNPJ) / 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.

17 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 ( 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 s 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 - Ashtar - 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á

18 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.

19 6 Organograma da Empresa com a TI em destaque Presidente Tecnologia da Informação Secretaria Departamento Web Técnico Financeiro Vendas Parceiros Recursos Humano Diretoria Consultor de vendas Fabricas Gerente Assistente Vendedores Produção Assistente Figura 1 Organograma da empresa Grupo Up10.

20 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

21 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 ( 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 ( 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. ( 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

22 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

23 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: 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

24 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: 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 é quando criamos um Subdomínio tecnologia, uma

25 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á ou 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

26 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ódigofonte 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).

27 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).

28 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).

29 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) 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

30 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).

31 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) 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 palavraschave indicadas pelo utilizador, reduzindo o tempo necessário para encontrar informações (GABRIEL, 2012).

32 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

33 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: acessado dia 27/10/ 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

34 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: 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) 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

35 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).

36 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) 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 palavraschaves, 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

37 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) 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 palavraschaves, 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) 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).

38 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:

39 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=" 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 foto 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).

40 27 Exemplo do uso da tag title. <img src="[ nomedoseudomínio.com/suafoto.jpg]" alt="descrição da sua foto". title="nome da sua foto"./> 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) 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).

41 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) 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 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) 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

42 29 outros, aproximando a distancia entre pessoas de todas as partes do mundo (GABRIEL, 2012) 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) 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) 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).

43 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 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

44 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) 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

45 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) 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 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) Conversão 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). 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) 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,

46 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) 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) 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).

47 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) 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).

48 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).

49 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: acessada de 27/10/ 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

50 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 SITE 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.

51 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) Matriz SWOT Elaborada com base nas informações coletadas do ambiente interno e externo da empresa Grupo up10. Forças Fraquezas Interno Externo Grandes Variedades de Produtos; Padrões de atendimentos; Softwares Atualizados; Grandes Clientes; Grandes Parcerias; Comprometimento; Preços competitivos. Oportunidades 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. Participação de mercado; Marketing; Participação na Web; Pouco investimento em Tecnologia da informação; Orçamento limitado; Ameaças 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.

52 Escopo de projeto Melhorias no Site Grupo Up10 Planejamento Design Usabilidade Visibilidade Monitoramento Resultado Final Análise Cores Mapa do Site Palavras- Chaves Controle Vendas Requisitos Menus Catálogos Blogs Ajustes Faturamento Hardware Ícones Formulários Mídias Sociais Software CSS Anúncios Pessoas Imagens Catálogos Digitais Interna QR Code Externa Portais Web Documentaçao Ambiente Buscadores Figura 18 Escopo do Projeto.

53 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 Início Design Usabilidade Visibilidade Final Planejamento Aplicar Melhorias Criar Métodos Elaborar Técnicas Monitorar 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 tornalos 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.

54 41 Vejamos como foram realizados esses procedimentos e os resultados obtidos no decorrer do projeto. 4.1 Design, Usabilidade e Visibilidade 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.

55 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.

56 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 palavraschaves 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.

57 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 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

58 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 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

59 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.

60 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 s ou redes sociais. Figura 30 Perfil do Calaméo Ferramenta dos catálogos digitais.

61 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.

62 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.

63 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.

64 51 Figura 35 Conteúdo do site alterado 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, , 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

65 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

66 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. Fazer pedido Browser SITE Conhecer a empresa Telefone 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.

67 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.

68 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.).

69 56 Veja abaixo as telas do FileZilla e do o XML-Sitemap.com: Figura 43 Painel do FileZilla gerenciador de FTP.

70 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).

71 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.

72 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.

73 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 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 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.

74 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 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 para criar campanhas e formulários para captar contados.

75 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 palavraschaves, 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.

76 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:

77 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:

78 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 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

79 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. Facebook 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.

80 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.

81 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.

82 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.

83 70 Twitter 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.

84 71 Instagram 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.

85 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.

86 73 Perfil Grupo up10 Formspring Figura 68 Perfil Grupo Up10 no Formspring. Linkedin 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.

87 74 Página com a comunidade Grupo Up10 no Linkedin. Figura 69 Perfil Grupo Up10 no Linkedin. Figura 70 Palavras-chaves no Linkedin.

88 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 Up 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, palavraschaves, 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.

89 76 BrasilViaWeb Figura 72 Anúncio do Grupo Up10 Brasil via web. Lista Amarela Figura 73 Anúncio do Grupo Up10 Lista Amarela.

90 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.

91 78 Classiaqui Figura 77 Anúncio do Grupo Up10 Classiaqui. Empresa do Brasil Figura 78 Anúncio do Grupo Up10 Empresa do Brasil.

92 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.

93 80 Guia Estadão Figura 81 Anúncio do Grupo Up10 Estadão 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.

94 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.

95 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.

96 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 s 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.

97 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: Buscadores Blogs Mídias Sociais QR Code Fazer Pedido Usuário Cadastrar Newsletter Browser SITE Preencher Formulário Telefone Sites de Anúncios Conhecer a empresa Catálogos Digitais Marketing Portais de Brindes Figura 89 Diagrama UML de Caso de Uso Após as melhorias.

98 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.

99 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/ /12/ /12/ /12/ /12/ /1/ /01/ /01/ /01/ /2/ /2/ /02/ /02/ /3/ /3/ /03/ /03/ /03/ /4/ /04/ /04/ /04/ /5/ /5/ /05/ /05/ /6/ /6/ /06/ /06/ /06/ /7/ /07/ /07/ /07/ /8/ /8/ /08/ /08/ /9/ /9/ /09/ /09/ /09/ Figura 91 Resultados no Google Webmaster em tabela

100 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.

101 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.

102 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.

103 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. Google Figura 95 Resultados no Google referente ao nome da empresa.

104 91 Bing Figura 96 Resultados no Bing referente ao nome da empresa.

105 92 Yahoo Figura 97 Resultados no Yahoo referente ao nome da empresa.

106 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 ou telefone. Os gráficos mostram os seis meses da realização do projeto comparado aos outros anos em 2011 e Vejamos os números totais de visitas no site nesses períodos Figura 98 Resultados de visitas referentes a Figura 99 Resultados de visitas referentes a 2012

107 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 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 Figura 101 Tabela de visitas ao site.