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

WEBSITE – MARCENARIA MERLI MÓVEIS

KARIN APARECIDA DOMINGOS VIEIRA

NICOLY MARIA PERES MONTEIRO

PABLO HENRIQUE MACHADO NEGRERO

WILLIAM HONÓRIO JUNIOR

PALMITAL 2014

2

KARIN APARECIDA DOMINGOS VIEIRA

NICOLY MARIA PERES MONTEIRO

PABLO HENRIQUE MACHADO NEGRERO

WILLIAM HONÓRIO JUNIOR

WEBSITE – MARCENARIA MERLI MÓVEIS

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.

Orientadora: Luciana Michele Ventura

PALMITAL 2014

3

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA

ETEC PROF. MÁRIO ANTÔNIO VERZA

KARIN APARECIDA DOMINGOS VIEIRA

NICOLY MARIA PERES MONTEIRO

PABLO HENRIQUE MACHADO NEGRERO

WILLIAM HONÓRIO JUNIOR

WEBSITE – MARCENARIA MERLI MÓVEIS

APROVADO EM 24/05/2014

LUCIANA MICHELE VENTURA – ORIENTADORA

TATIANA VALÉRIO MONTEIRO- EXAMINADORA

4

Dedicamos este trabalho com muito

carinho aos professores da ETEC Profº.

Mário Antonio Verza e aos nossos

familiares.

5

AGRADECIMENTOS

Damos nossos agradecimentos em especial aos professores do curso, que

sempre estiveram dispostos a nos ajudar e tirar as dúvidas necessárias, transmitindo

seu conhecimento a nós.

Agradecemos aos outros alunos e amigos do curso que muitas vezes

estiveram dispostos a nos ajudar nas dificuldades e nas dúvidas.

Oferecemos o nosso muito obrigado às professoras Luciana Michele Ventura

e Tatiana Valério Monteiro que nos instruíram e transmitiram seu conhecimento para

que pudéssemos desenvolver e concluir com êxito este projeto.

Finalmente, agradecemos a nossas famílias que tiveram paciência e nos

incentivaram a ser cada vez melhores no nosso projeto e principalmente em nossos

estudos. Obrigado também pela compreensão que tiveram nos momentos que não

estivemos em casa por estar na aula e, sobretudo desenvolvendo o projeto de TCC.

O nosso grande muito obrigado!

6

"Se estás a trabalhar em algo excitante e

do qual tu gostas mesmo muito, não

precisas de ser pressionado para ter mais

resultados. A tua própria visão puxa-te

para frente.”1

(Steve Jobs)

1 Disponível em: <http://www.citador.pt/frases/citacoes/a/steve-jobs> Acesso em: 20 de março de

2014.

7

JUNIOR, William Honório. MONTEIRO, Nicoly Maria Peres. NEGRERO, Pablo

Henrique Machado. VIEIRA, Karin Aparecida Domingos. Trabalho de Conclusão de

Curso no Ensino Técnico em Informática para Internet – Website – Marcenaria

Merli Móveis. 2014. 33 f.

RESUMO

No começo do trabalho de conclusão de curso, uma das grandes dificuldades

encontradas pelo grupo foi sobre o que seria desenvolvido. Depois de decidir que

seria o projeto de um website, a outra foi escolher uma empresa ao qual o

proprietário tivesse interesse neste tipo de divulgação. Decidimos pela Marcenaria

Merli Móveis, pois ela não apresentava uma divulgação ampla e também ainda não

possuía um website próprio. Além disso, nos proporcionou uma maior facilidade

quanto ao contato com a empresa e com os sócios. O desenvolvimento foi feito a

partir do momento que adquirimos as informações necessárias como fotos, arquivos,

entre outras coisas. Dividimo-nos em duplas para a criação prática e teórica, pois

dessa forma facilitaria o trabalho para todos. Cada dupla ficou responsável pela

parte prática e teórica, começamos a desenvolver o website e as informações

escritas a partir dos dados que possuíamos, fazendo modificações conforme os

gostos do proprietário da Marcenaria. Muitas alterações foram feitas até chegar ao

resultado final que agradou a todos.

Palavras-chave: marcenaria, tecnologia e divulgação.

8

LISTA DE ABREVIATURAS E SIGLAS

TCC Trabalho de Conclusão de Curso

ETEC Escola Técnica Estadual

CSS Cascading Style Sheets

HTML Hyper Text Markup Language

9

LISTA DE FIGURAS

FIGURA 1 – Entrada Principal Marcenaria .......................................................... 17

FIGURA 2 – Logotipo .......................................................................................... 18

FIGURA 3 – Página Principal .............................................................................. 18

FIGURA 4 – Submenu 1 ..................................................................................... 19

FIGURA 5 – Submenu 2 ..................................................................................... 19

FIGURA 6 – História ............................................................................................ 20

FIGURA 7 – Objetivos ......................................................................................... 20

FIGURA 8 – Contato ............................................................................................ 21

FIGURA 9 – Portfólio Banheiro ............................................................................ 21

FIGURA 10 – Portfólio Cozinha 1 ......................................................................... 22

FIGURA 11 – Portfólio Cozinha 2 ......................................................................... 22

FIGURA 12 – Portfólio Cozinha 3 ......................................................................... 23

FIGURA 13 – Portfólio Escritório .......................................................................... 23

FIGURA 14 – Portfólio Rústico 1 .......................................................................... 24

FIGURA 15 – Portfólio Rústico 2 .......................................................................... 24

FIGURA 16 – Portfólio Sala 1 .............................................................................. 25

FIGURA 17 – Portfólio Sala 2 .............................................................................. 25

FIGURA 18– Portfólio Escadas, Lazer e Restauração ......................................... 26

FIGURA 19 – Autorização .................................................................................... 29

FIGURA 20- Cadastro da Marcenaria .................................................................. 30

FIGURA 21 – Logotipo ......................................................................................... 32

10

SUMÁRIO

1. INTRODUÇÃO ................................................................................................ 12

1.1 OBJETIVOS ........................................................................................ 12

1.1.1 OBJETIVOS GERAIS ....................................................................... 13

1.1.2 OBJETIVOS ESPECÍFICOS ............................................................ 13

1.1.3 PROCEDIMENTOS METODOLÓGICOS ......................................... 13

1.1.4 COLETA DE DADOS ....................................................................... 13

2. FUNDAMENTAÇAO TEÓRICA ...................................................................... 14

2.1 RAMO DE ATIVIDADE .............................................................................. 14

2.1.1 ATIVIDADES DESENVOLVIDAS ..................................................... 14

2.2 TECNOLOGIAS ........................................................................................ 14

2.2.1 CSS3 ................................................................................................ 15

2.2.2 COREL DRAW .................................................................................. 15

2.2.3 ADOBE FIREWORKS ...................................................................... 15

2.2.4 HTML4 .............................................................................................. 16

2.2.5 JQUERY ........................................................................................... 16

2.2.6 WOW SLIDER ..............................................................................16

3. ESTUDO DE CASO ........................................................................................ 17

3.1 PROJETOS DO WEBSITE MARCENARIA MERLI MÓVEIS ..................... 17

3.1.1 IDENTIDADE VISUAL ...................................................................... 17

3.1.2 LOGOTIPO ....................................................................................... 18

3.2 DESENVOLVIMENTO DO WEBSITE MARCENARIA MERLI MÓVEIS .... 18

3.2.1 PÁGINA PRINCIPAL – HOME PAGE .............................................. 18

3.2.2 PÁGINA PRINCIPAL – SUBMENU 1 e SUBMENU 2 ...................... 19

3.3 PÁGINA DE HISTÓRIA DA MARCENARIA .............................................. 20

3.4 PÁGINA DE OBJETIVOS .......................................................................... 20

3.5 PÁGINA DE CONTATO COM A EMPRESA...............................................21

3.6 PORTFÓLIO – BANHEIRO.........................................................................21

3.7 PORTFÓLIO - COZINHA PÁGINAS 1, 2, 3...............................................22

3.8 PORTFÓLIO – ESCRITÓRIO.....................................................................23

3.9 PORTFÓLIO - ESTILO RÚSTICO PÁGINAS 1,2......................................24

3.10 PORTFÓLIO – SALA PÁGINAS 1,2 ........................................................25

11

3.11 PORTFÓLIO – OUTROS..........................................................................26

4. CONSIDERAÇÕES FINAIS ............................................................................ 27

5. REFERÊNCIAS ............................................................................................... 28

6. ANEXOS ......................................................................................................... 29

6.1 ALVARA DE APROVAÇÃO DA MARCENARIA.......................................29

6.2 BOLETIM DE CADASTRAMENTO DE ATIVIDADES..............................30

7. APÊNDICE ...................................................................................................... 31

APÊNDICE A – Cronograma Prático ............................................................... 31

APÊNDICE B – Cronograma Teórico .............................................................. 31

APÊNDICE C – Logotipo ................................................................................. 32

APÊNDICE D – Questionário .......................................................................... 32

12

1. INTRODUÇÃO

A Internet nos dias de hoje é um dos meios de comunicação, divulgação e

integração mais prático e mais utilizado por todo o mundo. Ela é na maioria das

vezes utilizada para aproximar pessoas de qualquer lugar do globo.

A rede mundial vem sendo aprimorada ao longo dos anos, e significou um

grande avanço para a humanidade, que antes se comunicava com outras pessoas

por meios lentos e complicados, como por exemplo, cartas, telégrafos, fax, entre

outras coisas. Além disso, a internet é muito utilizada para a propagação de

determinados estilos, pensamentos, e mudanças na maneira que os seres humanos

agem e pensam.

"A tecnologia sempre será fascinante, o -homem é quem decidirá como ou para o quê será utilizada!”2 (PINHEIRO, Reinaldo, ano não encontrado)

Além da integração social que a Internet proporciona, ela também é um meio

muito utilizado por empresas para que estas possam ser divulgadas e também para

que ofereçam comodidade ao cliente, para que ele possa conhecer e muitas vezes

negociar e fazer compras, sem sair de casa.

Sendo assim, esse tipo de divulgação foi a escolhida para que a Marcenaria

Móveis Merli proporcione melhor comodidade aos seus clientes e as pessoas que

ainda não conhecem a empresa, mas que poderão ficar mais próximas dela através

das informações que encontrarão e conseguirão manter através do site.

1.1 OBJETIVOS

O projeto realizado tem a finalidade de desenvolver um Website para a

Marcenaria Merli Móveis, com intuito de divulgar a empresa e os trabalhos

realizados pela mesma.

2 Disponível em: <http://pensador.uol.com.br/frase/MTMwNjkwMQ/> Acesso em 24 de fevereiro de 2014.

13

1.1.1 OBJETIVOS ESPECÍFICOS

Procurar saber os gostos e intenções dos donos da marcenaria e as

linguagens de programação adequadas para assim, desenvolver o website com

êxito, e divulgar a empresa de uma forma que esta tenha mais contato com os

clientes.

Analisar quais são as intenções e preferências do dono da marcenaria

para o desenvolvimento do website.

● Pesquisar novas linguagens para o desenvolvimento do website.

● Analisar a melhor forma para divulgar o website.

1.1.2 OBJETIVOS GERAIS

Pesquisar as melhores formas de desenvolver um website que tenha

qualidade e acessibilidade e ao mesmo tempo divulgar a marcenaria Merli Móveis

para atrair mais clientes.

1.1.3 PROCEDIMENTOS METODOLÓGICOS

O método que utilizamos foi uma pesquisa bibliográfica.

1.1.4 COLETA DE DADOS

Os instrumentos necessários para a realização da pesquisa serão entrevistas,

anotando as informações e desejos passados pelos proprietários, e enquetes para

saber o que os clientes da empresa gostariam de encontrar no website.

14

2. FUNDAMENTAÇÃO TEÓRICA

2.1. RAMO DE ATIVIDADE

Em março de 2012 a marcenaria Merli Móveis começou a se destacar dentro

do seu ramo comercial. Ao todo, já são vinte e quatro anos de existência da empresa

sendo no início produzidos os móveis na garagem da casa de um dos sócios da

empresa, vendo que a atividade estava dando certo eles mudaram de endereço,

indo para um barracão com um espaço maior, porém com algum tempo de serviço

nesse local à empresa foi crescendo e se mudou novamente para o atual local. Hoje

a empresa conta ao todo com cerca de dez funcionários entre eles, dois sócios que

administram a empresa, faxineiros, ajudantes de marceneiros, atendentes,

montadores, entre outros. A empresa atende toda demanda regional, abrangendo as

cidades de Assis, Palmital, Ibirarema, Salto Grande, Ourinhos e Marília.

2.1.1. ATIVIDADES DESENVOLVIDAS

Os funcionários chegam à empresa às sete horas, passam o cartão de ponto,

limpam o local de serviço e após isso cada funcionário vai desempenhar sua função.

Os móveis são fabricados aleatoriamente por categorias, sendo eles os mais

procurados, móveis para cozinhas e gabinetes para banheiros.

A divulgação da empresa até o momento é feita através de anúncios em listas

regionais, propagandas em panfletos e em mapas da cidade da cidade de Palmital.

2.2. TECNOLOGIAS

As tecnologias utilizadas no desenvolvimento do presente trabalho foram

definidas juntamente com a equipe de desenvolvimento e atendendo aos requisitos

necessários para a criação do site.

15

2.2.1 CSS3

O CSS3 é a nova versão do Cascading Style Sheets (Folha de Estilos em

Cascata), que é utilizado para definir quais serão os estilos de uma página para a

web, contendo assim imagens, cores, planos de fundo, entre outras alterações para

o website.

“Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.” 3 (Autor Desconhecido)

2.2.2 CORELDRAW

O CorelDraw foi desenvolvido pela empresa Corel Corporation, e é um editor

de imagens vetoriais. O programa possui ferramentas diferentes de um Photoshop,

pois ele não somente edita imagens, mas também produz desenhos artísticos,

publicitários, logotipos, capas de revistas, livros, CDs, imagens de objetos para

aplicação nas páginas de Internet (botões, ícones, animações gráficas), entre outras

coisas.

2.2.3 ADOBE FIREWORKS

O Fireworks foi desenvolvido pela Macromedia, e depois obtido pelo Adobe.

Ele é um editor de imagens de bitmap e desenho vetorial. As suas funcionalidades

são voltadas para a publicação na Internet, por isso possui ferramentas de GIF

animado, PNG e imagens fatiadas, além de ser muito utilizado para edição de

imagens.

2.2.4 HTML4

O HTML4 foi desenvolvido a partir da linguagem HTML (Hyper Text Markup

Language - Linguagem de Marcação de Hipertexto), trazendo em seu repertório

3 Disponível em: < http://pt.wikipedia.org/wiki/Cascading_Style_Sheets/> Acesso em: 10 de abril de 2014

16

melhorias que fazem total diferencial quando desenvolvida uma página para web.

Apesar de ser uma ótima ferramenta, já existem versões mais recentes da

linguagem.

2.2.5 JQUERY

O jQuery é uma biblioteca JavaScript de código aberto desenvolvida para

tornar mais simples os scripts cliente side que interagem com o HTML. Também é

utilizado para a criação de animações, manipulação de eventos e desenvolvimento

de aplicações AJAX. Utilizando estas facilidades, é possível criar camadas de

abstração para simplificar o desenvolvimento de aplicações web que seriam

complicadas.

2.2.6 WOW SLIDER

O WOW Slider permite inserir slides imagens e efeitos de diferentes estilos e

cores. Com essa ferramenta é possível passar slides a partir de cliques ou de tempo

em tempo. Ele gera códigos para incluir diretamente na codificação do website e

permite guardar o slide de fotos em um ficheiro do projeto.

17

3. ESTUDO DE CASO

3.1 PROJETOS DO WEBSITE MARCENARIA MERLI MÓVEIS

O Projeto que está sendo desenvolvido é um estudo de caso de um website

para a Marcenaria Merli Móveis, tendo como principal objetivo a aproximação do

cliente com a empresa, de uma forma mais confortável, e oferecendo assim uma

maior divulgação para a Marcenaria.

3.1.1 IDENTIDADE VISUAL

Figura 1 - Entrada Principal Marcenaria

18

3.1.2 LOGOTIPO

Figura 2 – Logotipo

3.2 DESENVOLVIMENTO DO WEBSITE MARCENARIA MERLI MÓVEIS

3.2.1 PÁGINA PRINCIPAL – HOME PAGE

Figura 3 - Pagina Principal

19

3.2.2 PÁGINA PRINCIPAL – SUBMENU 1 e SUBMENU 2

Figura 4 - Submenu1

Figura 5 – Submenu2

20

3.3 PÁGINA DE HISTÓRIA DA MARCENARIA

Figura 6 - História

3.4 PÁGINA DE OBJETIVOS

Figura 7 – Objetivos

21

3.5 PÁGINA DE CONTATO COM A EMPRESA

Figura 8 – Contato

3.6 PORTFÓLIO – BANHEIRO

Figura 9 - Portfólio Banheiro

22

3.7 PORTFÓLIO – COZINHA PÁGINAS 1, 2, 3

Figura 10 - Portfólio Cozinha 1

Figura 11 - Portfólio Cozinha 2

23

Figura 12 - Portfólio Cozinha 3

3.8 PORTFÓLIO – ESCRITÓRIO

Figura 13 - Portfólio Escritório

24

3.9 PORTFÓLIO – ESTILO RÚSTICO PÁGINAS 1, 2

Figura 14 - Portfólio Rústico 1

Figura 15 - Portfólio Rústico 2

25

3.10 PORTFÓLIO – SALA PÁGINAS 1, 2

Figura 16 - Portfólio Sala 1

Figura 17 - Portfolio Sala 2

26

3.11 PORTFÓLIO – OUTROS

Figura 18 - Portfólio Escadas, Lazer e Restauração

27

4. CONSIDERAÇÕES FINAIS

O desenvolvimento do website para a Marcenaria Merli Móveis proporcionou

uma maior divulgação para a empresa, e uma maior comodidade para as pessoas

conhecerem o trabalho realizado por ela. Sendo assim, ocorreu uma maior

proximidade entre proprietários e clientes/usuários.

28

5. REFERÊNCIAS

CODIGOFONTE. O que é e como usar JQuery? Disponível em:

<http://www.codigofonte.net/dicas/javascript/310_jquery-o-que-e-e-como-usar>.

Acesso em: 21 de abril de 2014.

TECMUNDO. O que é CSS? Disponível em:

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

de abril de 2014.

TECMUNDO. O que é HTML5? Disponível em:

<http://www.tecmundo.com.br/navegador/2254-o-que-e-html-5-.htm>. Acesso em: 24

de abril de 2014.

TECMUNDO. Tira Dúvidas. Disponível em: <http://www.tecmundo.com.br/tira-

duvidas/23209>. Acesso em: 24 de abril de 2014

WIKIPEDIA. Adobe Fireworks. Disponível em:

<http://pt.wikipedia.org/wiki/Adobe_Fireworks>. Acesso em: 24 de abril de 2014.

WIKIPEDIA. Cascading Style Sheets. Disponível

em:<http://pt.wikipedia.org/wiki/Cascading_Style_Sheets/>. Acesso em: 10 de abril

2014.

WIKIPEDIA. CorelDRAW. Disponível em: <http://pt.wikipedia.org/wiki/CorelDRAW>.

Acesso em: 24 de abril de 2014.

WIKIPEDIA. HTML5. Disponível em: <http://pt.wikipedia.org/wiki/HTML5>. Acesso

em: 24 de abril de 2014.

WIKIPEDIA. JQuery. Disponível em: <http://pt.wikipedia.org/wiki/JQuery>. Acesso

em: 21 de abril de 2014.

WOWSLIDER. Wowslider. Disponível em: <http://wowslider.com/pt-br/>. Acesso em:

16 de maio de 2014.

29

6. ANEXOS

6.1 ALVARA DE APROVAÇÃO DA MARCENARIA

Figura 19 – Autorização

30

6.2 BOLETIM DE CADASTRAMENTO DE ATIVIDADES

Figura 20 - Cadastro da Marcenaria

31

7. APÊNDICES

APÊNDICE A - Cronograma Prático

Atividades JAN FEV MAR ABR MAI

Elaboração do projeto

Entrega do projeto

Pesquisa bibliográfica

Coleta de Dados

Apresentação e discussão dos dados

Conclusão

APÊNDICE B – Cronograma Teórico

Atividades JUL AGO SET OUT NOV

Elaboração do projeto

Entrega do projeto

Pesquisa bibliográfica

Coleta de Dados

Apresentação e discussão dos dados

Conclusão

32

APÊNDICE C – Logotipo

Figura 21 - Logotipo

APÊNDICE D – Questionário

1. Quais cidades a empresa presta serviços?

A empresa atende toda demanda regional, abrangendo as cidades de Assis,

Palmital, Ibirarema, Salto Grande, Ourinhos e Marília.

2. Como a empresa começou?

A produção de móveis teve início na garagem da casa do Paulo

Merli, um dos sócios da empresa.

3. Quanto tempo a empresa tem de mercado?

Ao todo são vinte e quatro anos de existência da empresa, entretanto esta

começou a se destacar no seu ramo comercial em 2012.

4. Atualmente, a empresa possui quantos funcionários?

Ela possui em média dez funcionários.

5. Qual a rotina dos funcionários na Marcenaria?

33

Grande parte dos funcionários chega aproximadamente às 7h, passam o

cartão de ponto, limpam seu local de trabalho e cada um vai desempenhar sua

função.

6. Quais são as especialidades de fabricação da empresa?

Os móveis para cozinhas e gabinetes de banheiros são particularidades da

empresa.

7. Como era a divulgação da empresa até a criação do site?

A divulgação era feita através de panfletos, anúncios em listas regionais e

redes sociais.