TRABALHO DE CONCLUSÃO DO CURSO TÉCNICO EM INFORMÁTICA NOVO SITE DO COUGARS

Transcrição

1 Centro Estadual de Educação Tecnológica Paula Souza GOVERNO DO ESTADO DE SÃO PAULO Etec JORGE STREET TRABALHO DE CONCLUSÃO DO CURSO TÉCNICO EM INFORMÁTICA NOVO SITE DO COUGARS Enrico Zósimo Gonçalves Gimenez Alan da Cruz Andrade Lucas Augusto de Souza Lima João Pedro de Souza Lima Cruz Caio Cesar Pacini Rafael Pedro Soares Galani Professora Orientadora: Márcia Cristina dos Santos Ferreira São Caetano do Sul / SP 2014

2 Novo Site do Cougars Trabalho de Conclusão de Curso apresentado como pré-requisito para obtenção do Diploma de Técnico em Informática. São Caetano do Sul / SP 2014

3 À professora e orientadora, Marcia Cristina dos Santos Ferreira, pelo convívio, pelo apoio, pela compreensão e pela amizade. Agradecemos a todos os professores da área técnica, que tornaram esse projeto possível.

4 RESUMO O nosso projeto, o Novo Site do Cougars, é o desenvolvimento de um site para o time de futebol americano de São Caetano do Sul, que apenas tinha um blog desorganizado, que prejudicava a imagem do time, dando a impressão para possíveis novos jogadores e patrocinadores de que é um time amador. Palavras-chave: atratividade; mudança; visibilidade

5 LISTA DE FIGURAS Figura 1 Blog do Cougars Figura 2 Site do Lumberjacks de Vinhedo... Erro! Indicador não definido. Nenhuma entrada de índice de ilustrações foi encontrada.figura 5 Rodapé do site Figura 6 Roster do site Figura 7 Página contendo os jogadores que jogam na linha Figura 8 Padrão de carteirinha feito para cada jogador do site Figura 9 Carteirinha terminada do jogador Eric Sorvete Corbacho Figura 10 Carteirinha do técnico Vinicius Hakaman Palumbo Figura 11 Menu principal do site Figura 12 História do Cougars Figura 13 Direção do time Figura 14 Loja online do time Figura 15 Página do Cougars FA Figura 16 Regras do FA Figura 17 Futebol Americano no Brasil Figura 18 História da FEFASP Figura 19 História da NFL Figura 20 Calendário do time Figura 21 Slider Figura 22 Like Box do Facebook Figura 23 Seletivas do time... 31

6 Sumário Introdução História do Cougars Marketing Eletrônico, publicidade, e-commerce e o Mercado Conceitos de marketing eletrônico, e-commerce e publicidade A aplicação do E-commerce e divulgação nas mídias sociais Desenvolvimento do Projeto Conteúdo/Noticias Rodapé Roster Carteirinha dos jogadores/fancybox Cougars FA História A Direção Loja Online Facebook Regras FA no Brasil FEFASP NFL Calendário Slider Like Box Jogue Conosco Conclusão Referências... 33

7 9 Introdução A idéia do projeto surgiu com a necessidade do time de futebol americano de São Caetano, Cougars, de ter uma página na web mais apresentável, com um visual mais limpo e mais funcional, visto que eles possuíam apenas um blog, que era simples demais e era poluído visualmente, e não trazia credibilidade para o time, impedindo a chegada de novos patrocinadores, e novos jogadores. Um Blog é um espaço dentro da internet cuja estrutura permite, de uma forma extremamente simples e direta, o registo cronológico, frequente e imediato de qualquer tipo de conteúdo que você desejar, como se fosse um pequeno diário, e o que você escreve fica empilhado nos posts, num blog, você consegue fazer tudo o que você pode fazer num site, só que de uma maneira beeem mais limitada, não permitindo que você faça edições mais complexas que são possíveis de se fazer num site. Figura 1 - Blog do Cougars. Já os sites, também podem ser colocados textos, imagens, vídeos e animações neles, e requerem um pouco mais de conhecimento em linguagens de programação como HTML e PHP. Ele na maioria das vezes tem uma página principal (homepage) que leva a outras páginas por meio dos hiperlinks. Diferentemente dos blogs, os sites geralmente são feitos por empresas de grande/pequeno porte, ou pessoas com algum poder monetário. Grande parte dos sites tem objetivo informativo ou puramente comercial.

8 10 Figura 2 - Site do Lumberjacks de Vinhedo. Estão sendo analisados os sites de outros times de diferentes portes, como os Lumberjacks de Vinhedo, Paulinia Mavericks e o Corinthians Steamrollers, e estamos vendo o que pode ser incrementado e os prós e contras de cada site, e também estamos contando com idéias e sugestões dos jogadores e integrantes do próprio Cougars. PRÓS DO SITE DO LUMBERJACKS: Layout bonito; bem organizado; placar de todos os jogos anteriores e falando a data dos próximos jogos; menu com os destaques no ínicio da pagina. CONTRAS DO SITE DO LUMBERJACKS: As notícias são abertas na página principal, inutilizando um espaço que poderia ter algo de importante PRÓS DO SITE DO STEAMROLLERS: Layout simples; muito bem organizado; classificação no campeonato; placar da ultima partida; página contando a história do time e de cada jogador; loja. CONTRAS DO SITE DO STEAMROLLERS: Layout poderia ser mais bonito. PRÓS DO SITE DO PAULÍNIA MAVERICKS: Layout muito bonito; bem organizado; bom aproveitamento do espaço;mostra o último resultado do time e o próximo jogo e mostra o horário do treino. CONTRAS DO SITE DO PAULÍNIA MAVERICKS: Pequenas falhas no Layout.

9 11 Figura 3 - Site do Paulinia Mavericks. Queremos tornar o layout do futuro site do Cougars mais dinâmico e atrativo para melhorar a imagem do time tanto para novos interessados no esporte, quanto para atrair novos patrocinadores. O site será utilizado oficialmente pelo time após a conclusão do trabalho

10 12 1 A História do Cougars O Cougars Football foi fundado em 3 de outubro de 2004 por Hugo Bustilho e Caio Cotrim. O time foi formado para representar a Universidade Metodista e a cidade de São Bernardo do Campo no Paulista Universitário de Flag Football 5X5, organizado pela ABRAFA (Associação Brasileira de Futebol Americano), conquistando a terceira colocação nos anos de 2004 e Após o Paulista Universitário de 2005, a Metodista fechou o departamento de Flag Football e a equipe ficou licenciada até o início do projeto para treinamento do Futebol Americano. No fim de 2006 houve a reativação do projeto de Futebol Americano na região, com a fundação da Federação Paulista de Futebol Americano (FPFA) e sua sede em Santo André. Com isso, começou haver apresentações do esporte pelo ABC, em locais como o SESI Theobaldo Di Nigris e em parques públicos. Nas demonstrações da modalidade o Cougars representava São Bernardo do Campo e os Huskies a cidade de Santo André Durante o primeiro semestre de 2007 as equipes focaram os esforços para ensinar o desporto de forma gratuita, recrutando novos talentos visando montar bases sólidas para posteriormente começar a realizar jogos, participar de torneios e fomentar o Futebol Americano no país, que ganhava força através das transmissões da NFL pela ESPN e BandSports. O esporte praticado no Brasil se restringia ao flag em São Paulo, centralizado no Ibirapuera e ao FA de areia nas praias cariocas de Botafogo e Saquarema, além da cidade de João Pessoa (PB), onde também esporte de areia crescia. Em 24 de Junho de 2007, a FPFA, realizou na Universidade Metodista, com o apoio do Cougars Football, o primeiro seminário sobre Futebol Americano no país: O Futebol Jogado com as Mãos. O evento contou com palestras ministradas por autoridades no esporte como Ivan Zimmerman (narrador de Futebol Americano na Bandsports) e Silvio Santos Junior (comentarista de Futebol Americano da Bandsports) além do professor Rogério Totó (consultor de marketing esportivo). O principal assunto das palestras no seminário foi sobre o crescimento do esporte e sua organização no país para que seguisse um rumo sadio de profissionalização no Brasil. No evento, o fundador do COUGARS, Hugo Bustilho se despediu da administração da equipe para se dedicar à aulas da modalidade e à FPFA integralmente. Dessa forma os suçuaranas nomeram Bruno Bonometto e Marcos Pastrana Sereno, presidente e vice dos COUGARS respectivamente. No fim de 2007 a nova administração estreava em um torneio da modalidade, ainda sem equipamentos. A FPFA lançou o Circuito Paulista de Futebol Americano - um projeto piloto de Campeonato Paulista para divulgar o esporte e que contou com diversas equipes do Estado de São Paulo

11 13 As empresas Molinari Sports, Tennis Pé Baruel e Red Bull patrocinaram o torneio inédito, que contou com locução de Paulo Mancha e Silvio Santos Junior, narrador e comentarista do esporte do canal Bandsports à época. Com um público estimado em mil pessoas, o COUGARS, na época representando São Bernardo do Campo teve a honra de sediar a abertura do torneio no lendário Estádio 1º de Maio no dia 24 de novembro de 2007, às 14 horas, em confronto com o Sorocaba Vipers., que saiu vencedor pela experiência, por 41 a 0. Com música, sorteios e dança, o objetivo era dar um espetáculo para conseguir novos seguidores e para uma grande divulgação do esporte, que, mesmo tendo um grande número de fãs e seguidores, ainda possuía pouca divulgação por grande parte da imprensa. O jogo foi um marco na história do esporte, principalmente na região do Grande ABC Paulista, pois foi o primeiro jogo oficial de Futebol Americano, mesmo sem equipamentos, em um Estádio, com o campo pintado de acordo com as medidas oficiais da NFL e com Field Goal. Contou também com a primeira turma de árbitros formados pela FPFA. No dia 10 de fevereiro de 2008, em nova uma reunião com membros da equipe o vice-presidente Marcos "Pastrana" Sereno foi alçado a presidente do clube, cargo que permanece até os dias de hoje, já em seu segundo mandato. Em março do mesmo ano, o Cougars participou de novas etapas do circuito Estádio Pedro Benedetti, em Mauá (SP) conquistando suas primeiras vitórias em partidas oficiais contra seus rivais de Santo André e Mauá. Após a combinação de resultados e com a desistência do Sorocaba Vipers, o Cougars ficou em primeiro lugar do torneio com 20 pontos, sagrando-se o primeiro campeão de um torneio da modalidade em São Paulo. Pelas regras do torneio deveria haver um jogo final entre 1º (Cougars) e 2º (Werewolves), em evento chamado ABC Bowl, mas este jogo nunca se realizou pois as equipes se uniram para formar e unificar o Futebol Americano no ABC. Antes disso a equipe enfrentou as adversidades do esporte amador, primeiro perdendo seu campo de treinos, passando a realizá-los no Parque Celso Daniel em Santo André, que não possuía estrutura adequada para o esporte - situação que perdurou até o início de Durante o ano alguns jogadores pediram afastamento, deixando a equipe enxuta ainda. Por fim o apoio da prefeitura de São Bernardo não foi renovado. Apesar das dificuldades, o Cougars manteve-se firme em seu objetivo de continuar a fomentar a modalidade e seu ensino a jovens, que contou com a união do Werewolves em 5 de novembro de 2008, quase um ano após firmando sua fundação legal no dia 5 de setembro de 2009, quando foi realizada a Assembléia Geral de Fundação do Cougars Football que contou com a presença de seus 20 atletas em atividade.

12 14 A Diretoria ficou da seguinte forma: Presidente: Marcos Pastrana Sereno; Vice-Presidente: Felipe Amaral Rodrigues; Primeiro Secretário: Nicolas Nitas Ramos; Segundo Secretário; Ana Claudia Troiano; Primeiro Tesoureiro: Douglas Viana; Segundo Tesoureiro; Rodrigo Silva. Conselho Fiscal: Membros titulares: Edenildo Alex da Silva e Lucas Andrades; e Suplentes: Eduardo Gregório Fernandes Avellar e Diego Martins Oliveira dos Santos. Em Estatuto, com 20 signatários foi decidida a troca do nome da equipe de Cougars para Associação Esportiva Cougars Football (AE Cougars Football) como a equipe é conhecida até os dias de hoje. Em 18 de outubro de 2008 a FPFA organizou o Jogo das Estrelas, um jogo exibição de atletas equipados pela primeira vez no Brasil, que contou com jogadores do Brasil inteiro. A partida foi realizada no Ginásio Pedro Dell Antonia em Santo André nos moldes do Futebol Americano de Arena (seria como o futsal em relação o futebol) e foi um sucesso de público com cerca de 2 mil espectadores. Para o jogo foram chamados 6 (seis) atletas do Cougars, o maior contingente entre as equipes, além de voluntários e a participação do presidente Marcos Pastrana como umpire (árbitro). Em 2008 Durante essa pausa no campeonato a equipe resolveu fazer algumas mudanças para dar uma maior visibilidade a equipe. As principais mudanças foram a re-estilização do símbolo, a alteração da letra, além das cores que passaram de azul marinho e laranja para azul royal, preto e branco. Em 2012 o nome ganhou destaque no símbolo, com contornos em espírito de garra e selvagem, como a equipe se posta em seus jogos. Como o esporte voltou a crescer na região, outros times surgiram como o Mauá Black Bears, rival do Cougars entre os anos de 2009 e 2010, enquanto a equipe existiu e posteriormente o Corsários em 2011, equipe que é atualmente ligada ao clube Palestra de São Bernardo do Campo. As equipes já estiveram em campo por duas vezes (2012 e 2013) pela Super Copa São Paulo, já na era Full Pads, e a equipe pirata nos venceu nas duas ocasiões. Após a fundação legal em 2009, muitos jogadores de outras equipes da região do ABC, além do Werewolves, uniram-se ao Cougars Football, entre elas Wild Horses, Dark Knights e Rocks. Além do grande avanço no setor administrativo, houve também aumento da comissão técnica, aproveitando o melhor de cada equipe. Com a estabilidade no número de atletas, o foco da equipe nos anos seguintes foi de buscar infraestrutura adequada, melhorar o aprimoramento técnico da equipe e buscar parcerias para transformar o Cougars Football em uma equipe competitiva de

13 15 Futebol Americano. Veja a evolução: No fim de 2010, após quase um ano de treinos no Parque Celso Daniel, realiza mudança de CT de Treinos, utilizando-se do Campo Público Ana Brandão, na Vila América em Santo André; Visando resultados expressivos, o Cougars traz um treinador com experiência internacional, Vinícius "Haka" Palumbo, para a disputa do campeonato paulista 2013, além de melhorar o elenco com reforços experientes provenientes de equipes do Estado de SP; Buscando ampliar a atuação da escolinha junto às prefeituras do ABC. Em 2013, com apoio de empresas regionais e patrocínio da americana RoomMates participa da segunda edição da Super Copa São Paulo de Futebol Americano, e com uma equipe muito mais sólida e competitiva chega aos playoffs, ficando entre as oito melhores equipes do Estado. Em 2013, a Liga de Futebol Americano (LFA) chegou com uma proposta de profissionalizar o futebol americano no Brasil. O primeiro passo seria importar 42 atletas norte-americanos, líderes de torcida e até treinadores estrangeiros para o campeonato. Seis novas equipes seriam criadas e contariam com 228 atletas brasileiros que participaram de "peneiras". Porém, A LFA acabou perdendo seu principal patrocinador e cancelou o torneio. "Os times brasileiros ainda não encontraram um modelo de receita e sem isso não é possível se profissionalizar, a gente acreditava que tinha um", disse Marcelo de Paulos, presidente da LFA. Apesar do contra-tempo, Paulos acha que o projeto apresentado já ajudou um pouco na profissionalização do esporte, demonstrando a viabilidade financeira. "A gente já tinha feito contrato com o parque Villa Lobos para a construção de uma arena, já tinha fechado um contrato de longo prazo com a televisão, mas infelizmente um investidor chave resolveu desistir. Isso já foi um primeiro passo".

14 16 2 Marketing Eletrônico, Publicidade, E-commerce e o mercado. 2.1 Conceitos de marketing eletrônico, e-commerce e publicidade É possível entender que marketing eletrônico são todas as atividades on-line que facilitam a produção e a venda de produtos e servições que interessem o consumidor, estando intimamente igada ao e-commerce e a todas as estratégias do marketing convencional, que são conhecidas da publicidade há anos, além de que, essa prática, aprimora o marketing comum, que por sua vez, facilita os objetivos da empresa na internet. A publicidade, resumidamente, consiste em tornar algo conhecido ou divulgar determinado produto, para obter uma aceitação melhor dos consumidores. Um dos vários tipos de publicidade, é a contextual, que consiste em inserir links de patrocionadores ou anunciantes em páginas web, com conteúdos relacionados e atrativos, que chamem a atenção do usuário para a página da empresa vendedora, porém esse tipo de publicidade está se tornando uma ferramenta de divulgação barata. O e-commerce, ou comércio eletrônico, é um tipo de comércio que realiza suas transações financeiras por meio de dispositivos e plataformas eletrônicas, ou online, como computadores, celulares e sites. Um exemplo de e-commerce é comprar ou vender algum tipo de produto em lojas virtuais. Inicialmente, o e-commerce era utilizado basicamente para vender bens não duráveis, como livros e CDs. Hoje ele é utilizado para vender desde produtos que custam milhões, como: iates, carros de luxo e mansões, até produtos que não se acreditavam que era possível de vender com esse tipo de comércio, como roupas perfumes e alimentos. O mercado para o programador web, então, está forte no momento, mas é preciso ter qualificação para aproveitar ao máximo o bom momento que a área está passando.

15 A aplicação do E-commerce e divulgação nas redes sociais A importância do e-commerce para o time do Cougars, é que com ele, uma pessoa que queira comprar um item do time, sendo ele um time regional, não é necessário vir até a sede do time ou entrar em contato ou conhecer algum jogador para comprar o que deseja, estando intimamente ligado com o marketing, pois ele é necessário para facilitar a venda dos produtos do Cougars, tendo essa possibilidade de melhoria nessa questão devido a divulgação a partir das redes sociais do time, dos jogadores e dos fanáticos. As mídias sociais são muito importantes para a popularização do nosso cliente. Com as mídias sociais e o site trabalhando juntos, podemos angariar novos torcedores, jogadores de uma maneira amigável, até mesmo familiar causado pela divulgação dos próprios jogadores e fãs do time por redes sociais, e até mesmo novos patrocinadores para o Cougars FA. O nosso objetivo na questão da publicidade, é tornar o site do cliente bastante atrativo, além de enaltecer o esporte de uma maneira subjetiva, para quem não conhece pesquisar mais sobre ele caso se interesse.

16 18 3 Desenvolvimento do Projeto Antes de começarmos o desenvolvimento do site do Cougars, estávamos pensando em desenvolver um aplicativo mobile para o CifraClub, deixando a criação do site do nosso atual cliente em segundo plano. Esse aplicativo que estávamos pensando em criar, teria todos os mesmos recursos do site original do CifraClub, porém estariam aprimorados especialmente para dispositivos móveis, pois o site deles, se acessado através de celulares e outros dispositivos móveis, perde toda sua estrutura e organização estética. Antes de começarmos a criar o projeto, mandamos um para a equipe do CifraClub, para saber se poderíamos ter o apoio deles e até um possível patrocínio. Com a resposta positiva, descobrimos que eles já estavam desenvolvendo um aplicativo com o mesmo objetivo que o nosso. Então decidimos checar o site deles na versão mobile, vimos que estava bom, então decidimos alterar nosso projeto. Com esse impasse, decidimos desenvolver o site do Cougars, pois ele já era uma segunda opção para nós, e teríamos apoio e parceria com o time.

17 Conteudo/Notícias Figura 4 Página principal do site. Esta é a homepage do site, onde temos um fundo e imagens para as noticias mais recentes feitas no Photoshop. Para as imagens de cada notícia, atribuímos a largura, altura e o alinhamento dela. Além disso, utilizamos outra classe CSS para os títulos de cada notícia, e uma última para os textos que os seguem.

18 Rodapé Figura 5 Rodapé do site. Para o desenvolvimento do rodapé, que contém todos os links do site, utilizamos uma classe estilizada do CSS, denominada de minilogo, contendo o arquivo do logo do time em um tamanho reduzido. Também criamos uma lista contendo os principais links do site, atribuindo eles para os respectivos nomes. E por fim, criamos dois textos, um para os direitos autorais, e outro reserva, utilizando classes estilizadas para personalizá-los.

19 Roster Figura 6 Roster do site. Essa principal página da aba Roster, que contém links contendo links que redirecionam para listas contendo os jogadores de cada setor, além do treinador, se resume a basicamente 4 links que redirecionam para as páginas dos jogadores, divididos em suas respectivas posições, e o treinador do time.

20 22 Figura 7 Página contendo os jogadores que jogam na Linha Essa é uma das páginas que o Roster principal te redireciona, ela mostra todos os jogadores que compõem a Linha do Cougars FA. Ao clicar em qualquer jogador, aparecerá uma FancyBox com as informações dos jogadores

21 Carteirinhas dos jogadores/fancybox Para colocar a informação de cada jogador de uma forma bonita e organizada no site, decidimos criar um padrão para carteirinhas de cada jogador: Figura 8 Padrão de carteirinha feito para cada jogador do site Figura 9 Carteirinha terminada do jogador Eric Sorvete Corbacho Com o apoio dos jogadores, e da organização do Cougars FA, obtivemos todas as informações necessárias de todos os jogadores para a confecção das carteirinhas, que posteriormente foram inseridas no site através da tecnologia da FancyBox.

22 24 Figura 10 Carteirinha do técnico Vinicius Hakaman Palumbo Criamos um arquivo.css para estilizar a ficha, e utilizamos um comando em JavaScript para deixarmos a ficha de cada um destacada no site Cougars FA Figura 11 Menu principal do site. Este link contém outros que redirecionam para páginas com todas as informações do time, desde a história dele até seus títulos

23 História Figura 12 História do Cougars Nesta página, temos um texto contendo toda a história do Cougars, de São Caetano do Sul A Direção Figura 13 Direção do time. Nesta página, temos informações sobre a informação do time.

24 Loja Online Figura 14 Futura loja online Aqui, teremos nossa loja online, onde serão vendidos diversos produtos, desde camisetas até canecas, facilitando a compra para os fãs do time. 3.9 Facebook Figura 15 Página do Cougars FA site. Aqui, é possível ver as postagens da página do facebook do time através do

25 Regras Figura 16 Regras do FA Nessa página, temos as principais regras do Futebol Americano FA no Brasil Figura 17 Página sobre FA no Brasil Aqui, temos um link para um mapa contendo a localização dos principais times paulistas.

26 FEFASP Figura 18 História da FEFASP Nessa página, temos um texto contando um pouco sobre o que é a FEFASP, a Federação de Futebol Americano de São Paulo. 4.3 NFL Figura 19 História da NFL Aqui, é explicado sobre a NFL, ou National Football League, a Liga de Futebol Americano dos Estados Unidos, que é uma das ligas mais conhecidas mundialmente.

27 Calendário Figura 20 Calendário do time Aqui neste calendário, teremos todas as datas importantes para o time e seus jogadores, como o aniversário dos mesmos ou datas de jogos. 4.5 Slider Figura 21 - Slider Nesse slider, estarão sendo destacadas as principais notícias.

28 Like Box Figura 22 Like box do Facebook Com a like box, esperamos aumentar a divulgação e o alcance da página do Facebook do nosso cliente, colocando no site, para que atraia aqueles que se interessaram.

29 Jogue conosco Figura 23 Seletivas do time Aqui, foi colocado os principais ideais do time, como participar da seletiva para entrar no time, horários e lugares, além das informações que são necessárias para participar da mesma.

30 32 Conclusão No desenvolvimento do processo, todos os objetivos foram alcançados, porém tivemos alguns problemas como a disposição do logo, que estava num formato quadrado, e para solucionar isso, acoplamos num menu e colocamos no cabeçalho. Outro problema que tivemos é em relação a questão das informações dos jogadores, que estavam todas em link, desorganizadas e dificultando uma futura manutenção, graças a isso, trocamos todos os links para um banco de dados. Esse projeto nos incentivou a ter um pensamento empreendor, para nós fazermos algo bom e diferente, além de buscar conhecimentos aplicados na internet, e por fim o projeto nos fez aprender a trabalhar melhor em equipe. Uma recomendação para próximos trabalhos, é ter um forte trabalho em equipe, noções organizacionais, e vontade de se jogar no trabalho, pois grande parte do conteúdo que é necessário para a realização do mesmo, precisa ser pesquisada.

31 33 Referências css-tricks.com cssmatic.com css3gen.com css3generator.com/ linhadecodigo.com.br stackexchange.com/ w3schools.com/