CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA ETEC PROF. MÁRIO ANTÔNIO VERZA Curso Técnico em Informática para Internet

(1)

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA ETEC PROF. MÁRIO ANTÔNIO VERZA Curso Técnico em Informática para Internet

ALICE RODRIGUES VENANCIO

GIULIA ANDRESSA ANDRADE DE OLIVEIRA MAYARA DA SILVA CAVALCANTE

THALITA FERNANDES PEREIRA

WEBSITE - GRÁFICA E PAPELARIA SANTO ANTÔNIO

Palmital

2015

(2)

ALICE RODRIGUES VENANCIO

GIULIA ANDRESSA ANDRADE DE OLIVEIRA MAYARA DA SILVA CAVALCANTE

THALITA FERNANDES PEREIRA

WEBSITE - GRÁFICA E PAPELARIA SANTO ANTÔNIO

Trabalho de conclusão de curso apresentado à ETEC Prof. Mário Antônio Verza, como parte dos requisitos necessários para a obtenção do título de Técnico em Informática para Internet.

Orientador: Prof. Marco Antônio Gusmão Carvalho.

Palmital

2015

(3)

“Se quer viver uma vida feliz, amarre-se a uma meta, não as pessoas nem as coisas.”

ALBERT EINSTEIN

(4)

RESUMO

Este trabalho teve como intuito transformar o meio de serviço da Gráfica e Papelaria Santo Antônio em algo mais moderno, aproximando seus clientes e criando um modo mais prático de apresentar os trabalhos já desenvolvidos. Com o consentimento do proprietário, foram realizadas várias pesquisas para afirmar a conclusão geral de que quando o trabalho de uma empresa é ingressado na web, a porcentagem de reconhecimento e aceitação pode crescer muito. Com todas essas informações foi decidido pelo grupo que seria de grande importância para a empresa em destaque utilizar a web como ferramenta de trabalho, assim quando o cliente acessasse o site, teria grande parte dos trabalhos desenvolvidos como base para a criação de seu próprio pedido. Depois de adquirido todas as informações de que precisamos, o desenvolvimento prático e teórico foi desenvolvido pelo grupo com o auxilio dessas pesquisas. O proprietário optou por um site simples onde o cliente conseguisse achar o que necessitava com facilidade. Sem muitas mudanças, a ideia principal foi concluída de acordo com o esperado, assim conseguindo aproximar os clientes da Gráfica com praticidade.

Palavras-chave: Trabalho. Proprietário. Empresa.

(5)

RESUMO EM LÍNGUA ESTRANGEIRA

This work was aimed to transform the working environment of Graphic Stationery Santo Antônio more modern, approaching its customers and taking a most practical means of presenting the work already developed. The consent of the owner, were made several research to affirm the overall conclusion that when the work of a company is joined on the web, the percentage of recognition and acceptance can grow a lot. Working with all this information it was decided by the group that would be of great importance to the highlighted company to use the web as a tool, so when the client access the site, will have much of the work undertaken as a basis for creating your own request. After the acquisition of all the information we requested, the practical and theoretical development was developed by the group with the help of some research. The owner opted for a simple site where the client could find what he needed easily. Without many changes, the main idea has been completed as expected, thus getting closer customers graphical practicality.

Keywords: Work. Owner. Company.

(6)

LISTA DE ABREVIATURAS E SIGLAS

Cascading Style Sheets (CSS).

Escola Técnica Estadual (ETEC).

HyperText Markup Language (HTML).

Java script para Web Designers (JQUERY).

(7)

LISTA DE ILUSTRAÇÕES

Figura 01 – Página Inicial ... 14

Figura 02 – Página Cartões ... 14

Figura 03 – Página Panfletos ... 15

Figura 04 – Página Convites ... 15

Figura 05 – Página Papel Timbrado ... 16

Figura 06 – Página Receituários ... 16

Figura 07 – Página Outros ... 17

Figura 08 – Página Papelaria ... 17

Figura 09 – Página Orçamento ... 18

Figura 10 – Página Orçamento II ... 18

Figura 11 – Página Contato... 19

Figura 12 – Esboço da identidade visual ... 23

Figura 13 – Esboço da identidade visual II ... 23

Figura 14 – Logotipo Oficial... 24

(8)

SUMÁRIO

1. INTRODUÇÃO ... 09

1.1 Objetivos ... 09

1.2 Justificativa ... 09

1.3 Procedimentos Metodológicos ... 10

2. DESENVOLVIMENTO ... 11

2.1 Ramo de Atividade ... 11

2.2 Layout e Navegação ... 11

2.3 Tecnologias ... 12

2.4 Desenvolvimento do Projeto ... 13

2.5 Resultados e Discussões ... 19

3. RESULTADOS ... 20

4. CONSIDERAÇÕES FINAIS ... 21

REFERÊNCIAS ... 22

APÊNDICE ... 23

6.1 Apêndice A – Cronograma ... 23

6.2 Apêndice B – Esboço Logotipo ... 23

ANEXOS ... 25

7.1 Anexo A – Ocupação de Solo ... 25

(9)

1. INTRODUÇÃO

Com os avanços da tecnologia, quem hoje divulga seu trabalho na web está sempre um passo à frente de seus concorrentes. Com o passar dos anos, a internet ganhou seu lugar na casa de milhares de habitantes e tudo se tornou mais prático e rápido.

A internet facilita a vida de quem a utiliza, seja para fins comerciais ou lazer.

Com isso em mente, entende-se que se você tem a oportunidade de ingressar seu empreendimento na web, será possível gerar um lucro maior.

A Gráfica Papelaria Santo Antônio está no ramo de trabalho há vários anos. A ideia é transformar seu meio de trabalho mais moderno. Facilitando assim a vida dos clientes, do proprietário e divulgando seu serviço.

1.1 OBJETIVOS

O objetivo geral da criação deste trabalho é a principio tornar o mecanismo de serviço mais moderno. A Gráfica está no mercado de trabalho há vinte e dois anos, porém com a modernização das telecomunicações nos últimos anos, deixou-a para trás quando se falava de tecnologia.

Entrou-se em contato com o proprietário da Gráfica e ficou decidido que seria uma boa ideia inserir seu empreendimento na web.

Constituem os objetivos específicos:

a) O cliente poderia saber das ofertas;

b) O mesmo entraria em contato diretamente com o proprietário, pedido de orçamento;

c) Poderia mandar sua ideia para o proprietário avaliar recebendo o orçamento para a impressão daqueles documentos.

1.2 JUSTIFICATIVAS

(10)

Com a modernidade e a facilidade de se comunicar e encontrar tudo que precisa via Web, grande parte das pessoas deixam de sair de casa utilizando assim as ferramentas que têm em mão. A internet tornou-se um dos maiores veículos de alcance no Brasil. Com essas informações chegou-se à conclusão de que elaborando um site comunicativo e de fácil entendimento as vendas na Gráfica poderiam aumentar.

Muitas pessoas não têm tempo de ir até o estabelecimento comercial para pedir o orçamento que deseja. Sendo assim, com o site ela poderá acessar e enviar seu pedido de orçamento recebendo o mais brevemente sua resposta.

Facilitaria a rotina dos clientes, pois o tempo utilizado para ir até o estabelecimento poderia estar sendo utilizado para outros compromissos.

1.3 PROCEDIMENTOS METODOLÓGICOS

O método mais utilizado para a realização desse trabalho foi a pesquisa via web, mas também contou-se com algumas entrevistas com o proprietário da Gráfica.

(11)

2. DESENVOLVIMENTO

2.1 RAMO DE ATIVIDADE

A Gráfica Santo Antônio iniciou suas atividades em Palmital sob a direção do senhor João Pereira no ano de 1993 na Rua Duque de Caxias n°00, onde ficou estabelecida por quatro anos, mudando em 1997 para a rua Dr Geraldo Coelho N°

526 e hoje está em funcionamento na rua João Moreira da Silva n° 275, administrada por seus filhos.

A empresa de vínculo familiar está no mercado de trabalho a vinte e dois anos. Com o aumento da demanda de serviço, passaram a ter oito funcionários, dois sócios que ajudam a administrar a empresa, atendentes e operadores de máquinas e acabamento gráfico, atendendo assim Palmital e região. Nos últimos três anos, decidiram que seria de grande lucro aderir a Papelaria ao seu ramo de trabalho, desse modo se tornando Gráfica/Papelaria Santo Antônio.

2.1.1 ATIVIDADES DESENVOLVIDAS

AGráfica/Papelaria inicia as suas atividades às oito horas e cada funcionário se encarrega de desempenhar seu serviço. Os trabalhos desenvolvidos pela Gráfica são: criação de cartões de visita, panfletos, convites, papel timbrado, receituários, entre outros. Já na parte da Papelaria, são vendidos materiais escolares em geral.

A empresa até o momento tem feito sua divulgação a partir de panfletos e propagandas.

2.2 LAYOUT E NAVEGAÇÃO

Para uma fácil localização dentro do site, optou-se por desenvolver um layout prático onde o navegador consiga encontrar de modo preciso tudo o que deseja.

Com uma barra de menu simples e moderna com quatro opções de conteúdo, fica mais simples de localizar seu objetivo.

“Ter um layout simples é essencial para criar uma experiência de usuário que o guie pela página.” (SAES, 2015, p. 1)

(12)

2.3 TECNOLOGIAS

2.3.1 HTML5

O HTML é usado como linguagem para a publicação de conteúdo na Web, como por exemplo: texto, imagens, áudio, vídeos, documentos e etc. O HTML5 é uma nova versão de todos os outros HTML, um dos seus principais objetivos é facilitar a manipulação dos elementos, possibilitando para o desenvolvedor modificar as características dos objetos de forma que não se intrusa e de uma maneira que seja transparente para o usuário.

2.3.2 CSS

A linguagem CSS é uma folha de estilo dividida em camadas, sua função é definir o layout de documentos como html e xml. Com o CSS temos a possibilidade de mudar cores, fontes, linhas, margens e muito mais, além disso, podemos utilizar a mesma folha de estilos para vários documentos, o que é bem mais prático e rápido.

2.3.3 JQUERY

O JQuery nada mais é do que uma biblioteca de funções incluída dentro da linguagem JavaScript. Foi criada sob o lema “Write less, do more”, e no português significa “escreva menos e faça mais”, e pensando dessa forma ela se torna um estilo atrativo e interessante de aprender, em poucas linhas é possível fazer uma página de web plausível com efeitos e animações que acabam chamando ainda mais a atenção dos usuários.

2.3.4 WOW SLIDER

O Wow Slider serve para a inserção de imagens e efeitos de várias cores e estilos, sendo assim com essa ferramenta você pode passar slides de tempo em tempo ou com um clique.

2.3.5 ADOBE FIREWORKS

(13)

O Fireworks é um programa que edita e cria páginas para sites e afins. Com ele você tem uma variedade de ferramentas para sua criação, mas é possível só editar o que uma imagem necessita. Pode ser criados também botões para sites e folders. O mais utilizado é a criação e o desenvolvimento do layout do site.

“Suas funcionalidades focam a publicação gráfica na Internet, por isso inclui suporte a GIF animado, PNG e imagens fatiadas, além de possuir ótima compressão de imagens.” (MATTOS, 2009, p.1)

2.3.6 ADOBE PHOTOSHOP

O Photoshop é um programa usado na editoração de imagens, onde se pode realizar várias atividades, tais como: cortar imagens, colorir, passar para tons de cinza, redimensionar as imagens, entre outros. O programa foi desenvolvido pelo Adobe Systems, e hoje é considerado o líder no mercado de programas para a editoração de imagens.

2.4 DESENVOLVIMENTO DO PROJETO

2.4.1 PÁGINA INICIAL

Na página inicial do site da Gráfica/Papelaria Santo Antônio será oferecido um menu prático e objetivo para que o usuário encontre com facilidade a opção que mais necessita. Primeiramente terá uma apresentação em JQuery destacando as novidades da empresa. Logo abaixo links dos serviços mais procurados com uma pequena descrição dos mesmos.

(14)

Figura 01 – Página Inicial.

Fonte: Mayara da Silva Cavalcante

2.4.2 PÁGINA GRÁFICA

Na página Gráfica irá ter os links para os seguintes serviços: cartões, panfletos, convites, papel timbrado, receituários e outros. Os preços de cada produto serão disponibilizados no momento do orçamento.

2.4.2.1 PÁGINA CARTÕES

Para o acesso ao máximo de informação sobre o produto, a opção de cartão na Gráfica/Papelaria terá seu nome juntamente com uma imagem de cada item.

Figura 02 – Página Cartões.

(15)

2.4.2.2 PÁGINA PANFLETOS

Nesta página irá ser exposto modelos de panfletos disponíveis na empresa, além seus nomes.

Figura 03 – Página Panfletos.

2.4.2.3 PÁGINA CONVITES

A página interna convites seguirá o modelo das anteriores, ou seja, com a imagem de alguns exemplos de produtos disponíveis e uma descrição dos mesmos.

Figura 04 – Página Convites.

(16)

2.4.2.4 PÁGINA PAPEL TIMBRADO

Nesta página irá conter alguns exemplos de papeis já produzidos pela empresa com pequenas informações abaixo de cada imagem.

Figura 05 – Página Papel Timbrado.

2.4.2.5 PÁGINA RECEITUARIOS

Na página receituários serão expostos modelos do produto disponíveis na empresa, e seguindo o padrão dos outros sub menus, conterá imagens e pequenas informações.

Figura 06 – Página Receituários.

(17)

2.4.2.6 PÁGINA OUTROS

Esta pagina conterá dados sobre outros serviços que não foram citados anteriormente no menu gráfica, todos também com o máximo de informações para dar mais segurança ao navegador. Conterá nome, imagens de cada produto e pequenas descrições.

Figura 07 – Página Outros.

2.4.3 PÁGINA PAPELARIA

Na página papelaria irá conter as opções para cada tipo de produto comercializado de material escolar e material para escritório como: cadernos, agendas, mochilas, pastas e outros.

Figura 08 – Página Papelaria.

(18)

2.4.4 PÁGINA ORÇAMENTO

Na página orçamento permitirá que o usuário escolha as opções que melhor se enquadra no produto final que deseja, por exemplo: cor, tamanho, tipo de papel, entre outras. Além disso, terá um espaço para o usuário mandar uma imagem junto com o orçamento.

Figura 09 – Página Orçamento.

Figura 10 – Página Orçamento II.

(19)

2.4.5 PÁGINA CONTATO

Esta página irá conter informações sobre a localização da Gráfica/Papelaria e um pequeno formulário para enviar suas dúvidas ou criticas construtivas para o proprietário, com o objetivo de ajudar à empresa a estar sempre em progresso.

Figura 11 – Página Contato.

2.5 RESULTADO E DISCUSSÕES

Todo o material utilizado para o desenvolvimento das páginas foi de acordo com as exigências do proprietário do estabelecimento. O conteúdo das páginas foi disponibilizado de acordo com a necessidade de cada página.

(20)

3. RESULTADOS

Com todas as pesquisas, buscas por informações e entrevistas com o proprietário, foi adquirido um conhecimento maior para ser usado ao decorrer da vida. Descobriu-se que a internet faz parte de mais de 83% da vida dos brasileiros, ou seja, tudo é pesquisado via web. Quando se quer algo, é procurada a solução na internet. Aderindo a Gráfica ao meio tecnológico, estaria ajudando não somente a empresa, mas também os clientes e pessoas interessadas sobre o assunto.

(21)

4. CONSIDERAÇÕES FINAIS

O objetivo proposto desse projeto era transformar o meio de trabalho da empresa em algo mais moderno, colocando-os assim no mundo da informática.

Foram realizados diversos meios de pesquisas, tanto bibliográficas como entrevistas com o proprietário. Desenvolvendo este website estaríamos facilitando o trabalho da empresa e também a vida do cliente. Todos os objetivos impostos até aqui foram realizados com sucesso. Com a colaboração de todas as partes, foi possível realizar um trabalho de acordo com o projeto inicial.

Algumas metas impostas pelo grupo no começo tomaram rumos diferentes ao decorrer do projeto, mas o resultado final foi o esperado por todos.

Com o desenvolvimento do website para a Gráfica/Papelaria Santo Antônio, ouve uma maior proximidade entre os clientes e o proprietário.

Chegou-se a conclusão de que todo o projeto é capaz de ser concluído quando todos colaboram. Esse projeto está aberto a mudanças ao decorrer do tempo, pois a tecnologia tende a só evoluir.

(22)

REFERÊNCIAS

CORREIA, V. oficinadanet. Oficina da Net, 2011. Disponível em:

<http://www.oficinadanet.com.br/artigo/html/introducao-a-programacao-do-html-5>.

Acesso em: 08 fev. 2015.

EINSTEIN, A. kdfrases. KD Frases. Disponível em:

<http://kdfrases.com/frase/91189>. Acesso em: 16 mar. 2015.

ESPINHA, D. escolacriatividade. Escola Criatividade, 2010. Disponível em:

<http://www.escolacriatividade.com/tutorial-jquery-o-que-e-e-como-usar-o-jquery/>.

Acesso em: 28 fev. 2015.

FORUMWEB. forumweb. Fórum Web, 2015. Disponível em:

<http://www.forumweb.com.br/faq/101/fireworks/para-que-serve-o-fireworks>.

Acesso em: 09 mar. 2015.

GEATER, J. solvusoft. Solvusoft, 2015. Disponível em: <http://www.solvusoft.com/pt- br/files/erro-remocao-do-virus/exe/windows/wowslider-com/wow-slider/wowslider- exe/>. Acesso em: 28 fev. 2015.

JORDÃO, F. tecmundo. Tec Mundo, 2012. Disponível em:

<http://www.tecmundo.com.br/photoshop/22621-photoshop-cs6-conheca-as- principais-novidades.htm>. Acesso em: 20 fev. 2015.

MATTOS, R. tecmundo. Tec Mundo, 2009. Disponível em:

<http://tiraduvidas.tecmundo.com.br/23209>. Acesso em: 02 abr. 2015.

PEREIRA, A. P. tecmundo. Tec Mundo, 2009. Disponível em:

<http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm>. Acesso em: 05 mar. 2015.

SAES, B. blogimpacta. Blog Impacta, 2015. Disponível em:

<http://blogimpacta.com.br/2015/01/14/5-tendencias-para-web-design-em-2015/>.

Acesso em: 20 abr. 2015.

(23)

APÊNDICES

6.1 APÊNDICE A – Cronograma.

TRABALHO Fevereiro Março Abril Maio Junho

Coleta de Dados Logotipo

Layout P. Index P. Gráfica P. Papelaria P. Orçamento

P. Contato Testes

6.2 APÊNDICE B – Esboço Logotipo.

Figura 12 – Esboço da identidade visual.

Figura 13 – Esboço da identidade visual II.

(24)

Figura 14 – Logotipo Oficial.

(25)

ANEXOS

ANEXO A – Ocupação do Solo