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

WEBSITE – MARCENARIA MERLI MÓVEIS

KARIN APARECIDA DOMINGOS VIEIRA NICOLY MARIA PERES MONTEIRO PABLO HENRIQUE MACHADO NEGRERO

WILLIAM HONÓRIO JUNIOR

PALMITAL 2014

(2)

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

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.”¹

(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 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!”² (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.” ³ (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

(23)

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.