ESTÁGIO CURRICULAR I E II MANUTENÇÃO E DESENVOLVIMENTODE UMA FERRAMENTA PARA AMELHORIA DE POSICIONAMENTO DAS PÁGINAS DA EMPRESA NOS

ALISSON PIERRE CLETO ROSA ESTÁGIO CURRICULAR I E II MANUTENÇÃO E DESENVOLVIMENTODE UMA FERRAMENTA PARA AMELHORIA DE POSICIONAMENTO DAS PÁGINAS DA EMPRESA NOS BUSCADORES (SEO) COM PHP, JQUERY, CSS E HTML EMPRESA: RENDER MULTIMÍDIA LTDA SETOR: SISTEMAS SUPERVISOR: JEFFERSON RAFAEL KOZERSKI ORIENTADORA: LUCIANA RITA GUEDES CURSO DE BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO CENTRO DE CIÊNCIAS TECNOLÓGIAS - CCT UNIVERSIDADE DO ESTADO DE SANTA CATARINA UDESC JOINVILLE SANTA CATARINA - BRASIL NOVEMBRO/2011

ii APROVADO EM.../.../... Professor Luciana Rita Guedes Mestre em Ciência da Computação Professora Orientadora Professor Gian Ricardo Berkenbrock Doutor em Engenharia Eletrônica e Computação Professor Rui Jorge Tramontin Junior Doutor em Engenharia Elétrica Jefferson Rafael Kozerski Supervisor da CONCEDENTE

iii Carimbo da Empresa UNIDADE CONCEDENTE Razão Social: Render Multimídia LTDA CNPJ: 01 567 425 0001-40 Endereço: Rua Ottokar Doerffel, 766 1 Andar Bairro: Atiradores CEP: 89.203-001 Cidade: Joinville UF: SC Fone: 3438-0900 Supervisor: Jefferson Rafael Kozerski Cargo: Coordenador de Sistemas ESTAGIÁRIO Nome: Alisson Pierre Cleto Rosa Matrícula: 211010711 Endereço: Rua Alvarenga Peixoto, 388 Bairro: América CEP: 89.204-430 Cidade: Joinville UF: SC Fone: 3435-3199 / 9113-1199 Curso: Ciência da Computação Título do Estágio: Manutenção e Desenvolvimento de uma Ferramenta para a Melhoria de Posicionamento das Páginas da Empresa nos Buscadores (SEO) com PHP, JQUERY, CSS e HTML Período: 02/09/2011 à 05/12/2011 Carga horária: 360 horas AVALIAÇÃO FINAL DO ESTÁGIO PELO CENTRO DE CIÊNCIAS TECNOLÓGICAS Representada pelo professor da disciplina ETG: Carlos N.Vetorazzi Jr. CONCEITO FINAL NOTA Rubrica do professor da disciplina ETG Excelente (9,1 a 10) Muito Bom (8,1 a 9,0) Bom (7,1 a 8,0) Regular (5,0 a 7,0) Reprovado (0,0 a 4,9) Joinville / /

iv Nome do Estagiário: Alisson Pierre Cleto Rosa QUADRO I a) AVALIAÇÃO NOS ASPECTOS PROFISSIONAIS Pontos 1 - QUALIDADE DO TRABALHO - Considerando o possível 2 - ENGENHOSIDADE - Capacidade de sugerir, projetar, executar modificações ou inovações. 3 - CONHECIMENTO - Demonstrado no desenvolvimento das atividades programadas. 4- CUMPRIMENTO DAS TAREFAS - Considerar o volume de atividades dentro do padrão razoável 5 - ESPÍRITO INQUISITIVO - Disposição demonstrada para aprender 6 - INICIATIVA - No desenvolvimento das atividades SOMA Pontuação para o Quadro I e II Sofrível - 1 ponto, Regular - 2 pontos, Bom - 3 pontos, Muito Bom - 4 pontos, Excelente - 5 pontos. QUADRO II b) AVALIAÇÃO DOS ASPECTOS HUMANOS Pontos 1 - ASSIDUIDADE - Cumprimento do horário e ausência de faltas 2 - DISCIPLINA - Observância das normas internas da Empresa. 3 - SOCIABILIDADE - Facilidade de se integrar com os outros no ambiente de trabalho. 4- COOPERAÇÃO - Disposição para cooperar com os demais para atender as atividades. 5 -SENSO DE RESPONSABILIDADE - Zelo pelo material, equipamentos e bens da empresa. SOMA c) AVALIAÇÃO FINAL Pontos LIMITES PARA CONCEITUAÇÃO SOMA do Quadro I multiplicada por 7 De57 a 101 - SOFRÍVEL SOMA do Quadro II multiplicada por 3 De 102 a 146 - REGULAR SOMA TOTAL De 148 a 194 - BOM Nome da Empresa: Render Multimídia LTDA. Representada pelo Supervisor: Jefferson Rafael Kozerski De 195 a 240 - MUITO BOM De 241 a 285 - EXCELENTE CONCEITO CONFORME SOMA TOTAL Rubrica do Supervisor da Empresa Local: Data: Carimbo da Empresa

v UNIVERSIDADE DO ESTADO DE SANTA CATARINA - UDESC CENTRO DE CIÊNCIAS TECNOLÓGICAS - CCT PLANO DE ESTÁGIO CURRICULAR OBRIGATÓRIO ESTAGIÁRIO Nome: Alisson Pierre Cleto Rosa Matrícula: 211010711 Endereço (Em Jlle): Rua Alvarenga Peixoto, 388 Bairro: América CEP: 89.204-430 Cidade: Joinville UF: SC Fone: 3435-3199 / 9113-1199 Endereço (Local estágio): Rua Ottokar Doerffel, 766 1 Andar Bairro: Atiradores CEP: 89.203-001 Cidade: Joinville UF: SS Fone: 3438-0900 E-mail: alissonpierre@gmail.com Regularmente matriculado no semestre: 2011/02 Curso: Ciência da Computação Formatura (prevista) Semestre/Ano: 2012/01 UNIDADE CONCEDENTE Razão Social: Render Multimídia LTDA CNPJ: 01 567 425 0001-40 Endereço: Rua Ottokar Doerffel, 766 1 Andar Bairro: Atiradores CEP: 89.203-001 Cidade: Joinville UF: SC Fone: 3438-0900 Atividade Principal: Prestar serviços de computação gráfica e Treinamentos Supervisor: Jefferson Rafael Kozerski Cargo: Coordenador de Sistemas DADOS DO ESTÁGIO Área de atuação: Desenvolvimento de Sistemas Web Departamento de atuação: Sistemas/Desenvolvimento Fone: s/n Ramal: s/n Horário do estágio: 13:00 às 19:00 Total de horas do Estágio: 360 horas Período: 02/09/2011 à 05/12/2011 Total de horas semanais: 30 horas Nome do Professor Orientador: Luciana Rita Guedes Departamento: DCC Disciplina(s) simultânea(s) com o estágio Quantas: três (3) disciplinas Quais: - Estágio Curricular I e II - TCC II OBJETIVO GERAL Este estágio consistiu-se na realização de atividades de desenvolvimento Web, junto ao portal da empresa, reunindo conhecimentos das áreas de Educação a Distância, Desenvolvimento Web, Bancos de Dados, Engenharia de Software para atuar nos projetos internos da empresa. O foco principal do estágio é o desenvolvimento de uma nova ferramenta para a melhoria de posicionamento das páginas da empresa nos buscadores (SEO), assim contribuindo para a otimização do novo portal.

vi ATIVIDADES OBJETIVO ESPECÍFICO HORAS Estudo do Portal da empresa Obter conhecimento do Portal da 30h Empresa e suas funcionalidades Treinamento na Linguagem de Programação PHP Treinamento na Linguagem de Programação JavaScript/jQuery Treinamento no Framework CodeIgniter Estudo geral do que é, funcionamento e técnicas de SEO Desenvolvimento de uma Ferramenta Administrativa Desenvolvimento de Classes e rotinas para integração com Framework PHP e banco de dados MySQL Efetuar testes e manutenção Obter conhecimento da sintaxe e lógica da linguagem PHP segundo padrões usados na empresa Obter conhecimento da sintaxe e lógica da linguagem JavaScript/jQuery Conhecer o Framework CodeIgniter, bem como a sintaxe e a lógica das funcionalidades e classes que ele proporciona Obter conhecimento do que é, o funcionamento e as técnicas de SEO (Search Engine Optimization) Desenvolvimento de um Ferramenta Administrativa, denominada Render SEO, para integrar ao Portal da empresa Desenvolvimento de Classes e rotinas para integração com Framework PHP e banco de dados MySQL Efetuar testes e manutenção dos sistemas da empresa, envolvendo as áreas de bancos de dados, programação nas linguagens utilizadas nos sistemas e planejamento das atividades 30h 15h 45h 30h 60h 120h 30h Rubrica do Professor Orientador Aprovação do Membro do Comitê de Estágio Rubrica do Coordenador de Estágio Rubrica do Supervisor da Empresa Data: Data: Data: Prof Nilson Campos Data: Carimbo da Empresa

CRONOGRAMA FÍSICO E REAL PERÍODO (15 horas) P 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ATIVIDADES R Estudo do portal da empresa P X X R X X Treinamento na Linguagem de Programação PHP P X X R X X Treinamento na Linguagem de Programação JavaScript/jQuery P X R X X Treinamento no Framework CodeIgniter P X X X R X X X Estudo geral do que é, funcionamento e técnicas de SEO P X X R X X Desenvolvimento de uma Ferramenta Administrativa P X X X X R X X X X X X Desenvolvimento de Classes e rotinas para integração com P X X X X X X X X Framework PHP e banco de dados MySQL R X X X X X X X X Efetuar testes e manutenção P X X R X X X X X X X Legenda: P - Previsto R - Realizado Observação: cada coluna numerada de 01 a 24 corresponde a um período de 15 horas para cada período de estágio, totalizando 360 horas.

AGRADECIMENTOS Agradeço a todos os que estiveram presentes e me deram suporte durante este período, especialmente: A Deus e minha família, por sempre estarem do meu lado e pelo apoio incondicional e motivação; A Professora Luciana Rita Guedes, pela orientação no presente trabalho; Ao meu supervisor Jefferson Rafael Kozerski, pela paciência e instrução; E a Render Multimídia LTDA, pela oportunidade que me foi dada.

ix SUMÁRIO LISTA DE FIGURAS... X LISTA DE SIGLAS... XI RESUMO... XII 1. INTRODUÇÃO... 1 1.1. OBJETIVOS... 1 1.1.1. Geral... 1 1.1.2. Específicos... 1 1.2. ORGANIZAÇÃO DO TRABALHO... 2 2. A EMPRESA... 3 2.1. HISTÓRICO... 3 2.2. PRODUTOS DESENVOLVIDOS... 3 2.2.1. ESPECIALIDADES DA RENDER MULTIMÍDIA LTDA... 4 2.3. PRINCIPAIS CLIENTES... 4 2.4. PORTAL E-COMMERCE DA EMPRESA... 5 3. DESENVOLVIMENTO... 8 3.1. FERRAMENTAS E TECNOLOGIAS... 8 3.1.1. PHP... 8 3.1.2. JAVASCRIPT/JQUERY... 9 3.1.3. HTML... 10 3.1.4. FIREBUG... 11 3.1.5. NAVICAT... 12 3.1.6. CODEIGNITER... 13 3.2. DESENVOLVIMENTO DA FERRAMENTA... 14 3.2.1. CONCEITOS E CARACTERÍSTICAS DE SEO... 15 3.2.2. DESCRIÇÃO DA FERRAMENTA ADMINISTRATIVA... 17 3.2.3. DIAGRAMAS DE CASO DE USO... 18 3.2.4. MODELAGEM DA FERRAMENTA... 19 3.2.5. FUNCIONALIDADE E PRINCIPAIS TELAS DA FERRAMENTA... 20 3.2.6. TESTES E MANUTENÇÃO... 25 4. CONSIDERAÇÕES FINAIS... 27 4.1. EXPERIÊNCIAS E DESAFIOS... 27 5. BIBLIOGRAFIA... 29

x LISTA DE FIGURAS Figura 1 - Antiga página Home do portal da Render Multimídia.... 6 Figura 2 - Nova página Home do portal da Render Multimídia (RENDER, 2011).... 7 Figura 3 - Três bandeiras localizadas no cabeçalho (RENDER, 2011).... 7 Figura 4 - Firebug no navegadormozilla Firefox.... 11 Figura 5 - Funcionamento do Navicat.... 13 Figura 6 - Funcionamento do CodeIgniter (CODEIGNITER, 2007).... 14 Figura 7 - Meta tags presente no cabeçalho das páginas.... 16 Figura 8 - Diagrama de Caso de Uso do Render SEO.... 18 Figura 9 - Modelo Lógico do Render SEO.... 19 Figura 10 - Visualização e Inserção de site no Render SEO.... 20 Figura 11 - Visualização do site com suas páginas.... 21 Figura 12 - Árvore de atributos no Render SEO.... 22 Figura 13 - Painel de edição de Páginas no Render SEO.... 23 Figura 14 - Visualização da página de Downloads do Portal Render Multimídia.... 24 Figura 15 - Pesquisa realizada no buscador Google.... 25

xi LISTA DE SIGLAS AJAX CAD CERN CSS HTML JS LMS MMG MVC PHP SEO SGML SQL UML XML - Asynchronous JavaScript and XML - Computer-Aided Design - Centro Europeu para Pesquisa Nuclear - Cascade Style Sheet - Hypertext Markup Language - JavaScript - Learning Management System - Multimedia Marketing Group - Model-View-Controller - Hypertext Pre-Processor - Search Engine Optimization - Standard Generalized Markup Language - Structured Query Language - Unified Modeling Language - extensible Markup Language

xii RESUMO O presente trabalho relata as atividades referentes à disciplina de Estágio Curricular I e II, disciplinas obrigatórias do curso de Bacharelado em Ciência da Computação da Universidade do Estado de Santa Catarina. As atividades foram realizadas na empresa Render Multimídia LTDA, cumprindo o cronograma de 360 horas. Elas tiveram seu foco no desenvolvimento de uma nova ferramenta para a melhoria de posicionamento das páginas da empresa nos buscadores SEO (Search Engine Optimization), assim contribuindo para a otimização do novo portal da empresa Render Multimídia LTDA. As atividades foram compostas por estudo e desenvolvimento utilizando as tecnologias PHP, HTML, CSS, JQUERY, MySQL e, entre outras. A partir das instruções e orientações do supervisor da empresa, além dos treinamentos oferecidos em PHP, JQUERY e no Framework CodeIgniter, foi-se criando base para iniciar o projeto. Para a etapa do projeto, utilizou-se o framework CodeIgniter 1.7.2 para o desenvolvimento do código em PHP e a ligação com o código HTML.

1. INTRODUÇÃO Neste trabalho são relatadas as atividades do estágio realizado na empresa Render Multimídia LTDA. O estágio foi composto por atividades com foco no desenvolvimento de uma nova ferramenta administrativa, utilizando conceitos e características do Search Engine Optimization (SEO), na qual, é um conjunto de técnicas, métodos e/ou estudos que visam melhorar o posicionamento das páginas no mecanismo de busca. Assim, o objetivo dessa técnica é fazer com que uma (ou várias) das páginas do seu website, apareça entre os primeiros resultados dessa busca. Desta forma, será descrito como a ferramenta proporcionou um melhor posicionamento das páginas nos mecanismos de busca da Web, resultando numa organização mais agradável das páginas do novo portal da Render Multimídia, tornando o código mais genérico e reutilizável. Além disso, será relatada a importância do comprometimento com a equipe para cumprir os objetivos dentro do prazo. Ressalta-se a grande relevância das disciplinas de programação para o desenvolvimento das atividades do estágio. Seguem os objetivos estabelecidos para o estágio bem como a organização deste documento. 1.1. OBJETIVOS 1.1.1. Geral O objetivo deste estágio consiste na realização de atividades de desenvolvimento Web, junto ao portal da empresa com foco no desenvolvimento de uma nova ferramenta para a melhoria de posicionamento das páginas da empresa nos buscadores (SEO), assim contribuindo para a otimização de busca do novo portal. 1.1.2. Específicos Para atingir o objetivo geral foram estabelecidos os seguintes objetivos específicos:

2 Estudar o Portal da empresa; Realizar treinamento na Linguagem de Programação PHP; Realizar treinamento na Linguagem de Programação JavaScript/jQuery; Realizar treinamento no Framework CodeIgniter; Fazer um estudo geral de conceitos, funcionamento e técnicas relacionadas à SEO; Desenvolver uma Ferramenta Administrativa; Desenvolver classes e rotinas para integração com Framework PHP e banco de dados MySQL; Efetuar testes e manutenção. 1.2. ORGANIZAÇÃO DO TRABALHO No primeiro capítulo deste trabalho é apresentada a introdução sobre o estágio desenvolvido, seu objetivo, e um resumo de como o trabalho está estruturado. No segundo capítulo é apresentada a empresa onde foi realizado o estágio, dando um breve histórico da mesma, os produtos desenvolvidos, seus principais clientes e finalizando com uma descrição geral do novo Portal Render. Para o terceiro capítulo é feito um levantamento das tecnologias utilizadas no desenvolvimento Web, bem como são apresentadas as atividades desenvolvidas no estágio, incluindo o desenvolvimento da Ferramenta Administrativa. O desenvolvimento desse estágio reuniu informações como: descrição geral do sistema, elaboração de diagramas de Caso de Uso, além de uma modelagem do banco de dados, funcionamento geral do sistema e principais telas. Por último, são apresentadas as considerações finais e principais desafios enfrentados no decorrer dessas atividades.

3 2. A EMPRESA Nesse capítulo é apresentada a concedente, no qual serão descritos o novo portal e- commerce da empresa e os produtos que ela desenvolve e comercializa no mercado. 2.1. HISTÓRICO Com o objetivo inicial de prestar serviços de computação gráfica e treinamentos foi fundada, no final de 1996, a empresa Render Multimídia, sediada no sul do país. Com o conhecimento em desenvolvimento de aplicações multimídia, aliado a didática em ministrar treinamentos da área CAD, permitiu à empresa lançar em 1998, o primeiro curso em CD- ROM de AutoCAD no Brasil. 2.2. PRODUTOS DESENVOLVIDOS A Render Multimídia, possui diversos títulos de cursos em mídia digital disponíveis em DVD-ROM, download ou em versão online. Além disso, esses cursos são disponibilizados ao público em diferentes línguas, como: português, inglês e espanhol. Os Cursos Render possuem como principal recurso as vídeo aulas narradas por profissionais, objetivas e práticas, que são complementadas com textos de apoio, imagens, dicas, perguntas de acompanhamento e teste de certificação como opcional. Essas ferramentas tornam os cursos de fácil compreensão, rápidas assimilação mesmo nos títulos que possuem conteúdo complexo. O público Render está composto de profissionais liberais, funcionários de empresas, estudantes e pessoas que desejam se aprimorar para ter melhores oportunidades no mercado de trabalho. Com cursos do básico ao avançado e especializados atuam em áreas como engenharia, projetos, arquitetura, design gráfico, fotografia, WebDesign, animação 3D e introdução a informática. A ampla gama de cursos desde os níveis básicos até os avançados, bem como os depoimentos de inúmeros profissionais aprovando os cursos Render e a utilização do material didático da Render por instituições de ensino, solidificam a qualidade dos Cursos Render.

4 2.2.1. ESPECIALIDADES DA RENDER MULTIMÍDIA LTDA A Render Multimídia é uma empresa da área de e-learning, especializada na elaboração e comercialização de cursos das seguintes áreas: Animação 3D/Vídeo; Arquitetura, Engenharia e Construção; Design Gráfico/WEB; Informática Básica; Manufatura; Office; Projeto Mecânico 3D. 2.3. PRINCIPAIS CLIENTES Os altos níveis de qualidade dos cursos produzidos e comercializados pela Render Multimídia proporcionaram à empresa a conquista de diversos tipos de clientes, tanto em pessoa física como jurídica. Nesse sentido, a Render Multimídia atende tanto àquele cliente que busca melhorar seu currículo profissional visando aprender alguma tecnologia sozinha, através dos cursos comercializados pela empresa, quanto grandes organizações e empresas em busca de treinamento de seus funcionários. Algumas empresas de grande porte no mercado que já foram clientes na Render: Fiat; Rede TV; Engepoli; Fundação Pátria (estudo nuclear do Brasil); Hergen; RF Usinagem; Grupo Bertin S.A.; Havaianas (Alpargatas); Globo Comunicação e Participações S.A.

5 A Render também realiza vendas para clientes no exterior, principalmente Portugal, entre outros que falam a língua portuguesa, como por exemplo, Cabo Verde, Guiné-Bissau e Moçambique. Recentemente, em 2011, a empresa lançou o novo portal, mais atualizado, dinâmico, robusto, otimizado, com compras online mais rápidas e seguro e, além disso, abrange ainda a criação de linguagens diferentes, onde a empresa recentemente se atualizou no mercado, com opções de visualização do novo portal em três tipos de idiomas: português, inglês e espanhol. 2.4. PORTAL E-COMMERCE DA EMPRESA Esta seção aborda informações básicas sobre o novo Portal da Render, lançado em março de 2011, pois um dos objetivos desse estágio é desenvolver uma ferramenta para otimizar, facilitar e melhorar o posicionamento das páginas do Portal Render nos buscadores (SEO) que são explicados mais adiante. O layout do novo portal foi desenhado por uma empresa de designer terceirizada. É de suma importância salientar que a nova estrutura de layouts, do carrinho de compras, das otimizações nos códigos de programação do portal da Render teve como propósito aperfeiçoar as páginas e atrair novos clientes através de um portal mais amigável e com disponibilização de versão do site nas línguas inglesa e espanhola, aumentando as vendas para o mercado exterior. Vale lembrar, que a estrutura de organização do Portal Render foi toda desenvolvida utilizando o Framework CodeIgniter, que por sinal, também ajudou bastante no desenvolvimento das atividades desse estágio. O site deixou as cores cinza e laranja, predominantes no portal antigo e passou ganhar mais cores com a adição da cor azul com efeitos gradiente e degradê. Para tanto, foi modelado também um novo cabeçalho e rodapé. As figuras 1 e 2 mostram, respectivamente, o portal antigo e o novo. Ampliando a página Home é possível observar na figura 3, localizadas no topo do novo cabeçalho, três bandeiras indicando multi-língua. Na metade do ano de 2011, a Render lançou o site internacional, ou seja, quem acessa o site, tem a possibilidade de visualizá-lo em diferentes idiomas, seja o português padrão da empresa, o espanhol ou o inglês, proporcionando assim, uma maior clientela para a empresa, onde estarão disponíveis para vendas no exterior, cursos em espanhol e inglês.

Figura 1 - Antiga página Home do portal da Render Multimídia. 6

7 cabeçalho rodapé Figura 2 - Nova página Home do portal da Render Multimídia (RENDER, 2011). multi-língua Figura 3 - Três bandeiras localizadas no cabeçalho (RENDER, 2011).

8 3. DESENVOLVIMENTO O desenvolvimento das atividades deste estágio se deu através do uso de diversas ferramentas que se demonstraram-se bastante eficientes para um desenvolvedor Web. A partir delas, foi desenvolvida uma ferramenta do tipo administrativa denominada Render SEO, ou seja, administrativa por ser de uso somente interno na empresa e cujo objetivo foi melhorar o posicionamento das páginas do novo portal da empresa nos buscadores. As atividades de rotina se focaram fortemente na construção de classes no Framework CodeIgniter, onde houve aprimoramentos no decorrer do processo do desenvolvimento desta ferramenta, na questão de usabilidade com o usuário, bem como, testes e manutenção de erros no decorrer do processo. Neste capítulo estão apresentadas as atividades que foram realizadas durante o período de estágio na empresa Render Multimídia LTDA, envolvendo o desenvolvimento desta ferramenta administrativa. Também são apresentadas as principais ferramentas e tecnologias que contribuíram de alguma forma para a realização das tarefas propostas. 3.1. FERRAMENTAS E TECNOLOGIAS Esta seção trata das ferramentas e tecnologias utilizadas para o desenvolvimento das atividades realizadas na Render Multimídia. 3.1.1. PHP A linguagem PHP como conhecemos hoje iniciou-se em 1997. Antes, Rasmus Lerdoff em 1995 criou um projeto de um simples script somente para retornar alguns dados do seu currículo online. Ele intitulou esse script como Personal Home Page Tools e logo em seguida passou a se chamar PHP/FI: o mesmo script passaria a receber mais funcionalidades, ou seja, até conseguia já se comunicar com banco de dados (SPEROTTO, 2010). O PHP Hipertext Preprocessor ou Pré-processador Hipertexto é uma linguagem de script, considerada uma linguagem de programação, livre e derivada da linguagem C,

9 amplamente utilizada com um propósito geral que é especialmente adequado para desenvolvimento Web e pode ser embutido em HTML. Em PHP, o código pode ser identificado entre as tags iniciais e finais <?php e?> que lhe permitem ativar e desativar o modo PHP, inserindo lógica dentro de páginas HTML (MANUAL DO PHP, 2011). A diferença dessa linguagem com relação a outras semelhantes a JavaScript é que, o código PHP é executado no servidor, sendo enviado apenas o HTML puro para o cliente. Assim é possível interagir com bancos de dados e aplicações existentes no servidor. Além disso, o PHP é multi-plataforma, podendo ser usado na maioria dos Sistemas Operacionais. É uma linguagem de código aberto, suportada pela maioria dos servidores Web que existem hoje no mercado como o IIS, PWS e o popular Apache. O cliente recebe apenas o resultado dos scripts, que são interpretados no servidor, não tendo acesso ao código PHP (CASTELA, 2010). O autor Castela (2010) destaca também que é simples de se aprender e de se trabalhar com o PHP. Esta linguagem de programação dinâmica atende desde os mais experientes desenvolvedores quanto os iniciantes na área. 3.1.2. JAVASCRIPT/JQUERY Segundo Yank e Adans (2009), o JavaScript (JS) é uma linguagem de programação, a qual permite a alteração de páginas Web dinamicamente, ou seja, ao mesmo tempo em que são exibidas no navegador, possibilitando uma grande dinamização do código HTML, sendo possível alterar o código no lado do cliente de acordo com suas ações sem precisar se comunicar com o servidor (BRATTI, 2009). O JS foi criado pela Netscape Communications e posteriormente incentivado pela Sun Microsystems, Inc. Não é uma autêntica linguagem orientada a objetos e tem um desempenho limitado em relação à Java, pois não é compilada e executa direto no cliente. É possível incluir funções e aplicações online básicas em páginas da Web com o JavaScript (SAOINFORMATICA, 2009). Com JS, é possível criar pequenas funções, através de trechos de códigos encarregados de realizar ações dentro de uma página Web. É possível também criar efeitos especiais nas páginas e definir interatividades com o usuário. Além disso, essa tecnologia permite exibir

10 resultados ao usuário sem a necessidade de recarregar a página. O navegador do cliente é o encarregado de interpretar as instruções JavaScript e executá-las para realizar estes efeitos e interatividades (ALVAREZ, 2004). O uso exagerado do JS ainda requer cuidado, pois pode deixar o carregamento das páginas lento e atualmente, por exemplo, a otimização das páginas de um portal é um fator crítico, pensando em técnicas de SEO, onde os grandes buscadores também levam em consideração o tempo de carregamento das páginas. Há diversas bibliotecas para adicionar efeitos em JavaScript, como jquery, por exemplo. De acordo com Tanaka (2011), a biblioteca jquery torna mais ágil o desenvolvimento de aplicações Web ao oferecer controles de interface sofisticados, tratamento de eventos e funções para manipular chamadas Ajax entre navegadores e servidores Web, reduzindo drasticamente a quantidade de código JavaScript a ser escrito por um designer ou desenvolvedor. As bibliotecas do jquery foram muito úteis para o desenvolvimento desse projeto, pois através desses recursos oferecidos, têm-se a possibilidade de adicionar, alterar ou remover elementos de uma página Web que já foi carregado no navegador Web, tratar eventos como carregamento de páginas, cliques do mouse e digitação de texto e criar animações. 3.1.3. HTML A linguagem HTML foi inventada por Tim Berners-Lee no CERN (Centro Europeu para Pesquisa Nuclear), e é composta por comandos que permitem definir a aparência e estrutura de documentos. Tim Berners-Lee baseou-se na já conhecida e bem formada linguagem de marcação SGML Standard Generalized Markup Language e a partir desta criou uma linguagem hoje mundialmente conhecida, o HTML Hyper Text Markup Language (SILVA, 2006). HTML é a linguagem com que se escrevem as páginas web. As páginas web podem ser vistas pelo usuário mediante o navegador Web (browser). Basicamente, o HTML trata-se de um conjunto de tags (ex.: <html></html>, <div></div>, <a></a> e <b></b>) que servem para apresentar o texto e outros elementos da página (ALVAREZ, 2004). Segundo Albuquerque (2001), HTML é uma linguagem de marcação usada na definição de documentos acessados por meio de navegadores e estes documentos são arquivos

11 ASCII criados com um editor convencional ou mesmo editores específicos para essa tarefa. Alguns dos problemas que acompanham ao HTML é a diversidade de navegadores presentes no mercado, os quais não são capazes de interpretar o mesmo código de uma maneira unificada. Qualquer página Web está composta por uma infinidade de elementos, como textos, imagens, vídeos e áudios que podem ser combinados ao nosso gosto. A evolução do HTML trouxe grandes inconvenientes e deficiências que tiveram que ser superadas com a introdução de outras tecnologias, capazes de organizar, aperfeiçoar e automatizar o funcionamento das páginas Web, como por exemplo, o CSS, JavaScript, entre outros. (ALVAREZ, 2004). 3.1.4. FIREBUG O Firebug é uma extensão (plugin) para o navegador Mozilla Firefox bastante útil para os desenvolvedores Web e é referência na área. Essa extensão se integra ao Firefox e possibilita o desenvolvedor editar dinamicamente o conteúdo das páginas, alterando CSS, código HTML ou mesmo os processos, localizado na parte inferior do navegador, na figura 4. Firebug Figura 4 - Firebug no navegadormozilla Firefox. De acordo com Getfirebug (2010), pode-se reunir algumas características importantes:

12 Sempre disponível, pois o Firebug é apenas uma tecla de distância e que nunca ficará no caminho do usuário. Além disso, pode abrir o Firebug em outra janela separada, ou como uma barra na parte inferior do navegador; Fiscalização e edição do código HTML, pois o Firebug torna simples encontrar os elementos HTML de uma página. Depois de encontrar, o Firebug permite editar o HTML com todas as riquezas de informações; Visualização, inserção e remoção do CSS com facilidade, pois com o Firebug é possível saber tudo sobre os estilos em páginas Web e se não gostar do que está vendo, pode fazer alterações e vê-los entrar em vigor imediatamente sem precisar atualizar páginas; Possui um Debug JavaScript, pois o Firebug inclui um depurador de JavaScript poderoso que permite testar códigos, além de permitir pausar a execução de um JavaScript a qualquer momento; Possui um Console, onde é possível encontrar rapidamente os erros, pois com o Firebug quando as coisas dão errado, permite saber imediatamente através de informações detalhadas e úteis sobre erros em JavaScript, CSS e XML. Apesar de ser uma extensão própria para o Mozilla Firefox, foi criada uma versão onde, através da adição de um script no código, é possível utilizar o Firebug em outros navegadores, como IE, Safari, Chrome e Opera. 3.1.5. NAVICAT O Navicat é um gerenciador de banco de dados produzido pela Premium Soft Cybertech LTDA. Ele tem uma interface gráfica amigável e suporta múltiplas conexões de bases de dados remotas ou locais, ou seja, permite conectar ao MySQL, Oracle, PostgreSQL, SQLite e ao bancos de dados SQL Server simultaneamente dentro de uma única aplicação (NAVICAT, 2011). Seu design é feito para atender às necessidades de uma variedade de audiências, desde administradores de banco de dados e programadores até diferentes tipos de empresas que atendem clientes e compartilham informações com parceiros. O Navicat foi muito útil na realização de depurações e na manipulação dos dados do sistema. A figura 5 mostra o funcionamento do Navicat.

13 Figura 5 - Funcionamento do Navicat. O Navicat foi utilizado neste trabalho como gerenciador do banco de dados MySQL, por ser a ferramenta que a empresa Render Multimídia já vinha utilizando em seus sistemas. 3.1.6. CODEIGNITER O CodeIgniter é um framework de desenvolvimento de aplicações para desenvolvedores em PHP, mantido pela empresa EllisLab. Ele segue o padrão MVC (Model- View-Controller). Seu objetivo é possibilitar que se desenvolvam projetos mais rapidamente ao invés de começar do zero. Ele possibilita isso com seu conjunto de bibliotecas voltadas para tarefas mais simples, de uma interface e uma estrutura lógica simples, para acesso a essas bibliotecas (CODEIGNITER, 2007). De acordo com CodeIgniter (2007), o funcionamento do Framework CodeIgniter (figura 6) é explicado da seguinte maneira: 1. O index.php serve como controlador de frente, inicializando os recursos base necessários para o CodeIgniter funcionar; 2. O roteador examina as requisições HTTP para determinar o que deve ser feito com isto;

14 3. Se houver arquivo de cache, ele é enviado diretamente para o browser ignorando a execução do sistema normal; 4. Segurança: antes de o controlador ser carregado, qualquer requisição HTTP ou dados submetidos pelo usuário são filtrados por segurança; 5. O Controller carrega o Model, as bibliotecas (libraries), plugins, assistentes (helpers), scripts e quaisquer outros recursos necessários para cada requisição especificamente; 6. A View finalizada é renderizada e enviada para o browser, para ser visualizada. Se o cache estiver ativado, a View é armazenada nele primeiro para nas próximas requisições, ser carregada mais facilmente. Figura 6 - Funcionamento do CodeIgniter (CODEIGNITER, 2007). Assim se dá o workflow (fluxo de trabalho) do Framework CodeIgniter. 3.2. DESENVOLVIMENTO DA FERRAMENTA Com o advento da Internet diversos setores do cotidiano foram facilitados, tornando-a forte aliada na expansão do conhecimento. De acordo com Oliveira et. al. (2011), atualmente diversos esforços vêm sendo realizados com o intuito de adotar procedimentos e ferramentas que possibilitem a qualidade da publicação visando aspectos relacionados à organização e recuperação desta informação na Internet. Entre eles, estão os procedimentos denominados Search Engine Optimization (SEO) que visam melhorar o posicionamento das páginas dos websites nos mecanismos de busca, atualmente, principal forma de recuperação da informação eletrônica. Para conhecer mais sobre essa técnica, faz-se necessário realizar um breve estudo sobre SEO.

15 Além disso, esta seção aborda as práticas adotadas durante o desenvolvimento da ferramenta administrativa, entre elas podemos citar uma descrição geral do sistema, o layout e principais telas, além das principais funcionalidades presentes na ferramenta, na qual, foram implementados utilizando PHP, jquery e CSS. Por fim, o uso das ferramentas citadas na seção 3.1 foi essencial para o desenvolvimento deste trabalho. A estrutura de organização do Framework CodeIgniter também ajudou bastante no desenvolvimento das atividades. 3.2.1. CONCEITOS E CARACTERÍSTICAS DE SEO Em 1993 surgiu o primeiro programa de funcionamento automatizado para varrer o conteúdo de uma página Web e seguir seus links. Esse tipo de aplicação ficou conhecido por diferentes nomes, entre eles: como motor de busca, motor de pesquisa, robô, crawler e spider. De acordo com Ledford (2009), o Wandex foi o primeiro programa a realizar indexação de páginas Web, o que o levou a servir como base para os principais motores de busca atuais. Os novos motores de busca em geral rastreiam e indexam páginas Web classificandoas por sua relevância. Nesse processo são considerados vários fatores determinantes da real importância do conteúdo da página em relação ao que ela mostra conter através de seu título, descrição e palavras-chave (GOOGLE, 2011). Para melhorar o posicionamento das páginas Web, surge a técnica conhecida como Search Engine Optimization (SEO), com o objetivo de otimizar uma página e fazer com que esta apareça entre as primeiras posições nos resultados das buscas para uma palavra-chave. De um modo geral, SEO é um conjunto de técnicas, métodos e/ou estudos que visam melhorar o posicionamento de suas páginas no mecanismo de busca, ou seja, quando um usuário digita no mecanismo de busca (por exemplo: o buscador do Google) uma palavrachave, o objetivo do SEO é fazer com que uma (ou várias) das páginas do seu website, apareça entre os primeiros resultados dessa busca. Para Ricotta (2007), o termo Search Engine Optimization foi usado pela primeira vez pela empresa Multimedia Marketing Group (MMG), de John Audette, onde o objetivo era realizar métodos que fizessem com que um website conseguisse um posicionamento nos resultados de busca melhor do que os concorrentes.

16 Realizar a inserção das meta tags no corpo de um documento Web em busca de quais palavras-chave não estão bem alocadas em relação a este, pode ser uma tarefa tediosa que consome muito tempo. Mas afinal, o que são meta tags e qual a importância disso para esse projeto? Segundo Seomarketing (2009), meta tags são comandos implementados no código das páginas Web para passar instruções ao Google e demais sites de busca. É possível dizer aos robôs quais páginas devem ou não ser indexadas, qual a descrição da página a ser exibida e até informar qual a pessoa responsável pelo desenvolvimento da página. Geralmente as meta tags encontram-se na área inicial do código da página, dentro da seção HEAD, como ilustra a figura 7. Figura 7 - Meta tags presente no cabeçalho das páginas. Existem algumas meta tags muito importantes para o SEO, entre elas cito três das mais importantes (SEOMARKTING, 2009): Title: é a tag mais importante, pois ela define o título da página. As ferramentas de busca a utilizam para definir o assunto de sua página. Exemplo de código em HTML: <title>título da página</title>; Description: serve para citar pequenas características sobre o que aquela página oferece, descrevendo, em poucas palavras, uma ideia geral de todo o conteúdo da página. Exemplo de código em HTML: <meta name= description content= descrição da página >;

17 Keywords: representa o conjunto de palavras-chave que se refere às palavras que o usuário de uma ferramenta de busca pode utilizar para encontrar o website. Exemplo de código em HTML: <meta name= keywords content= palavra1, palavra2, palavra3 >. Com o objetivo de desenvolver uma aplicação que agilize o processo de otimização de uma página na busca dos motores de pesquisa (SEO), esse projeto apresenta uma solução que auxilia na otimização de forma automatizada, a inserção das meta tags nas páginas Web do portal da empresa. 3.2.2. DESCRIÇÃO DA FERRAMENTA ADMINISTRATIVA Neste projeto foi desenvolvida uma ferramenta administrativa, destinada à Web, onde se decidiu nomear de Render SEO. Sendo assim, para a elaboração, planejamento e desenvolvimento desse projeto existe a necessidade de se especificar alguns requisitos. Dentre estes requisitos estão os de conteúdos, que englobam itens os quais serão tratados durante a implementação, os funcionais que caracterizam as funcionalidades que o sistema apresenta, e os requisitos de desenvolvimento e operacionais que tratam de aspectos mais técnicos do sistema. Com relação ao requisito conteúdos presente no Render SEO, agregam apenas itens direcionados à empresa Render Multimídia, aplicados ao portal e-commerce, onde estão presentes: dado referente à empresa, conteúdos específicos do site, das páginas e das meta tags ou chamado daqui em diante de atributos. É interessante salientar que o banco de dados fica armazenado na Web, contendo todos esses conteúdos, proporcionando fácil acesso para alunos e professor, pois a informação é centralizada. Com relação ao segundo requisito, os funcionais, o Render SEO possui um tipo de ambiente, ode administrador, pois seu uso é restrito a apenas pessoas que tiverem privilégio de acesso. Através do ambiente de administração será possível realizar operações específicas de inserção das meta tags nas páginas dentro de um site, sendo o site a base para todas as páginas e também a criação de atributos, ou seja, a criação de meta tags para esses tipos de conteúdos que serão utilizadas no cabeçalho das páginas Web. Além disso, poderá editar e até excluir esses conteúdos.

18 Com relação ao requisito de desenvolvimento, o Render SEO será desenvolvido através de um computador pessoal, com as devidas ferramentas de programação citadas no item 3.1, em um período de tempo proposto de acordo com as atividades descritas no cronograma. Já com relação ao ultimo requisito, o operacional, a ferramenta administrativa estará sendo desenvolvida e testada internamente, através de um servidor Web (Apache HTTP) própria da empresa e de um sistema gerenciador de banco de dados (MySQL). 3.2.3. DIAGRAMAS DE CASO DE USO Para um melhor entendimento dos requisitos funcionais destacados neste desenvolvimento, foi elaborado um diagrama de caso de uso no formato UML para descrever o ator e cenário que abrange o Render SEO (MEDEIROS, 2004). Assim, o diagrama de caso de uso, mostra de forma bem resumida às interações do ator com a ferramenta administrativa. Com relação às ações efetuadas, todas são gravadas no banco de dados. Sendo assim, o ator administrador passa pelo processo de autenticação (login), tendo acesso aos seus respectivos módulos. Na Figura 8, encontra-se o diagrama de caso de uso que apresenta diversas funcionalidades, desde ver e inserir conteúdos e até editar e excluir sites, páginas e atributos. Figura 8 - Diagrama de Caso de Uso do Render SEO.

19 3.2.4. MODELAGEM DA FERRAMENTA Para implementação deste sistema foi necessário utilizar uma base de dados diversificada que atendesse a todas as necessidades e ações do usuário no sistema. Em virtude disto, a ilustração (figura 9) foi gerada pelo software gratuito DBDesigner 4 para um melhor entendimento, onde no total foram criadas 4 tabelas distintas relacionadas e descritas da seguinte maneira. Figura 9 - Modelo Lógico do Render SEO. Na ilustração da figura 9, mostra as tabelas criadas que estão relacionadas com a ferramenta de desenvolvimento, como: a tabela rnd_seo_sites, que representa os sites criados, onde cada site possui um número determinado de páginas; a tabela rnd_seo_pages, que representa as páginas criadas, onde cada página está relacionado com um único site e cada página possui um número determinado de atributos;

20 a tabela rnd_seo_attr_ref, que representa o relacionamento entre as páginas da tabela rnd_seo_pages e os atributos da tabela rnd_seo_attr ; e a tabela rnd_seo_attr, que representa os atributos criados, onde cada atributo está relacionado através da tabela rnd_seo_attr_ref com uma página cadastrada. 3.2.5. FUNCIONALIDADE E PRINCIPAIS TELAS DA FERRAMENTA Conforme descrito e detalhado durante o planejamento do projeto, este sistema apresenta somente um tipo de ambiente: o administrador. Assim sendo, nesta subseção é descrito como o sistema funciona, bem como mostrar-se algumas das principais telas. Conforme ilustra a figura 10, as opções inicialmente oferecidas ao usuário são: escolher o site já cadastrado no banco de dados e/ou adicionar um novo site. Figura 10 - Visualização e Inserção de site no Render SEO. Após a criação do site que vai ser a base da árvore (elemento desenvolvido no Render SEO), há a possibilidade de novas ações dentro do sistema (figura 11), como: editar informações referente ao site, excluir o site, com todas as páginas e atributos referente ao site; listar o site com todas as páginas relacionadas; e adicionar uma nova página ao site selecionado;

21 Figura 11 - Visualização do site com suas páginas. Após listar as páginas de um determinado site escolhido no sistema, visto no formato de uma árvore, tem-se a possibilidade de editar ou excluir qualquer página (figura 11). Cada página cadastrada no sistema está relacionada com um único site e com todos os atributos já existentes no sistema. Fazendo referência à pesquisa feita na subseção 3.2.1 desse relatório, os atributos representam as meta tags que posteriormente serão capturados do sistema através de parâmetros de consulta e inseridos automaticamente no cabeçalho das páginas de todo o Portal e-commerce da Render Multimídia apresentado na seção 2.5. Outra funcionalidade é o de poder criar, editar e excluir esses atributos do sistema. A opção para essa funcionalidade está localizada em baixo da área Selecionar Site, onde ao clicar é mostrada ao usuário uma lista de atributos cadastrados no sistema, ou seja, atributos somente definidos, que serão apresentados ao usuário no formato de uma árvore que posteriormente serão utilizados no painel de conteúdo das páginas, como mostra a figura 12. Novamente fazendo relação com a pesquisa realizada na sessão 3.2.1, cada atributo definido na árvore gerada pelo sistema é equivalente a uma meta tag do cabeçalho de uma página HTML. Podemos notar na figura 12 algumas delas, como o title, que representaria o

22 título das páginas; m_description, que representaria uma breve descrição de uma página; m_keywords, que representaria as palavras-chave de uma página; entre outras existentes no HTML. Figura 12 - Árvore de atributos no Render SEO. Para um melhor entendimento da ferramenta administrativa, na questão das páginas com seus atributos, é ilustrado na figura 13 como são inseridos e editados os atributos dentro das páginas cadastradas no sistema. Percebe-se que na figura 13, cada atributo criado e definido na árvore de atributos (figura 12), é apresentado como atributos dessa determinada página, ou seja, cada página adicionada terá um número determinado de atributos para serem preenchidos. Como exemplo, a figura 13, apresenta uma página cadastrada no Render SEO, de nome Downloads, que está localizada no endereço http://www.render.com.br/downloads, onde após serem visualizados por um usuário, esses atributos serão capturados através de uma library (biblioteca)

23 desenvolvida também no framework CodeIgniter, a partir de parâmetros de consultas passados a essa biblioteca (por exemplo: nome da página, categoria do produto, código do produto, linguagem da página, entre outras), onde posteriormente seriam inseridos no header dessa página Web de acordo com atributos contidos e preenchidos no Render SEO. Figura 13 - Painel de edição de Páginas no Render SEO. A library aqui comentada é de uso exclusivo da Render Multímidia, não fazendo parte desse relatório, pois o objetivo desse capítulo é apresentar a pesquisa e descrever e detalhar a ferramenta desenvolvida. Para melhor entender como e para que funciona a ferramenta na prática, abaixo é ilustrado a figura 14, mostrando um usuário acessando a página de

24 Downloads do portal Render, onde podemos visualizar também o código fonte dessa página através do navegador Mozilla Firefox. Figura 14 - Visualização da página de Downloads do Portal Render Multimídia. Podemos perceber com essa ilustração da figura 14, que os atributos que estavam cadastrados no Render SEO, ou seja, como mostrados anteriormente na figura 13 foram inseridos no cabeçalho da página de Downloads, por exemplo, contendo as meta tags: title, canonical e description. Na verdade, esta página não contém nenhuma meta tag inserida manualmente em seu código HTML, ou melhor, na View, fazendo referencia ao modelo MVC do CodeIgniter, pois foi através de parâmetros de consulta, por exemplo, nome do site, nome da página e linguagem da página enviados a library, que fez a busca no banco de dados, na qual o Render SEO manipula as informações do site, das páginas e os atributos e estes dados são inserido automaticamente na View ou código HTML da página visualizada. Outro exemplo que mostra como a ferramenta interfere nos buscadores, através dos acessos ás páginas do Portal Render é ilustrado na figura 15, onde realizou-se uma pesquisa no mecanismo de busca, como por exemplo o buscador Google, na qual foram pesquisadas as palavras downloads render e resultado foi o esperado. Na figura 15, pode-se ver o resultado de uma pesquisa no Google, onde logo abaixo da URL da página render, é apresentada a descrição daquela página, referente à meta tag

25 description, assim confirmando o que foi proposto, a construção de uma ferramenta que melhore o posicionamento das páginas do Portal Render nos buscadores da Internet, permitindo o cadastramento de meta tags de forma automatizada para todas as páginas, descartando aquele processo manual de inserir uma a uma entre as inúmeras páginas do Portal Render. Figura 15 - Pesquisa realizada no buscador Google. Outro ponto importante é que através dessa ferramenta, todas as páginas teriam suas meta tags específicas, bem definidas e claras, pois a presença de conteúdo duplicado pode gerar alguns problemas e dificuldades para os mecanismos de busca, como por exemplo: a desorientação na hora de atribuir os créditos (anchortext, PageRank, etc.), indecisão para definir qual página é a mais importante (ou original) e dificuldades na hora de decidir que páginas adicionar ou remover de suas bases e qual seria o resultado mais relevante para uma pesquisa (FEIJÓ, 2009). 3.2.6. TESTES E MANUTENÇÃO Os testes e manutenção foram realizados durante o tempo de desenvolvimento da ferramenta e durante o tempo proposto no cronograma desse estágio. Houve alguns contratempos, como a constatação de problemas em determinadas partes dos códigos implementados em PHP, mas que foram solucionados no decorrer dessas atividades, através da ajuda do supervisor de sistemas na Render.