DINARA PEREIRA LIMA. ESTÁGIO CURRICULAR I e II DESENVOLVIMENTO DE WEBSITE COM ADMINISTRADOR DE CONTEÚDO PARA DOCES MÔNICA SCHULZ E PROGRAMA FABÍOLA

Transcrição

1 DINARA PEREIRA LIMA ESTÁGIO CURRICULAR I e II DESENVOLVIMENTO DE WEBSITE COM ADMINISTRADOR DE CONTEÚDO PARA DOCES MÔNICA SCHULZ E PROGRAMA FABÍOLA BERNARDES EMPRESA: YOGH SOLUÇÕES PARA INTERNET LTDA SETOR: DESENVOLVIMENTO WEB SUPERVISOR: LUCAS SIMÕES DE CARVALHO ORIENTADOR: PROFº DRº CLAUDIOMIR SELNER CURSO DE TECNOLOGIA EM SISTEMAS DE INFORMAÇÃO CENTRO DE CIÊNCIAS TECNOLÓGICAS - CCT UNIVERSIDADE DO ESTADO DE SANTA CATARINA UDESC JOINVILLE SANTA CATARINA - BRASIL OUTUBRO 2010

2 APROVADO EM.../.../... Claudiomir Selner Doutor em Engenharia de Produção e Sistemas Professor Orientador Avanilde Kemczinski Doutora em Engenharia de Produção Supervisora Acadêmica Cinara Terezinha Menegazzo Mestre em Ciências da Computação Lucas Simões de Carvalho Supervisor da Empresa Concedente Vilson Vieira da Silva Jr Graduado em Ciência da Computação Luciana Rita Guedes Ghisleri Mestre em Engenharia Elétrica em Automação

3 Carimbo da Empresa UNIDADE CONCEDENTE Razão Social: YOGH SOLUÇÕES PARA INTERNET LTDA CGC/MF: / Endereço: Rua Desembargador Nelson Nunes Guimarães, 1283 Bairro: Atiradores CEP: Cidade: Joinville UF: SC Fone: (47) Atividade Principal : Analista de Usabilidade Supervisor: Lucas Simões de Carvalho Cargo: Analista de Soluções Web ESTAGIÁRIO Nome: Dinara Pereira Lima Matrícula: Endereço: Rua Aracajú, nº 594, Bairro Saguaçú CEP: Cidade: Joinville UF: SC Fone: (47) Curso de: Tecnologia em Sistemas de Informação Título do Estágio: Desenvolvimento de Website com administrador de conteúdo para "Doces Mônica Schulz" e "Programa Fabíola Bernardes" Período: 02/09/ /10/2010 Carga horária: 240h AVALIAÇÃO FINAL DO ESTÁGIO PELO CENTRO DE CIÊNCIAS TECNOLÓGICAS Representada pelo Professor Orientador: Claudiomir Selner Estes campos serão preenchidos pelo professor da Disciplina, devido a avaliação ser do Processo e não somente do Relatório CONCEITO FINAL NOTA (Avaliação do Processo (Σ Processo) de Estágio) 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) Rubrica do Professor da Disciplina Joinville / /

4 Nome do Estagiário: Dinara Pereira Lima QUADRO I AVALIAÇÃO NOS ASPECTOS PROFISSIONAIS QUALIDADE DO TRABALHO: Considerando o possível. ENGENHOSIDADE: Capacidade de sugerir, projetar, executar modificações ou inovações. CONHECIMENTO: Demonstrado no desenvolvimento das atividades programadas. CUMPRIMENTO DAS TAREFAS: Considerar o volume de atividades dentro do padrão razoável. ESPÍRITO INQUISITIVO: Disposição demonstrada para aprender. INICIATIVA: No desenvolvimento das atividades. SOMA Pontos QUADRO II AVALIAÇÃO DOS ASPECTOS HUMANOS ASSIDUIDADE: Cumprimento do horário e ausência de faltas. DISCIPLINA: Observância das normas internas da Empresa. SOCIABILIDADE: Facilidade de se integrar com os outros no ambiente de trabalho. COOPERAÇÃO: Disposição para cooperar com os demais para atender as atividades. SENSO DE RESPONSABILIDADE: Zelo pelo material, equipamentos e bens da empresa. SOMA Pontos 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 LIMITES PARA CONCEITUAÇÃO AVALIAÇÃO FINAL Pontos De 57 a SOFRÍVEL SOMA do Quadro I multiplicada por 7 De 102 a REGULAR SOMA do Quadro II multiplicada por 3 De 148 a 194 BOM SOMA TOTAL De 195 a MUITO BOM De 241 a EXCELENTE Nome da Empresa: Yogh Soluções para Internet Ltda. Representada pelo Supervisor: Lucas Simões de Carvalho CONCEITO CONFORME SOMA TOTAL Rubrica do Supervisor da Empresa Lucas Simões de Carvalho Local: Joinville Data: / / Carimbo da Empresa

5 V UNIVERSIDADE DO ESTADO DE SANTA CATARINA - UDESC CENTRO DE CIÊNCIAS TECNOLÓGICAS - CCT PLANO DE ESTÁGIO I e II CURRICULAR OBRIGATÓRIO ESTAGIÁRIO Nome: DinaraPereira Lima Matrícula: Endereço: Rua Aracajú, 594 Bairro: Saguaçú CEP: Cidade: Joinville UF: SC Fone: (47) Endereço (Local estágio): Rua Desembargador Nelson Nunes Guimarães, 1283 Bairro: Atiradores CEP: Cidade: Joinville UF: SC Fone: (47) dinara.lima@gmail.com Regularmente matriculado no semestre: 2010/02 Curso: Tec. Sistemas de Informação Formatura (prevista) Semestre/Ano: 2011/01 UNIDADE CONCEDENTE Razão Social: YOGH SOLUÇÕES PARA INTERNET LTDA CGC/MF: / Endereço: Rua Desembargador Nelson Nunes Guimarães, 1283 Bairro: Atiradores CEP: Cidade: Joinville UF: SC Fone: (47) Atividade Principal: Analista de Usabilidade Supervisor: Lucas Simões de Carvalho Cargo: Analista de Soluções Web DADOS DO ESTÁGIO Área de atuação: Desenvolvimento de Interfaces Departamento de atuação: Desenvolvimento Web Fone: Ramal: Horário do estágio: 08:00-12:00 / 14:00-16:00 Total de horas do Estágio: 240 Período: 02/09/2010 a 29/10/2010 Total de horas semanais: 30 Nome do Professor Orientador: Claudiomir Selner Departamento: DCC - Departamento de Ciência da Computação Disciplina(s) simultânea(s) com o estágio Quantas: 5 Quais: SQL GERENCIA DE PROJETOS PESQUISA OPERACIONAL JAVA AVANÇADO II

6 OBJETIVO GERAL Cooperar na melhoria da imagem e da visibilidade dos clientes Doces Mônica Schulz e Programa Fabíola Bernardes na Internet ATIVIDADES OBJETIVO ESPECÍFICO HORAS Analisar as necessidades do Obter os objetivos e necessidades do cliente 10 cliente Protipar a página Obter a estrutura da página, visando atender aos 10 objetivos definidos pelo cliente Definir a Identidade e Ter padrão da página web que reflita a identidade 40 Padrões da página da empresa solicitante, além de oferecer uma página agradável e atrativa para os usuários Fazer o desenvolvimento Obter páginas atrativas e de fácil uso para os 50 visual das Páginas usuários Implementar a interface no Obter a interface funcional do site 40 wordpress Customizar as ferramentas Obter os plugins do wordpress customizados para 20 adicionais para o site atender necessidades específicas do cliente Otimizar as páginas (SEO), Ter as páginas do Website otimizadas para os 20 com análise de concorrentes e definição de palavraschave relevantes ao site mecanismos de busca, como: Google, Yahoo e Bing Identificar se o site atende Obter página que atenda os requisitos mínimos de 20 os requisitos mínimos de usabilidade (conformidade com a maioria dos browsers, acessibilidade etc) compatibilidade e acessibilidade na Internet Executar a publicação e Ter a página disponível na Internet 10 configuração da página online Desenvolver o manual de Obter material necessário para a utilização do site 20 uso e guia do site pelo cliente TOTAL GERAL DE HORAS 240 VI Rubrica do Professor Orientador Aprovação do Membro do Comitê de Estágio Rubrica do Coordenador de Estágio Rubrica do Supervisor da Empresa Rubrica do Supervisor Acadêmico Data: Prof Claudiomir Selner Data: Data: Prof César Malutta Data: Lucas Simões de Carvalho Data: Profa Avanilde Kemczinski Carimbo da Empresa

7 VII CRONOGRAMA FÍSICO E REAL Atividades P X Analisar as necessidades do cliente R X P X Protipar a página R X P X X X X Definir a Identidade e Padrões da página R X X X X X Fazer o desenvolvimento visual das Páginas Implementar a interface no wordpress P X X X X R X X X X X X Customizar as ferramentas adicionais para o site P X X R X X Otimizar as páginas (SEO), com análise de P X X concorrentes e definição de palavras-chave R X X relevantes ao site Identificar se o site atende os requisitos mínimos P X X de usabilidade (conformidade com a maioria dos R browsers, acessibilidade etc) Executar a publicação e configuração da página P X online R X Desenvolver o manual de uso e guia do site P X X R P X X X X X R X X X X X X Legenda P Previsto R Realizado P Previsto R - Realizado Período de 10 Horas

8 VII I À Equipe da agência Yogh, pela orientação e acompanhamento na execução das atividades. À minha família e amigos pelo apoio.

9 IX SUMÁRIO CRONOGRAMA FÍSICO E REAL... VII LISTA DE FIGURAS... X LISTA DE QUADROS... XI RESUMO... XII INTRODUÇÃO OBJETIVOS Geral Específicos Justificativa ORGANIZAÇÃO DO ESTUDO A EMPRESA HISTÓRICO PRINCIPAIS SERVIÇOS WEB DESIGN E DESENVOLVIMENTO WEB MARKETING OTIMIZAÇÃO SEO APLICAÇÕES WEB PERSONALIZADAS LOCALIZAÇÃO DA EMPRESA DESENVOLVIMENTO ANÁLISE DAS NECESSIDADES DO CLIENTE NECESSIDADES DA CLIENTE MÔNICA SCHULZ NECESSIDADES DA CLIENTE FABÍOLA BERNARDES PROTOTIPAÇÃO DA PÁGINA O PROCESSO DE PROTOTIPAÇÃO DEFINIR IDENTIDADE E PADRÕES REGRAS DE DESENVOLVIMENTO DESENVOLVIMENTO DAS PÁGINAS DESENVOLVIMENTO DAS ÁREAS INTERNAS DAS PÁGINAS PÁGINA HOME DA CLIENTE MÔNICA SCHULZ PÁGINA DE DOCES E CANAPÉS DO SITE MÔNICA SCHULZ PÁGINA DE CONTATO DO SITE MÔNICA SCHULZ PÁGINA HOME DO SITE PROGRAMA FABÍOLA BERNARDES IMPLEMENTAÇÃO DO SITE MÔNICA SCHULZ NO WORDPRESS CRIAÇÃO DOS TEMPLATES NO WORDPRESS CUSTOMIZAÇÃO DE FERRAMENTAS ADICIONAIS PARA O SITE CRIAÇÃO DE PÁGINAS E INSERÇÃO DE CONTEÚDO ANÁLISE DO SITE ATUAL ANÁLISE DE CONCORRENTES OTIMIZAÇÃO SEO ONPAGE EXECUTAR A PUBLICAÇÃO E CONFIGURAÇÃO DA PÁGINA ONLINE CONSIDERAÇÕES FINAIS GLOSSÁRIO REFERÊNCIAS BIBLIOGRÁFICAS... 46

10 X LISTA DE FIGURAS Figura 1: Interface da ferramenta Balsamiq Mockups... 7 Figura 2: Protótipo da página Home para a cliente Fabíola Bernardes... 8 Figura 3: Tela do software de criação Photoshop com o template base do 960 Grid System, com 16 colunas Figura 4: Cores e texturas utilizadas na página Mônica Schulz Figura 5: Cabeçalho do site Doces Mônica Schulz Figura 6: Esqueleto e Identidade visual do site Mônica Schulz Figura 7: Cores que representam feminilidade de acordo com o livro Color Harmony, a guide to creative color combinations Figura 8: Exemplo de site brilhante usado como referência para o design da do site Programa Fabíola Bernardes Figura 9: Cores e texturas utilizadas na página Fabíola Bernardes Figura 10: Cabeçalho do site Fabíola Bernardes Figura 11: Esqueleto e Identidade visual do site Fabíola Bernardes Figura 12: Visão geral da página home do site Mônica Schulz Figura 13: Áreas em destaque na home do site Mônica Schulz Figura 14: Área explicativa sobre a empresa na home do site Mônica Schulz Figura 15: Galeria de imagens nas páginas de doces e canapés do site Mônica Schulz Figura 16: Apresentação das opções de doces e salgados diferentes nas páginas de doces e canapés do site Mônica Schulz Figura 17: Página de Doces no site Mônica Schulz Figura 18: Página de Canapés no site Mônica Schulz Figura 19: Página de Contato no site Mônica Schulz Figura 20: Página home do site Programa Fabíola Bernardes Figura 21: Forma comum de leitura de um website de acordo com o livro Don t make me think Figura 22: Estrutura de pastas e arquivos do CMS Wordpress Figura 23: porcentagem de uso do browser Internet Explorer comparado aos demais em 2010 pelo site w3schools.com Figura 24: porcentagem de uso do browser Internet Explorer 6 comparado as demais versões em Figura 25: Resultado da implementação do cabeçalho do site Mônica Schulz Figura 26: Fonte KennedyDB renderizada na página web sem necessidade do usuário possuíla na máquina Figura 27: Interface de administrador de conteúdo no Wordpress Figura 28: Criação de uma nova página no wordpress Figura 29: Criação de um elemento interno, no exemplo, um elemento do menu interno na home Figura 30: Criação de conteúdo para a página Home Figura 31: Inserção de campos personalizados Figura 32: Configuração do mapa da google na página de contato Figura 33: Acessos ao site atual da Mônica Schulz entre Agosto e Outubro... 39

11 XI LISTA DE QUADROS Quadro 1: Relatório das atividades realizadas de 02/09/2010 a 03/09/ Quadro 2: Relatório das atividades realizadas de 03/09/2010 a 08/09/ Quadro 3: Relatório das atividades realizadas de 08/09/2010 a 17/09/ Quadro 4: Relatório das atividades realizadas de 20/09/2010 a 05/10/ Quadro 5: Relatório das atividades realizadas de 05/10/2010 a 25/10/ Quadro 6: Relatório das atividades realizadas de 26/10/2010 a 28/10/ Quadro 7: Relatório das atividades realizadas em 29/10/

12 XII RESUMO São reportadas nesse relatório as atividades executadas no período de estágio obrigatório do acadêmico, na empresa Yogh Soluções para Internet. As atividades foram executadas durante o período de 240 horas no setor de desenvolvimento Web. Nesse período foi desenvolvido o site da cliente Mônica Schulz e desenvolvido parte do do site da cliente Fabíola Bernardes. A criação do site envolve a análise de necessidades, planejamento, desenvolvimento gráfico, implementação e otimização, utilizando conceitos de disciplinas do curso de Tecnologia em Sistemas de Informação, como Análise de Sistemas, Engenharia de Software, Banco de dados e SQL avançado, além conhecimentos novos aprendidos durante o estágio. As atividades de entrega do site e criação do manual ficaram pendentes, além do desenvolvimento das páginas internas, implementação e otimização do site Programa Fabíola Bernardes. Apesar das pendências, grande parte dos resultados já podem ser vistos e a execução das atividades conseguiu atingir grande parte dos objetivos traçados no plano.

13 1 INTRODUÇÃO No presente relatório são descritas as atividades executadas durante o período de estágio supervisionado na empresa Yogh Soluções para Internet, no setor de desenvolvimento web. O projeto consiste na criação de website com administração de conteúdo para os clientes Doces Mônica Schulz e Programa Fábiola Bernardes, para o êxito dos projetos foram desenvolvidos no período de estágio diversas atividades que envolvem desde a coleta de informações até a implementação e entrega do website. A seguir são descritos os objetivos propostos para a execução no período de estágio, justificativas para o desenvolvimento, organização do estudo e um breve descritivo sobre a empresa onde o estágio ocorreu OBJETIVOS Geral O objetivo do projeto é cooperar na melhoria da imagem e da visibilidade dos clientes Doces Mônica Schulz e Programa Fabíola Bernardes na Internet através da criação de website com administração de conteúdo, que traga mais atratividade para a empresa, além da facilidade de busca e uso do site. A execução desse projeto envolvendo a empresa Yogh e a instituição de ensino Udesc tem o objetivo de aprimorar e aplicar os conceitos absorvidos no curso de Sistemas de Informação, para constribuir com o desenvolvimento profissional e acadêmico Específicos 1. Levantar os objetivos e necessidades dos clientes 2. Traçar a estrutura do website, visando atender aos objetivos definidos pelo cliente 3. Obter padrão da página web que reflita a identidade da empresa solicitante, além de oferecer um website agradável e atrativa para os usuários 4. Fornecer páginas atrativas e de fácil uso para os usuários

14 2 5. Ter a interface funcional do site 6. Obter os plugins do gerenciador de conteúdo wordpress customizados para atender necessidades específicas do cliente 7. Ter as páginas do Website otimizadas para os mecanismos de busca, como: Google, Yahoo e Bing 8. Fornecer página que atenda os requisitos mínimos de compatibilidade e acessibilidade na Internet 9. Ter o website disponível na Internet 10. Fornecer material necessário para a utilização do site pelo cliente Justificativa O sites atuais dos clientes Mônica Schulz e Fabíola Bernardes foram desenvolvidos com tecnologias e design que não estão mais de acordo com os padrões web do período em que esse relatório foi escrito. Em consequência disso os sites não apresentam visual atrativo, não atendem padrões de usabilidade, demoram muito tempo para carregar e não podem ser visualizados por todos os computadores, além de não serem facilmente encontrados pelos sites de busca. O aprimoramento das tecnologias atuais não seriam suficientes para proporcionar um site fácil de atualizar e com visual atrativo ORGANIZAÇÃO DO ESTUDO O relatório aqui apresentado é dividido em três capítulos assim descritos: Primeiro Capítulo: Mostra o objetivo geral, objetivos específicos, justificativa e a organização do estudo deste relatório. Segundo Capítulo: Mostra informações referente a empresa em que foi feita o estágio, informações de seus produtos e localização. Terceiro Capítulo: Mostra o conteúdo desenvolvido pelo acadêmico, durante as 240 horas de estágio.

15 3 2. A EMPRESA 2.1. HISTÓRICO A Yogh Soluções para a Internet é uma agência Web em seu primeiro ano de atividade na cidade de Joinville que conta com profissionais na área de design, tecnologia, marketing e negócios. A empresa oferece aos clientes soluções personalizadas para atender necessidades específicas do negócio, utilizando as últimas tecnologias e processos de trabalho para trazer resultados mensuráveis que atendam o objetivo proposto PRINCIPAIS SERVIÇOS A Yogh é focada no desenvolvimento de tecnologia web, especializada em criar soluções para empresas, conciliando estratégia, criatividade e as tecnologias corretas. A Yogh visa melhor enteder seu cliente e desenvolver soluções criativas e eficientes através de projetos exclusivos, garantindo a apresentação da imagem corporativa com criatividade e profissionalismo WEB DESIGN E DESENVOLVIMENTO WEB Um dos serviços oferecidos pela empresa é a criação gráfica e implementação de páginas na internet personalizadas, focadas na facilidade de uso, na fácil manutenção e na otimização para sites de busca. Entre os produtos são destacados a criação de portais, sites corporativos, blogs e hot sites. O trabalho da Yogh envolve desde a criação das interfaces intuitivas baseados em conceitos de usabilidade juntamente com design seguindo tendências da web até a construção de sites administráveis baseados em plataformas open-source como Joomla, Wordpress, Drupal e Magento.

16 MARKETING 4 Outro serviço é o desenvolvimento do planejamento, design e execução de campanhas de com relatório de visualizações e cliques por campanha para analisar a efetividade no público atingido. O foco nesta área é garantir a boa comunicação do produto/serviço da empresa, aliado a construção de HTMLs válidos para as diferentes clientes de e webmail disponíveis no mercado OTIMIZAÇÃO SEO O serviço de SEO (Search Engine Optimization) inclui a avaliação, consultoria e manutenção em sites e páginas da Internet com o objetivo de alavancar a quantidade e qualidade dos visitantes dos mesmos. Baseado em estratégias alinhadas com as ferramentas de busca como Google, Yahoo e Bing, a empresa trabalha com análise e manutenção em cada caso especificamente para obter melhores resultados garantindo um melhor retorno na Internet para as empresas APLICAÇÕES WEB PERSONALIZADAS A Yogh trabalha com projetos web personalizados que podem ser integrados com sistemas CRM (Customer Relationship Management), sistemas de atendimento (chat, fóruns e FAQ). Criamos ainda áreas restritas, hotsites para divulgação de novos produtos e soluções para comércio eletrônico. As aplicações web personalizadas incluem sistemas específicos para cada negócio ou ainda personalizado para cada cliente LOCALIZAÇÃO DA EMPRESA A Yogh possui uma sede, que está localizada na Rua Desembargador Nelson Nunes Guimarães, número 1283, Bairro Atiradores, em Joinville, no estado de Santa Catarina.

17 5 3. DESENVOLVIMENTO 3.1. ANÁLISE DAS NECESSIDADES DO CLIENTE O objetivo dessa atividade é obter o maior número de detalhes sobre as necessidades do cliente, segundo Daniel Aisenberg (2004) no artigo "A importância do briefing em sites de empresas" a coleta de informações é um passo muito importante no projeto de desenvolvimento web porque mostra o rumo certo desde o início do projeto, mostrando claramente grande parte dos detalhes envolvidos. Com a coleta de dados documentada, a perda de informações é menor e a chance do projeto apresentar desvios quando comparados à visão do cliente também são consideravelmente menores. A identificação de necessidades essenciais do cliente é um documento que apresenta de forma estruturada as necessidades específicas do projeto para o desenvolvimento do site. Através de um modelo criado pela empresa é feita uma entrevista com o cliente para coletar informações, a estrutura desse documento apresenta primeiramente os dados básicos da empresa e formas de contato. Na sessão "O projeto" são listados os recursos e objetivos principais do projeto, descrição do público-alvo, concorrentes, sites de referência, valor do investimento e prazo de execução, já em "Informações sobre a empresa" são dadas informações que definam a empresa, como produtos e serviços que oferecem, pontos fortes e imagem que deseja transmitir, em "Público alvo da Empresa" é descrito o perfil do público-alvo do cliente, localização, renda, faixa etária, entre outros. Na definição do projeto são listados os responsáveis na empresa do cliente na comunicação e tomada de decisões sobre o projeto, além de detalhes específicos do projetos, como público-alvo pretendido e detalhes sobre a estrutura visual, recursos adicionais, detalhes sobre administração de domínio e hospedagem e contas de NECESSIDADES DA CLIENTE MÔNICA SCHULZ Através do documento de necessidades do cliente foi constatado que o site Mônica Schulz deve ser atualizado, pois já não atende o esperado atualmente pelo público alvo

18 6 quanto a atratividade, tecnologia e usabilidade. A empresa deseja manter a cor atual, mas deseja um site com tons mais vivos, as fotos devem ser o foco da apresentação visual. O público-alvo são pessoas que irão fazer eventos como aniversário e casamento, e os clientes geralmente são da região. Como conteúdo do site, a empresa deseja as páginas Home, Doces, Canapés e Contato, já quanto a recursos adicionais, foi solicitado o mapa do Google na página de contatos, otimização SEO básica e relatório de acesso NECESSIDADES DA CLIENTE FABÍOLA BERNARDES Através do documento de necessidades foi constatado que o site Programa Fabíola Bernardes deve ser atualizado, pois o site atual não possui a identidade atual do programa e não recebe mais otimizações. A cliente deseja uma nova identidade visual para seu site e recursos adicionais, como nova área de matérias, dicas, galeria de fotos, área de banners para parceiros, recurso de busca e chamada para cadastro. Atividades desenvolvidas: Analisar as necessidades do cliente. Dificuldades encontradas: Dificuldade em recolher todas as informações necessárias para o preenchimento do documento de necessidades. Formas utilizadas para vencer as dificuldades: Além de entrevistas com os clientes foram feitas pesquisas do conteúdo já existente nos seus sites atuais: e Novos aprendizados adquiridos: - Como recolher informações para o projeto Atividade Analisar as necessidades do cliente RESUMO DO ESTÁGIO - 2. A EMPRESA, 3. DESENVOLVIMENTO Data de % de Tempo realização e Fonte dos dados conclusão gasto horários (acumulado) 02/09/ :00 as 12:00 14:00 as 16:00 03/09/2010, 08:00 as 12:00 10:00 - Entrevista com cliente. - Site com.br Quadro 1: Relatório das atividades realizadas de 02/09/2010 a 03/09/ horas 4 % Índice de conclusão da atividade 10 de 10 horas (100%) 3.2 PROTOTIPAÇÃO DA PÁGINA O objetivo da prototipação é obter as necessidades do cliente em forma de estrutura básica do website, ainda sem preocupação com visual e tecnologia.

19 7 Segundo Lyndon Cerejo (2010) no artigo Design Better And Faster With Rapid Prototyping (Design melhor e mais rápido com prototipação rápida) a prototipação facilita o entendimento da equipe de desenvolvimento e do próprio cliente sobre o visual e comportamento do website. O protótipo pode ser rapidamente validado com grandes equipes, já que detalhes visuais e tecnológicos não são discutidos nesse ponto. Essa etapa do projeto acelera a criação da ideia e evita que trabalho seja refeito nas etapas de design e desenvolvimento, já que o retorno é dado imediatamente e no ponto inicial do projeto. O processo de prototipação também permite que novas necessidades sejam encontradas e soluções sejam dadas no início do projeto O PROCESSO DE PROTOTIPAÇÃO Para o desenvolvimento dos protótipos foi utilizada a ferramenta Balsamiq Mockups, uma ferramenta proprietária de baixo custo, destinada a desenvolver protótipos de baixa fidelidade, ou seja, que representam somente a organização das informações e não o conceito final do projeto: Figura 1: Interface da ferramenta Balsamiq Mockups

20 8 Para o desenvolvimento do protótipo é utilizado um template que possui as medidas adotadas como padrão para a criação posterior da página web. Para cada página é utilizado o método iterativo, inicialmente são colocados todos os componentes necessários de forma básica e através de discussão com o demais membros da equipe é feito um novo refinamento. Além dos objetivos já descritos pelo cliente, é feita uma análise sobre tendências da web na mesma área de atuação, para entender que tipo de informação o cliente final espera. O resultado final são telas que demonstram de forma simples os detalhes que precisam estar no web site: Figura 2: Protótipo da página Home para a cliente Fabíola Bernardes

21 9 Atividades desenvolvidas: Prototipar a página Dificuldades encontradas: Transformar as necessidades reais do cliente em modelo de página web completa e atrativa. Formas utilizadas para vencer as dificuldades: Discussão e aprimoramento do protótipo com outros membros da equipe e clientes, além de análise de empresas semelhantes. Novos aprendizados adquiridos: - Como organizar as informações de um projeto para desenvolvimento visual de forma rápida Atividade Prototipar a página RESUMO DO ESTÁGIO - 2. A EMPRESA, 3. DESENVOLVIMENTO Data de % de Tempo realização e Fonte dos dados conclusão gasto horários (acumulado) 03/09/ :00 as 16:00 06/09/2010, 08:00 as 12:00 14:00 as 16:00 08/09/ :00 as 10:00 10:00 - Entrevista com cliente. - Site magazine.com Quadro 2: Relatório das atividades realizadas de 03/09/2010 a 08/09/ horas 8 % Índice de conclusão da atividade 10 de 10 horas (100%) 3.3 DEFINIR IDENTIDADE E PADRÕES O objetivo dessa atividade é obter a identidade visual das páginas, baseado nas necessidades e características do cliente. Conhecendo as necessidades, objetivos e com o protótipo do website o desafio é desenvolver os elementos visuais para a página web, que simultaneamente demonstram a identidade da empresa e atinjam as necessidades especificadas pelo cliente. De acordo com Dmitry Fadeyev (2008) no artigo Strategic Design: 6 Steps for building successful websites (Design Estratégico: 6 passos para a criação de Websites de sucesso) a criação do web design é um processo que envolve diferentes fatores, envolvendo desde o estudo da identidade da marca e personalidade da empresa até a escolha de padrões e guias que facilitem a utilização do usuário e os leva a executar as ações que estão dentro dos objetivos da empresa REGRAS DE DESENVOLVIMENTO Para desenvolver o design de uma página web existem regras básicas que devem ser seguidas, como padrões de dimensões e boas práticas para facilitar a implementação.

22 Padrão 960 grid system 10 De acordo com o 960.gs (2010) o 960 Grid System é um processo de trabalho que delimita as dimensões da página e define grids onde o conteúdo será distribuído. O objetivo desse padrão é manter o design da página em conformidade com o padrão atual de resolução dos monitores e oferecer um guia que facilita o desenvolvimento de elementos para a página, tornando esses elementos alinhados e com dimensões harmoniosas. O 960 Grid System conta com um template de 960 pixels de largura, tendo em cada lateral 10 pixels de folga. Além disso o template é dividido em grids de 12, 16 ou 24 colunas. O padrão utilizado para o desenvolvimento das páginas nesse projeto foi de 16 colunas: Figura 3: Tela do software de criação Photoshop com o template base do 960 Grid System, com 16 colunas DESENVOLVIMENTO DAS PÁGINAS Com o protótipo da página e as regras básicas definidas a tarefa é definir a personalidade da página que simultaneamente reflita a empresa e atenda seus objetivos específicos.

23 11 O design das páginas foi desenvolvido utilizando o programa de criação gráfica Photoshop, o software foi utilizado pois apresenta um conjunto de ferramentas gráficas poderosas para ser possível desenvolver um design realmente atrativo Criação da Identidade visual da página Mônica Schulz Para atender o enfoque principal de Mônica Schulz, que é chocolates, foi desenvolvido o design da página pensando na cor marron com textura romântica, além de um forte contraste em azul com textura de papel, para remeter a aparência de um doce decorado. Esse padrão de cores foi escolhido baseado na análise de sites feita pelo Editorial da Smashing Magazine (2010): Showcase of Sweet Chocolate Websites (Caso de Websites de Chocolate), segundo o artigo esses sites apresentam comumente a predominância de marron para despertar o apetite, que pode ser combinada com uma infinidade de cores. A cor azul turquesa foi utilizada por representar bem a embalagem clássica de trufas, e além disso é um tom que quebra o tom escuro do marron predominante. Basicamente, as cores e texturas que se repetem pela página são as seguintes: Figura 4: Cores e texturas utilizadas na página Mônica Schulz Para a navegação e reconhecimento rápido do usuário pela página o cabeçalho da página conta com a logomarca da empresa em destaque com o menu:

24 12 Figura 5: Cabeçalho do site Doces Mônica Schulz Segundo Vitaly Friedman (2008), no artigo Navigation Menu: Trends and Examples (Menu de navegação: Tendências e exemplos) o menu de navegação é um ítem crucial em um Website, que permite o usuário acessar rapidamente as áreas do site. Tendo como base os elementos essenciais o esqueleto com identidade visual da página está desenvolvido: Figura 6: Esqueleto e Identidade visual do site Mônica Schulz Criação da Identidade visual da página Fabíola Bernardes O objetivo principal do site é receber a audiência que a apresentadora já possui na televisão, passando o visual de glamour, feminilidade e elegância conhecido, e além disso dar

25 13 acesso rápido a todas as informações essenciais que envolvem o programa, como acesso as mídias sociais e canais e revistas que a apresentadora está presente. Para atender as necessidades, foram utilizadas texturas que representam cores femininas, o roxo e bege, seguindo as definições de Hideaki Chijiiwa (1992) no livro Color Harmony, a guide to creative color combinations (Harmonia de Cor: um guia prático para a combinação de cores criativas). Figura 7: Cores que representam feminilidade de acordo com o livro Color Harmony, a guide to creative color combinations Para texturizar a página foram utilizados losangos, representando elegância, comumente encontrados em sites de vinhos e champagnes, essa relação foi feita com base na análise de sites que representam a personalidade elegante e brilhante requerida pela cliente. Figura 8: Exemplo de site brilhante usado como referência para o design da do site Programa Fabíola Bernardes As texturas e cores utilizadas foram as seguintes: Figura 9: Cores e texturas utilizadas na página Fabíola Bernardes

26 14 Para acesso rápido as funções principais do site o cabeçalho contém além de uma imagem da apresentadora link para mídias sociais e informações sobre revistas e canais de televisão onde ela está presente, além de um campo de busca rápida ao conteúdo do site. O resultado foi o seguinte: Figura 10: Cabeçalho do site Fabíola Bernardes A estrutura básica da página conta com o cabeçalho, uma área central de atenção, com os ítens mais importantes e mais um área, reservada para informações adicionais: Figura 11: Esqueleto e Identidade visual do site Fabíola Bernardes

27 15 Atividades desenvolvidas: Desenvolver a identidade visual dos sites Dificuldades encontradas: Transmitir a identidade da empresa e criar uma interface atrativa e acessível para os usuários Formas utilizadas para vencer as dificuldades: Análise de padrões de cores e empresas do mesmo ramo Novos aprendizados adquiridos: - Combinação de cores e aplicação em estrutura de página web Atividade Definir identidade e padrões de página RESUMO DO ESTÁGIO - 2. A EMPRESA, 3. DESENVOLVIMENTO Data de % de Tempo realização e Fonte dos dados conclusão gasto horários (acumulado) 08/09/ :00 as 12:00 14:00 as 16:00 09/09/2010, 10/09/2010, 11/09/2010, 12/09/2010, 13/09/2010, 14/09/2010, 15/09/2010, 16/09/ :00 as 12:00 Das 14:00 as 16:00 17/09/2010das 08:00 as 12:00 50:00 - Entrevista com cliente. - Site magazine.com - Livro Color Harmony, a guide to creative color combinations Quadro 3: Relatório das atividades realizadas de 08/09/2010 a 17/09/ horas 29 % Índice de conclusão da atividade 50 de 40 horas (125%) 3.4 DESENVOLVIMENTO DAS ÁREAS INTERNAS DAS PÁGINAS O desenvolvimento das páginas internas é feito utilizando as mesmas regras aplicadas na criação da identidade da página, para o desenvolvimento dos componentes são utilizadas como base as divisões de 16 colunas do 960 grid system. Para a criação dos componentes internos foram utilizadas como base definições básicas para interfaces com usuários, segundo o livro Smashing Book (2009) uma boa interface com o usuário não depende somente de um arranjo de menus e botões, e sim da facilidade de interação de um grande grupo de usuários com a aplicação, no desenvolvimento da interface com o usuários algumas características devem ser observadas, a interface deve basicamente ser simples e clara para o usuário não se perder no conteúdo, além disso os elementos da página, principalmente os que terão interação, devem ser familiares para facilitar o reconhecimento rápido do usuário.

28 Baseado nos conceitos básicos de usabilidade para web foram desenvolvidas as seguintes páginas: PÁGINA HOME DA CLIENTE MÔNICA SCHULZ Segundo Derek Powasek (2008) no artigo Home Page Goals (Objetivos da página home) a primeira página do site deve responder rapidamente ao usuário coisas básicas como o que é aquele site e para que ele serve, além de mostrar o caminho rápido às áreas que ele pretende entrar. Para atender a essas especificações foi desenvolvida uma página com uma área de destaque para apresentar a empresa e uma área de ação para direcionar às páginas mais importantes do site. A visão geral do resultado é a seguinte: Figura 12: Visão geral da página home do site Mônica Schulz Chamadas em destaque Baseado nas necessidades principais da cliente foi criada na página home uma área de destaque, com uma descrição rápida e chamada comercial, para que o usuário entenda rapidamente do que se trata o site. Visando o acesso rápido às áreas mais importantes do site, doces e canapés, foi criada uma chamada destacada para essas áreas com botões. De acordo com Steve Krug (2000) no livro Don t make me think (Não me faça pensar) os botões call to action (chamada para

29 17 ação) devem ser de rápido conhecimento pelo usuário, para que isso aconteça ele recomenda que se deixe claro a área clicável e que os textos sejam pequenos, assim facilmente o usuário entenderá e executará a ação. Figura 13: Áreas em destaque na home do site Mônica Schulz Área explicativa Para complementar o entendimento do site e da empresa sobre a página foi criada logo abaixo da área de destaques campos com informações importantes sobre a empresa.para esse conteúdo ser totalmente lido o usuário terá que utilizar a navegação da página no browser, no caso do monitor ser muito pequeno, mas esse problema não se apresentou relevante porque apesar de importante, essa área tem menos prioridade que a área de destaque para leitura. Figura 14: Área explicativa sobre a empresa na home do site Mônica Schulz PÁGINA DE DOCES E CANAPÉS DO SITE MÔNICA SCHULZ As páginas de doces e canapés possuem o mesmo layout, que atendem o mesmo objetivo básico, que é mostrar fotos dos doces e canapés em geral e apresentar as variades disponíveis em texto.

30 Para isso foi criada uma galeria de imagens em destaque para mostrar as fotos em tamanho grande: 18 Figura 15: Galeria de imagens nas páginas de doces e canapés do site Mônica Schulz Para apresentar os doces e canapés disponíveis em texto foi criada uma área de menu que organiza os sabores/modelos disponíveis em categorias: Figura 16: Apresentação das opções de doces e salgados diferentes nas páginas de doces e canapés do site Mônica Schulz O resultados das páginas de doces e canapés são os seguintes:

31 19 Figura 17: Página de Doces no site Mônica Schulz Figura 18: Página de Canapés no site Mônica Schulz

32 3.4.3 PÁGINA DE CONTATO DO SITE MÔNICA SCHULZ 20 Para a página de contato foi desenvolvido um formulário com as solicitações da cliente, além dos dados de contato, como telefone e . A localização da empresa foi destacada com um mapa que poderá ser ampliado. Figura 19: Página de Contato no site Mônica Schulz PÁGINA HOME DO SITE PROGRAMA FABÍOLA BERNARDES A página home do site Programa Fabíola Bernardes conta com vários recursos para atender as necessidades atuais da empresa. Na área de destaque foram inseridos os elementos mais importantes da página: chamada para mídias sociais (1), campo de busca (2), horários de veiculação do programa (3), Banners de parceiros (4) e chamada para as matérias em destaque (5). Na área inferior foram colocados os elementos que também são importantes, porém menos prioritários: campo para newsletter (6) e área de últimos eventos (7).

33 21 Figura 20: Página home do site Programa Fabíola Bernardes O posicionamento dos elementos foi decidido baseado em um estudo apresentado por Steve Krug (2000), no livro Don t make me think (Não me faça pensar). Segundo o autor a forma mais comum de busca por informações em um site é primeiramente procurar por algo interessante ou que o usuário esteja buscando, em seguida ele procura por elemento clicáveis, e se obtiver a motivação necessária, continua buscando mais informações no site.

34 22 Figura 21: Forma comum de leitura de um website de acordo com o livro Don t make me think Atividades desenvolvidas: Fazer o desenvolvimento visual das páginas Dificuldades encontradas: Encontrar os melhores posicionamentos e destaques para elementos importantes na página Formas utilizadas para vencer as dificuldades: Análise de padrões da web de posicionamento de informações Novos aprendizados adquiridos: - Combinação de cores e aplicação em estrutura de página web Atividade RESUMO DO ESTÁGIO - 2. A EMPRESA, 3. DESENVOLVIMENTO Data de realização e horários Tempo gasto Fonte dos dados % de conclusão (acumulado) Índice de conclusão da atividade Fazer o desenvolv imento visual das páginas 20/09/ :00 as 16:00 21/09/2010, 22/09/2010, 23/09/2010, 24/09/2010, 27/09/2010, 28/09/2010, 29/09/2010, 01/10/2010, 04/10/ :00 as 12:00 das 14:00 as 16:00 05/10/2010 Das 08:00 as 12:00 60:00 - Site art.com/ - Livro Don t make me thing 130 horas 54 % 60 de 50 horas (120%) Quadro 4: Relatório das atividades realizadas de 20/09/2010 a 05/10/2010.

35 3.5 IMPLEMENTAÇÃO DO SITE MÔNICA SCHULZ NO WORDPRESS 23 Para facilitar a criação da página e a futura manutenção e gerenciamento de conteúdo o site foi desenvolvido em Wordpress, um CMS (sistema administrador de conteúdo). Segundo James Robertson no artigo So, what is a CMS? (Então, o que é CMS?), Content Management System (Sistema gerenciador de conteúdo) é um sistema que suporta criação, gerenciamento, distribuição e publicação de informações na web, um sistema gerenciador de conteúdo como o Wordpress facilita desde a criação de páginas até a criação e manutenção de conteúdos, através de ferramentas simples. Além disso é extremamente rápido agregar novas funcionalidades no site através de extensões disponibilizadas na comunidade wordpress.org. A linguagem utilizada para o desenvolvimento no wordpress é php, com base de dados mysql, para os estilos e construção visual é utilizado html e css, além de instruções prédefinidas pelo Wordpress e jquery e Java Script. O PHP, de acordo com o site da comunidade, é uma linguagem de programação projetada para a Web, que pode ser integrado ao HTML, que por sua vez é uma linguagem de marcação que é interpretada por browsers. O PHP no momento da criação desse relatório está na versão 5. O MySQL, de acordo com a empresa desenvolvedora é um sistema gerenciador de banco de dados projetado para a web de alta performance. No desenvolvimento será utilizado o Wordpress 3, que possui licensa de uso GNU GENERAL PUBLIC LICENSE (JUNHO 2007). Para utilização do wordpress basta baixar o código com as funções e templates básicos na comunidade e utilizar um servidor com apache e mysql instalado. A estrutura do CMS possui várias pastas com arquivos php referentes a configuração, templates, plugins e outros. Para criação do site no wordpress são criados templates para as páginas, utilizando o design já definido.

36 24 Figura 22: Estrutura de pastas e arquivos do CMS Wordpress CRIAÇÃO DOS TEMPLATES NO WORDPRESS Por padrão, qualquer projeto do Wordpress possui templates básicos que são customizados com o design especificado, os arquivos ficam armazenados em wpcontent\themes\default e são os seguintes: header.php e footer.php. Além dos templates básicos, foram criados templates adicionais para as páginas internas: homed.php, doces_canapes.php, contact.php, contact-map.php e sidebar-doces_canapes.php Definição de estilos Todas as definições de imagens e estilos são feitas no arquivo style.css para manter a organização do template. De acordo com o W3schools (2008), CSS são folhas de estilo em cascata que servem para definir padrões de estilos para elementos em uma página web.

37 A definição básica do css define o estilo do background, títulos e a largura da página, definida, os estilos definidos no design agora são aplicados ao template. 25 Um detalhe importante na implementação do estilo básico é a utilização de padrões pequenos com repetição para manter o site rápido, a imagem que forma o fundo da página, por exemplo, é um padrão de 138 x 89 pixels com apenas 2.26 KB que se repetem pela página.

38 Customização do template header 26 Nesse template foi adicionado uma chamada para a logo e o menu, da seguinte forma: As definições de imagens e estilos ficam armazenadas no arquivo style.css: Para o menu é necessário se definir estilos para quando ele está sem ação, quando o usuário passa o mouse (hover) e para quando o elemento está selecionado (active). Por padrão o browser Internet Explorer 6 não suporta essa característica do menu, no desenvolvimento de páginas ainda é importante que haja suporte a esse browser, pois ainda há uma grande quantidade de usuários, apesar da quantidade cair a cada ano. De acordo com a pesquisa do site w3schools.com (2010), em 2010, o Internet Explorer representa 31.1% entre os browsers utilizados no mercado. Figura 23: porcentagem de uso do browser Internet Explorer comparado aos demais em 2010 pelo site w3schools.com

39 Dentro dessa porcentagem o Internet Explorer 6 representa 5.6% do mercado 27 Figura 24: porcentagem de uso do browser Internet Explorer 6 comparado as demais versões em 2010 Por esse motivo foi necessário desenvolver uma solução compatível com o Internet Explorer 6. Para solucionar este problema Karl Swedberg (2007) recomenda o uso do plugin jquery através do artigo Quick Tip: Set Hover Class for Anything (Dica rápida: definindo a classe hover para qualquer coisa). Pela definição da comunidade jquery.org, este plugin é uma biblioteca em JavaScript que simplifica criação de eventos, animação e efeitos. Baseado nas dicas do artigo foi desenvolvido o seguinte script para adicionar o efeito jquery de hover e remover o hover padrão, que não é compatível com o browser Internet Explorer 6: Este recurso foi aproveitado em menus internos da página, por este motivo já são chamados os estilos #sidebar_doces_canapes_menu li e #home_doces_canapes, que não fazem parte do cabeçalho. Os estilos para o menu foram definidos no documento de estilos:

40 28 O resultado da header é o seguinte: Figura 25: Resultado da implementação do cabeçalho do site Mônica Schulz Customização do template footer empresa: A implementação do rodapé é simples, sendo aplicado somente o texto de direitos da

41 29 Os estilos criados para o rodapé definem fontes, estilo dos direitos e chamada para imagem do selo da empresa desenvolvedora Customização do template home Na definição básica do novo template são inseridas definições do wordpress no arquivo homed.php que chamam o cabeçalho: <?get_header();?> e o rodapé: <? get_footer();?> Para a definição da área superior da página, com conteúdo e links para as principais páginas foram inseridos os seguintes blocos:

42 30 A partir dessas definições os conteúdos que serão escritos posteriormente no gerenciador de conteúdo aparecerão na página, além disso foram inseridas as chamadas para as páginas mais importantes do site, os estilos foram definidos na página de estilos. Um detalhe importante dos estilos é a definição de mudança da transparência ao se passar o mouse sobre os botões utilizando-se o filtro alpha.

43 Na parte inferior da página home foram definidas três área de descrição que foram implementadas de forma a buscar o conteúdo escrito no gerenciador de conteúdo. 31 O estilo da área inferior apresenta um fundo com textura turquesa, além da definição de imagens, títulos e conteúdo Customização do template doces e canapés As páginas de doces e canapés possui o mesmo layout, dessa forma é necessário criar somente um template.

44 32 Antes do desenvolvimento do template dessa página foi criado o componente sidebar, que irá mostrar os tipos disponíveis de doces e canapés, além de um componente com mensagem comercial na direita. O sidebar foi desenvolvido da mesma maneira que os demais componentes, e assim que precisar ser utilizado é invocado na página. Os efeitos e arredondamentos presentes no componente foram criados no template header. Após a criação do sidebar a base do template de doces e canapés é criado, buscando o conteúdo que será inserido na página e invocando o template sidebar: Para a finalização do template de doces e canapés e criação do template de contato será necessária a instalação de plugins adicionais no wordpress CUSTOMIZAÇÃO DE FERRAMENTAS ADICIONAIS PARA O SITE Para atender algumas necessidades específicas do site foram importadas e customizadas extensões do Wordpress para a galeria, formulário de contato, mapa e inserção de fontes que não são padrão do sistema. Por padrão, todas as extensões do wordpress são automaticamente instaladas quando colocadas na pasta plugins Extensão slideshow gallery Segundo a empresa desenvolvedora Tribulant (2010), o Slideshow Gallery é uma extensão compatível com a versão 3 do wordpress que utiliza jquery para animação e possui fácil integração. Para customizar o plugin as imagens dos botões Ir e Voltar foram trocados e os estilos no documento css. Após a customização basta invocar a galeria no template de doces e canapés:

45 Extensão contact form De acordo com o desenvolvedor, o Contact Form 7 (2010) é uma extensão utilizada para gerenciar com facilidade formulários de contato para envio de informações por . Esta extensão foi utilizada na página de contato, e foi invocada da seguinte maneira: Extensão google maps for wordpress Este plugin permite a inserção de mapas do google no site, permitindo a navegação pelo usuário. Na página de contato o mapa navegável é mostrado em um componente no chamado FancyBox, segundo o site do desenvolvedor, essa ferramenta mostra conteúdo, como imagens, multimídia e outros em sobre uma caixa escura que cobre o restante do site.

46 Extensão wp cufon 34 Segundo Erik Olson (2009) no artigo Cufón Font Replacement The good and the bad (Substituição de fontes Cufón o bom e o ruim) cufón é uma técnica de substituição de fontes que utiliza JavaScript para importar uma fonte do servidor, transformar o texto em imagem, e manter o conteúdo textual. Para a customização do plugin é necessário criar uma pasta em plugins chamada fonts e inserir a fonte, nesse caso a KennedyDB Normal.otf. Dessa forma quando essa fonte for definida nos estilos a extensão criará uma imagem do texto. Figura 26: Fonte KennedyDB renderizada na página web sem necessidade do usuário possuí-la na máquina CRIAÇÃO DE PÁGINAS E INSERÇÃO DE CONTEÚDO Após a criação e configuração dos templates no Wordpress é necessário criar as páginas e inserir conteúdo. A criação das páginas e conteúdo é feita através do painel de administração do Wordpress: Figura 27: Interface de administrador de conteúdo no Wordpress.

47 Criação das páginas 35 Para criar as páginas do site é necessário clicar em Páginas > Adicionar nova. Em seguida, é definido um título para a página e, em atributos da página é escolhido o template criado para a página. Figura 28: Criação de uma nova página no wordpress Em casos específico, como no menu que mostra tipos de doces e canapés disponíveis e os elementos inferiores da página home, para cada elementos novo é criado uma nova página, e em atributos da página é escolhido como Mãe a página principal, como Doces, Salgados ou Home. Figura 29: Criação de um elemento interno, no exemplo, um elemento do menu interno na home

48 Inserção e configuração de conteúdo 36 Com todas as páginas criadas é necessário inserir o conteúdo e configurar dados de alguns plugins através do painel de administração. Para inserir conteúdo nas páginas é necessário digitar o conteúdo no editor de texto do administrador e definir os estilos já criados no nos estilos css. Por exemplo, na página home o título foi definido no editor como Cabeçalho 1, pois foi o elemento H1 foi definido com estilos diferenciado no css. Figura 30: Criação de conteúdo para a página Home Para a criação dos dados de contato foi necessária a criação de campos personalizados para definir dados como endereço, telefone e . Figura 31: Inserção de campos personalizados

49 Para buscar esses dados, o template da página de contato chama os ítens da seguinte forma: 37 $contact_info = get_post_custom($post->id); O plugin do mapa deve ser configurado na administração para adicionar a API key do google, este que referencia o mapa da empresa. Segundo a página da Google a API permite integrar o Google Maps à página web. Para criar a API Key basta acessar o site de códigos da Google, disponível em Figura 32: Configuração do mapa da google na página de contato. Atividades desenvolvidas: Implementar a interface no wordpress; Customização de ferramentas adicionais para o site; Inserção do conteúdo pela interface de administração do wordpress; Verificação d os requisitos mínimos de usabilidade Dificuldades encontradas: Customizar a extensão do google maps para que abrisse o conteúdo em uma caixa externa Formas utilizadas para vencer as dificuldades: Utilização da ferramenta FancyBox Novos aprendizados adquiridos: - Utilização de templates no Wordpress e plugins de efeito Atividade Implementa r a interface no Wordpress, Customizaç ão de ferramentas adicionais para o site RESUMO DO ESTÁGIO - 2. A EMPRESA, 3. DESENVOLVIMENTO % de Data de realização e Tempo conclusão Fonte dos dados horários gasto (acumulad o) 05/10/ :00 as 16:00 06/10/2010, 07/10/2010, 08/10/2010, 11/10/2010, 13/10/2010,14/10/2010, 15/10/2010, 18/10/2010, 19/10/2010, 20/10/2010, 21/10/2010, 22/10/2010 e 25/10/ :00 - Site - Site om - Site - Site - Site m/apis/maps Quadro 5: Relatório das atividades realizadas de 05/10/2010 a 25/10/ horas 87 % Índice de conclusão da atividade 80 de 60 horas (133%)

50 3.6 OTIMIZAÇÃO DAS PÁGINAS PARA SITES DE BUSCA (SEO) NO SITE MÔNICA SCHULZ 38 Para o site da Mônica Schulz foi feita a otimização SEO OnPage. Segundo Jennifer Grappone e Gradiva Couzin (2006) no livro Search Engine Optimization: An hour a day (Sistema de otimização de buscas: uma hora por dia) Search Engine Optimization é uma série de atividades que pretendem aumentar o número de visitantes que chegam em uma página web através de sites de busca como Google, Yahoo, Bing e outros. Essas atividades envolvem alterações nos textos das páginas e HTML e codificação da página segundo os padrões do W3C (de acordo com o site da organização é uma comunidade internacional que desenvolve padrões de desenvolvimento e interpretação de páginas web) análise de concorrentes e do público alvo do cliente, entre outros. A otimização do site teve como foco o mercado de pessoas que procuram por doces para eventos na região de Joinville ANÁLISE DO SITE ATUAL Para definir pontos importantes de otimização foi feita uma breve análise do site que está atualmente no ar. A página em questão foi desenvolvida em Flash e sem nenhum conteúdo textual visível para os buscadores, o único ítem que poder ser encontrado é o título Mônica Schulz. Os ítens encontrados na página se chamam SERP (Search Engine Result Page Página de resultado dos sistemas de busca). Flávio Cabral Filho (2008), Analista Sênior da empresa MestreSEO, descreve no seu artigo SEO e Flash que as ferramentas de busca não conseguem indexar com facilidade conteúdos desenvolvidos com a tecnologia Flash, pois não é possível para os buscadores buscar os links das páginas desenvolvidas com essa tecnologia. Apesar de não possui otimização o site apresentou tráfego médio de 100 visitas/mês nos meses de Agosto, Setembro e Outubro, essa análise foi feita com a ferramenta Google Analytics.

51 39 Figura 33: Acessos ao site atual da Mônica Schulz entre Agosto e Outubro ANÁLISE DE CONCORRENTES Primeiramente foram listados os concorrentes da empresa que possuem site e obtiveram boas posições no buscador da Google. Os termos pesquisados foram doces finos, doces finos em Joinville, doces para eventos em São Paulo e Doces para eventos em Joinville. Foi feita uma breve análise do código fonte nos concorrentes: Kiki Ferreira, D Paula Doces e Dona Zeny Análise do site O site dessa empresa também está em Flash, porém possui descrição e keywords (palavras-chave) no código-fonte: Análise do site O site foi desenvolvido utilizando HTML e css e os links são canônicos, ou seja, tem um link com texto significante, ao invés da página de produtos se chamar apenas page1, por