professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · web viewdesenvolvimento...

30
UNIVERSIDADE FEDERAL DO ABC UFABC BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO ESTÁGIO CURRICULAR THOMAZ ANTONIO SOARES PROFESSOR DOUTOR JESÚS PASCUAL MENA CHALCO OMELETE DESENVOLVIMENTO CULTURAL LTDA Santo André

Upload: others

Post on 07-Dec-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

UNIVERSIDADE FEDERAL DO ABC

UFABC

BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO

ESTÁGIO CURRICULAR

THOMAZ ANTONIO SOARES

PROFESSOR DOUTOR JESÚS PASCUAL MENA CHALCO

OMELETE DESENVOLVIMENTO CULTURAL LTDA

Santo André

2015

Page 2: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

i

UNIVERSIDADE FEDERAL DO ABC

UFABC

BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO

ESTÁGIO CURRICULAR

THOMAZ ANTONIO SOARES

PROFESSOR DOUTOR JESÚS PASCUAL MENA CHALCO

Relatório de Estágio apresentado ao Curso

de Graduação em Ciência da Computação

como requisito parcial para obtenção do

grau de Bacharel em Ciência da

Computação.

Santo André

2015

Page 3: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

ii

FOLHA DE APROVAÇÃO

THOMAZ ANTONIO SOARES

CONCEITO FINAL

________________

ORIENTADOR

Nome ________________________________

Assinatura ___________________________________

Page 4: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

iii

PLANO DE ESTÁGIO

Instituição concedente: Omelete Desenvolvimento Cultural LTDA

Endereço: Rua Ceará, 480

Bairro: Consolação

CEP: 01243-010

Cidade: São Paulo

Estado: SP

Inscrição Municipal: 32123128-3

CNPJ: 05/506.988/0001-89

Representada por: Marcelo Forlani Cargo: Editor-Chefe

Supervisore de Estágio: Paulo Roberto de Oliveira

Período de realização do estágio: 01/08/2015 até 01/02/2016

Horário do estágio: Das 10h00min às 17h00min

Total semanal: 30 horas.

Atividades: Desenvolvimento de Back-end (Python); Desenvolvimento de Front-

End(HTML/CSS/Java Script); Modelagem de base de dados; Manutenção de servidores.

Objetivos a serem alcançados: Desenvolvimento do estagiário, envolvendo teoria e prática,

obtendo novos potenciais para o mercado de trabalho; propiciar atividade prática na área do

curso, aplicando e ampliando o conhecimento acadêmico.

Page 5: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

iv

RESUMO

Este relátorio tem como propósito descrever as atividades exercidas durante o período de

estágio curricular como Desenvolvedor Web na empresa Omelete Desenvolvimento Cultural,

organização responsável por manter um portal online de notícias, artigos, críticas e vídeos

sobre a cultura pop. Consta nas descrições, detalhes acerca do desenvolvimento de cada

atividade desempenhada, seus objetivos e sugestões de melhorias para os problemas

encontrados.

Palavras-chave: Atividades. Desenvolvedor Web. Omelete. Desenvolvimento. Melhorias.

Page 6: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

v

LISTA DE ILUSTRAÇÕES

Figura 1: Logotipo da empresa Omelete Desenvolvimento Cultural LTDA..............................1

Figura 2: Resultado da busca por crítica da série de TV Game of Thrones exibindo crítica

feita por editores do Omelete com formato próprio para resenhas, incluindo o nome do autor e

sua avaliação...............................................................................................................................6

Page 7: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

vi

LISTA DE ABREVIAÇÕES E SIGLAS

CCXP Comic Con Experience

CSS Cascading Style Sheet

GSAP GreenSock Animation Plataform

HTML HyperText Markup Language

HTTP Hypertext Transfer Protocol

SASS Syntactically Awesome Style Sheets

SEO Search Engine Optimization

TI Tecnologia da Informação

UFABC Universidade Federal do ABC

Page 8: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

vii

SUMÁRIO

1. Caracterização da Empresa............................................................................................pg. 12. Análise da Empresa.......................................................................................................pg. 23. Características da área onde o estágio foi realizado......................................................pg. 34. Atividades Desenvolvidas.............................................................................................pg. 44.1. Pesquisa e Treinamento.............................................................................................pg. 44.2. Desenvolvimento e ajustes de layout.........................................................................pg. 44.3. Search Engine Optimization - S.E.O.........................................................................pg. 54.4. Página Especial - Linha do tempo do Star Wars........................................................pg. 74.5. Deploy para o servidor de testes e validação.............................................................pg. 84.6. Modificações no Back-End........................................................................................pg. 95. Diagnóstico dos principais problemas observados e sugestão de melhoria................pg. 116. Conclusão....................................................................................................................pg. 137. Referências..................................................................................................................pg. 14

Page 9: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

1

1. CARACTERIZAÇÃO DA EMPRESA

Localizada no bairro da Consolação, na cidade de São Paulo, registrada sob o CNPJ

05.506.988/0001-89, o Omelete Desenvolvimento Cultural LTDA está em funcionamento

desde o ano 2000, e foi fundado pelo editor gráfico Érico Borgo e pelo publicitário Marcelo

Forlani, hoje, sócios-diretores e editores-chefe da empresa. Ainda nos primeiros anos pós

fundação, houve a contratação de Marcelo Hessel, também considerado um dos fundadores da

empresa [1].

Figura 1: Logotipo da empresa Omelete Desenvolvimento Cultural LTDA.

Após o ingresso de Pierre Mantovani (CEO) no Omelete, a empresa passou por

mudanças visando expandir seus serviços preenchendo áreas pouco exploradas na indústria do

entretenimento, porém sempre almejando atingir o mesmo público da cultura pop que

acompanha o portal de notícias do Omelete, sendo este o primeiro fruto da empresa. Dessa

forma, foi criado um grupo coorporativo, chamado Omelete Group, que incorpora as

seguintes empresas: Comic Con Experience (CCXP), evento Brasileiro derivado e nos

mesmos moldes da San Diego Comic Con, que acontece anualmente em São Paulo e reúne

ídolos da cultura pop e milhares de pessoas, abrangindo as principais áreas da indústria

(cinema, música, quadrinhos, games, etc); a empresa Mundo Geek, loja online de produtos

diversos voltados ao universo geek; e a Social Comics, aplicativo de leitura de quadrinhos

digitais.

Page 10: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

2

2. ANÁLISE DA EMPRESA

Com intuito de levar informação e entretenimento de uma maneira leve, atraente e

muitas vezes humorada, o Omelete Desenvolvimento Cultural LTDA é atualmente uma das

maiores referências da cultura pop, com conteúdos diversificado entre cinema, séries de TV,

games, quadrinhos, música e humor, contando com milhares de acessos diários ao portal de

notícias, primeiro e principal produto da empresa.

A empresa visa disponibilizar conteúdos como notícias, artigos, críticas e vídeos

voltados ao público geek, se comprometendo sempre em manter a qualidade de suas

produções, e a transparência e veracidade de suas informações, contando para isto, com uma

equipe qualificada de editores e redatores.

Além do portal, o Omelete conta também com um canal de grande sucesso no

Youtube (https://www.youtube.com/user/omeleteve), que já possui quase 1 milhão de

inscritos e centenas de milhares de visualizações mensais. O canal conta com programação de

segunda à sexta-feira, e possui três principais programas: Hyperdrive, programa diário de

notícias rápidas e quentes sobre o mundo da cultura pop, com duração aproximada de

1min30s; Bloco-X, programa comandado pelas mulheres do Omelete, apresentando sempre

discussões a respeito das mulheres e a representação das mesmas no mundo nerd, com

duração aproximada de 9min; OmeleTV, programa que vai ao ar de segunda a sexta-feira,

com comentários sobre os assuntos mais relevantes do momento.

A influência da empresa na cultura pop, possibilitou a concretização de parcerias

com outras empresas que partilham do mesmo público, como marcas que de alguma forma se

relacionem ao universo geek. O Omelete concede espaço em suas páginas para que clientes

possam divulgar suas marcas atráves de banners publicitários, e por meio de merchandising

incluído nos vídeos do canal do Youtube.

A empresa cresceu muito no último ano, e seu quadro de funcionários praticamente

dobrou, foi de um pouco mais de 20 funcionários, para quase 50 profissionais. Com esse

crescimento, para que qualidade dos produtos, do bom funcionamento empresarial e

comunicação transparente com os clientes fosse mantida, houve a necessidade da criação de

novos setores na empresa. O departamento de Tecnologia da Informação (TI) foi o último a

ser instalado dentro da empresa, uma vez que até metade de 2015, os serviços prestados por

essa área eram feitos remotamente por outra empresa. Esta mudança trouxe muitos beneficios

ao Omelete, como a agilidade no processo de alinhamento e validação das tarefas destinadas a

área, devido a proximidade do setor que agora se encontra sob a mesma instalação.

Page 11: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

3

3. CARACTERÍSTICAS DA ÁREA ONDE O ESTÁGIO FOI REALIZADO

O estágio foi realizado na área de Tecnologia da Informação, constituído por: um

Gerente de Projetos, responsável por planejar, organizar e atribuir as tarefas aos membros do

departamento, comunicação com as demais áreas da empresa e verificação de desempenho e

falhas do sistema que constitui o portal; três Desenvolvedores, sendo dois estagiários, os quais

promovem o desenvolvimento de novas funcionalidades ao portal e às páginas administrativas

utilizadas pela redação, manutenção e gerenciamento dos servidores e seviços que

disponibilizam o site, e toda a configuração de infraestrutura demandada para comunicação

entre as máquinas remotas; e por um Designer que cria os layouts e as especificações visuais

de cada página e dos elementos gráficos que serão desenvolvidos pelos programadores.

A área tem como objetivo manter o bom funcionamento e desempenho do portal de

nóticias do Omelete, visando fornecer a melhor experiência de navegação ao usuário e boas

ferramentas de edição para a equipe de redatores. Novas funcionalidades são criadas

enquanto outras são remodeladas através de novas abordagens conforme demanda dos

editores e do gerente de projetos, mantendo assim a aplicação em constante atualização

seguindo as tendências impostas pelo mercado.

Com o lançamento da versão 3.5 do portal, as páginas ficaram mais rápidas para

serem carregadas, com menor número de falhas e com melhor legibilidade de leitura, o que de

fato resultou num aumento considerável de acessos diários, e consequentemente na

quantidade de clientes interessados em estabelecer parcerias. Portanto, é também de

responsabilidade do departamento de TI reservar certas áreas de cada página do site para

alocação de publicidade e anúncios de parceiros interessados em divulgar sua marca. O setor

de Tecnologia da Informação se encontra sob gerência de Paulo Ramos.

Page 12: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

4

4. ATIVIDADES DESENVOLVIDAS

4.1. PESQUISA E TREINAMENTO

Processo de aprendizado por meio de estudo e consulta às documentações das

ferramentas e tecnologias utilizadas em todo o sistema, realização de tutoriais gratuitos

oferecidos pelo serviço Codecademy [2], estudo e execução de exemplos para se familiarizar

com frameworks e tecnologias como Django [3] e Foundation [4], e constante orientação por

parte do desenvolvedor mentor. A pesquisa individual em ferramentas de busca como Google

e no site de perguntas e respostas para programadores Stackoverflow também é

frequentemente utilizado e de crucial importância no dia-a-dia de qualquer desenvolvedor.

Objetivo: aprender mais sobre cada componente que constitui o ambiente de operações do

site Omelete, bem como agregar e aplicar diversos conhecimentos sobre tópicos relacionados

ao curso de Ciência de Computação.

Recursos disponíveis: computador com acesso à internet.

Periodicidade de realização: a consulta às documentações, a busca de soluções para

problemas e dúvidas, e os conselhos e orientações do mentor são realizadas diariamente.

4.2. DESENVOLVIMENTO E AJUSTES DE LAYOUT

Partindo das especificações de layout dadas pelos editores do Omelete, alinhados às

orientações do Gerente de Projeto e aos layouts criados pelo designer, foram efetuados

diversos ajustes às páginas existentes, redefinindo o posicionamento dos elementos, o

espaçamento entre eles e muitas correções pertinentes que visam melhorar a experiência do

usuário. Essa atividade apresenta cunho front-end, que define a forma com a qual o conteúdo

é exibido na tela e toda a estrutura hierárquica das informações, tentando sempre manter

desempenho suficiente para que não haja impacto sobre a experiência de navegação do

usuário.

Minha admissão na empresa se deu em um momento delicado de transição da versão

3 do site, para a atual versão 3.5. Devido a mudança, muitas páginas precisaram ser

Page 13: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

5

parcialmente remodeladas, enquanto outras necessitaram de redefinição completa para atingir

o nível de qualidade esperado proposto pela equipe. Colaborei desde a remodelação das novas

telas de fichas (http://omelete.uol.com.br/series-tv/mr-robot/criticas/), passando por pequenos

ajustes de textos, títulos, efeitos de rolagem de página, até a criação de páginas exclusivas da

nova versão (http://omelete.uol.com.br/home/mais-comentadas/).

Para definir a disposição dos elementos nas páginas, foram utilizados a Linguagem

de Marcação de Hipertexto (HTML) [5] e a linguagem Cascading Style Sheet (CSS) [5], que

juntas possibilitam caracterizar as páginas web conforme especificações dos layouts,

aplicando transformações visuais e definindo como os elementos serão renderizados e

exibidos ao usuário. Já a linguagem de programação Javascript [5], é regularmente utilizada

quando ações de funcionalidade ou efeitos visuais complexos são necessários e muitas vezes

inviáveis de se fazer somente com HTML e CSS.

Basicamente todas as páginas do site Omelete são responsivos, ou seja, os elementos

HTML são redistribuídos de acordo com o tamanho do navegador e do dispositivo utilizado

para visualização, no qual utilizou-se do framework Foundation para alcançar essa

característica sem grandes complicações.

Foi utilizado também o Sass, extensão do CSS que permite escrever seletores CSS

mais complexos com maior facilidade, afim de melhorar a produtividade.

Objetivo: executar as especificações da equipe que alterem de alguma forma o visual da

página, bem como a apresentação do conteúdo e toda informação relacionada a ele, buscando

sempre atingir boa performance e melhorar a experiência do usuário.

Recursos disponíveis: máquina local configurada com o projeto do site, especificações das

alterações, layouts desenhados pelo designer e orientações do desenvolvedor mentor.

Periodicidade de realização: atividade realizada de acordo com a demanda. Essa atividade

foi desenvolvida diariamente durante o período de transição do site.

4.3. SEARCH ENGINE OPTIMIZATION - S.E.O

Com a finalidade de melhorar o posicionamento do site do Omelete nos sites de

busca, primeiramente utilizou-se a ferramenta de testes

<https://developers.google.com/structured-data/testing-tool/> para avaliar o que e como os

Page 14: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

6

motores de busca estavam extraindo as informações e conteúdos de um determinado tipo de

página. Após a análise dos erros exibidos e a baixa quantidade de informação coletada pela

ferramenta, foi feito um estudo sobre como estruturar dados que possam ser entendidos pelas

pessoas que navegam pelo site do omelete, e também pelas máquinas que indexam as páginas

em sites de busca, como: Google, Yahoo, Bing, Baidu, etc.

Figura 2: Resultado da busca por crítica da série de TV Game of Thrones exibindo crítica feita por editores do Omelete com formato próprio para resenhas, incluindo o nome do autor e sua avaliação.

Corrigiu-se então a estrutura dos dados com auxílio do vocabulário definido pelo

Schema.org, inseriu-se novas marcações redefinindo os modelos de dados já existentes no

site, mas que continham falhas na organização, como foi o caso dos modelos de páginas de

críticas e de artigos, e por fim removeu-se títulos de metadados duplicados em mais de 120

mil páginas.

Page 15: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

7

Tais alterações resultaram em um melhor posicionamento das páginas do Omelete

nos resultados de busca, e no modo de exibição de uma crítica na página do Google.

Objetivo: marcar os dados e estruturar o conteúdo para que as máquinas possam entendê-los,

para que o site se mantenha nas melhores posições dos resultados de busca.

Recursos disponíveis: máquina local configurada com o projeto do site e acesso à internet e

orientações do Gerente de Projeto.

Periodicidade de realização: atividade longa realizada uma única vez até o momento, mas

que provavelmente voltará a ser executada para algumas páginas que ainda não foram

reestruturadas.

4.4. PÁGINA ESPECIAL - LINHA DO TEMPO DO STAR WARS

Com a aproximação da data de lançamento do filme Star Wars Episódio VII: O

Despertar da Força, novo título da saga Star Wars, a equipe do Omelete planejou criar uma

página especial com uma linha do tempo interativa contendo resumos de cada episódio da

série, e detalhes das principais naves presentes nesse universo.

Esse projeto foi o primeiro do tipo já desenvolvido pelo Omelete, categorizado como

especial, visto que foge do formato padrão de conteúdo do site já conhecido pelo público.

Apresentando elementos que permitem interação com usuário e animações disparadas através

de cliques, ação de rolagem da página ou posicionando o ponteiro do mouse sobre os

elementos, o especial do Star Wars foi um grande desafio de implementação, visto que novas

tecnologias precisaram ser estudadas e aplicadas para a realização de alguns efeitos visuais

(movimento das estrelas) e de animações mais complexas (animação da Estrela da Morte).

Para concluir essa tarefa utilizou-se a plataforma de animação GreenSock Animation

Plataform (GSAP) [6], animação em CSS e muito Javascript/Jquery [5].

Objetivo: criar uma página informativa para apresentar os filmes da saga Star Wars àqueles

que ainda não a conhecem, e fornecer um resumo recapitulativo preparando o público para o

lançamento do novo episódio da série.

Page 16: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

8

Recursos disponíveis: máquina local configurada com o projeto do site, acesso à internet

para estudo das novas tecnologias aplicadas, especificações de projeto e orientações por parte

Gerente de Projeto e dos redatores.

Periodicidade de realização: a atividade teve aproximadamente um mês de duração e foi

executada uma única vez. Será revisada e alterada sempre que houver lançamento de um novo

filme da série Star Wars.

4.5. DEPLOY PARA O SERVIDOR DE TESTES E VALIDAÇÃO

Toda tarefa concluída pela equipe de Tecnologia da Informação passa por testes

manuais na própria máquina local do desenvolvedor que a executou e, caso seja validado, é

enviada ao repositório do Omelete localizado no GitHub [7], controle de versionamento

utilizado.

A atividade basicamente se resume em atualizar a aplicação presente no servidor de

testes por uma versão mais atual, com dada tarefa finalizada incluída, situada no repositório.

O deploy para o servidor de testes é realizado através de um script automatizado, que requisita

ao repositório a versão mais atual do projeto em sua ramificação de testes, e une essas

alterações à versão presente no servidor. A unificação de duas versões diferentes do projeto

nem sempre são bem sucedidas, podendo resultar em conflito que devem ser resolvidos para

que o deploy termine. Além disso, certas modificações no projeto acarretam na alteração dos

modelos de dados, sendo necessário uma remodelação na base de dados para que a

informação se mantenha consistente. O processo de remodelagem da base também é

automatizado e faz parte dos recursos contidos no framework Django.

Após o deploy para o servidor de testes, o Gerente de Projetos fica encarregado de

fazer todas as validações necessárias para se certificar que as modificações inseridas exerçam

o papel para o qual foram planejadas, ao mesmo tempo em que verifica se houve surgimento

de novos bugs.

Objetivo: testar o que foi desenvolvido localmente, atualizar o servidor de testes com o novo

código e liberar novas funcionalidades e correções de bugs para validação do Gerente de

Projetos.

Page 17: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

9

Recursos disponíveis: máquina local configurada com chave de acesso ao servidor de testes

através de conexão SSH.

Periodicidade de realização: a atividade é realizada ao término de cada tarefa em que há

alterações no sistema.

4.6. MODIFICAÇÕES NO BACK-END

A parte lógica do sistema que gerencia o site e permite o desenvolvimento,

manutenção e adição de conteúdos de forma dinâmica e rápida, foram programadas em

Python com auxílio de diversos plugins e pacotes, principalmente com a ajuda do framework

Django, ferramenta poderosa que visa o desenvolvimento ágil e limpo de soluções Web.

O Django abstrai muitas complicações e melhora a produtividade da equipe, uma vez

que basta definir os modelos de dados a serem usados para que ele possa fazer o mapeamento

automático para os bancos de dados mais utilizados do mercado. Entre outros recursos, o

Django conta também com uma interface de administração automática de conteúdos e um

sistema de templates extensível e de fácil utilização, possibilitando que o desenvolvedor

customize qualquer módulo da ferramenta.

No sistema do Omelete, as alterações back-end propõem-se em tratar as requisições

HTTP do usuário verificando qual tipo de página o mesmo está tentando acessar, e então

busca na base de dados os conteúdos relacionados, realiza um processamento e filtro de

acordo com a seção do site, monta o template de renderização com os dados já processados, e

por fim envia um documento HTML completo como resposta à requisição. Esses recursos

permitem direcionar quais tipos de conteúdo e a quantidade de cada um que serão exibidos

numa determinada página.

Nessa atividade realizou-se também customizações na página de administração de

conteúdos, para alterar as informações exibidas, bem como suas funcionalidades, de modo a

satisfazer as necessidades dos editores e redatores do site.

Objetivo: desenvolver novas funcionalidades para o site, alterando as informações que são

enviadas tanto aos usuários, como aos editores e redatores.

Recursos disponíveis: máquina local configurada com o projeto.

Page 18: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

10

Periodicidade de realização: a atividade é desenvolvida diariamente.

Page 19: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

11

5. DIAGNÓSTICO DOS PRINCIPAIS PROBLEMAS OBSERVADOS E SUGESTÃO

DE MELHORIA

Pesquisa e Treinamento: se manter atualizado frente as novas tecnologias e

ferramentas lançadas é fundamental para o sucesso de qualquer profissional da área de

Tecnologia da Informação. As pesquisas e o aprendizado dentro do Omelete se mantiveram

constantes durante todo o período do estágio, sempre acompanhado da supervisão do

desenvolvedor mentor, que orientou sempre que houveram surgimento de dúvidas, apontando

as melhores bibliografias a serem estudadas, ou explicando detalhadamente o que precisou ser

executado. Apesar do apoio recebido, o projeto possui uma documentação geral do ambiente

de trabalho incompleta, o que dificulta o entendimento do estagiário sobre seu funcionamento.

Desenvolvimento e Ajustes no Layout: a organização dos arquivos de template

HTML e de CSS foi bem construído e está dividido por tipos de páginas ou por seções,

facilitando o acesso, principalmente num projeto desse porte que possuem centenas de

arquivos.

Um problema observado se refere aos arquivos CSS que contêm muitos seletores

legados, ainda das primeiras versões do site, e por haver muitos seletores que definem a

mesma propriedade, tornando o código confuso e redundante. Uma simples refatoração dos

seletores duplicados e uma limpeza nos seletores legados são suficiente para melhorar a

legibilidade dos arquivos.

Search Engine Optimization – SEO: a recente mudança de versão do portal trouxe

diversas alterações na organização dos elementos HTML, que resultou na modificação de

algumas estruturas hierárquicas que definem quais tipos de conteúdos o site está exibindo.

Certas modificações impossibilitaram a leitura adequada das informações por parte dos

principais motores de busca. Diversas destas páginas já foram reestruturadas, enquanto as

demais serão trabalhadas após tarefas com maior prioridade serem concluídas.

Página Especial: Linha do Tempo do Star Wars: a atividade apresentou muitas

mudanças no escopo e nas especificações durante todo o desenvolvimento, atrasando em

alguns dias a entrega do projeto. Contudo, a página se encontra estável e com mais recursos

do que foi previsto inicialmente. Planeja-se apenas incluir mais detalhes sobre os próximos

filmes da série nos espaços já reservados para isso.

Deploy para o Servidor de Testes e Validação: um ambiente dedicado para testes e

validações serve para que os demais setores da empresa possam verificar a implementação de

novos recursos e provê um modo seguro e bem estruturado de se certificar que as alterações

Page 20: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

12

realizadas mantenham ou melhorem o desempenho e as funcionalidades do site. É um

processo estável e de fácil manutenção que atualmente dispensa melhorias.

Modificações no back-end: mesmo com o esforço conjunto da equipe para testar

manualmente todas as alterações realizadas, nem sempre é o suficiente para cobrir todos os

casos de testes, deixando assim que falhas não idêntificadas sejam inseridas no projeto. Uma

melhoria considerável a ser implantada é o uso de testes automatizados, programa que realiza

uma série de testes, verificando se seu comportamento está de acordo com o desejado.

Page 21: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

13

6. CONCLUSÃO

A realização do estágio como desenvolvedor no Omelete foi bastante construtivo e

essencial para a formação acadêmica, pois nele foi possível aplicar as teorias e conceitos

aprendidos em sala de aula, no desenvolvimento das atividades, permitindo o aprendizado de

novas habilidades e tecnologias, como foi o caso da utilização do GitHub e das demais

ferramentas que proporcionam agilidade na realização das tarefas.

O ambiente de trabalho descontraído, mas ao mesmo tempo profissional, que é

vivenciado na empresa, junto com o excelente relacionamento com a equipe de TI e com as

demais áreas da empresa, foram sem dúvidas de extrema importância para os bons resultados

que conseguimos extrair das atividades. Esses fatores auxiliaram também no meu

amadurecimento social, enriquecendo as habilidades do trabalho em equipe e no

comportamento pessoal dentro e fora do ambiente profissional.

Durante o período de estágio tive a oportunidade de trabalhar em praticamente todas

as funções que caracterizam um desenvolvedor web, com atuação no back-end, no front-end e

em infraestrutura do sistema. Essa característica contribuiu para minha evolução pessoal e

profissional, uma vez que pude desempenhar trabalhos em diferentes áreas do projeto , o que

com certeza agregará valor curricular possibilitando melhores oportunidades no meio

profissional.

Page 22: professor.ufabc.edu.brprofessor.ufabc.edu.br/~jesus.mena/misc/modelos... · Web viewDesenvolvimento de Back-end (Python); Desenvolvimento de Front-End(HTML/CSS/Java Script); Modelagem

14

7. REFERÊNCIAS

[1] FERREIRA, Rafael Francisco Carneiro. O site Omelete e o jornalismo cultural para

nerds. Universidade Federal do Rio Grande do Sul, 2014. Disponível em

<http://www.lume.ufrgs.br/handle/10183/111773>. Acessado em 23 de Dezembro de 2015.

[2] Codecademy. Disponível em <https://www.codecademy.com/> . Acessado em 23 de

Dezembro de 2015.

[3] Django Project. Disponível em <https://www.djangoproject.com/>. Acessado em 23 de

Dezembro de 2015.

[4] Foundation. Disponível em <http://foundation.zurb.com/> . Acessado em 23 de Dezembro

de 2015.

[5] W3Schools. Disponível em < http://www.w3schools.com/>. Acessado em 23 de

Dezembro de 2015.

[6] GreenSock Animation Plataform. Disponível em <http://greensock.com/gsap >. Acessado

em 23 de Dezembro de 2015.

[7] GitHub. Disponível em < https://github.com/ >. Acessado em 23 de Dezembro de 2015.