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 - ETEC MAV Jr.
BRUNO LOPES DA SILVA
FLORIANO PERREIRA DA SILVA FILHO VINÍCIUS DI SANTI CASCALHES ARAGÃO
PALMITAL 2013
BRUNO LOPES DA SILVA
FLORIANO PERREIRA DA SILVA FILHO VINICIUS DI SANTI CASCALES ARAGÃO
WEBSITE - ETEC MAV Jr.
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.
Orientadores: Antonio Rafael Pepece Junior e Alessandro Aparecido Antônio.
PALMITAL 2013
CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA ETEC PROF. MÁRIO ANTÔNIO VERZA
BRUNO LOPES DA SILVA
FLORIANO PERREIRA DA SILVA FILHO VINÍCIUS DI SANTI CASCALHES ARAGÃO
WEBSITE – ETEC MAV Júnior.
APROVADO EM 21/06/2013.
BANCA EXAMINADORA:
ANTONIO RAFAEL PEPECE JUNIOR – ORIENTADOR
ALESSANDRO APARECIDO ANTÔNIO – ORIENTADOR
CLAUDIA PATRICIA CANDIA MACIEL – EXAMINADOR
Dedicamos este trabalho à escola por nos trazer esta maravilhosa oportunidade, aos nossos pais que nos motivaram a fazer este curso e aos professores que nos suportaram
e nos ensinaram por todo estes três módulos.
Agradecimentos
Agradecemos às manifestações de carinho e apreço, recebidas de todos os colegas da ETEC Prof. Mário Antônio Verza, os quais foram nossa maior fonte de luz inspiradora e de apoio para o sucesso deste trabalho.
A principio foi complicado, pois não tínhamos uma grande noção do que deveríamos fazer, mas com a Orientação certeira do Prof. Antônio Rafael Pepece Jr, e também na ajuda da programação do site pelo Prof. Alessandro Aparecido Antônio obtivemos grande sucesso.
Nosso muito obrigado também aos nossos orientadores, os professores Alessandro Aparecido Antônio e Antonio Rafael Pepece Junior, pelo auxílio seguro e oportuno durante todo o processo de orientação deste trabalho, pois aliado à sua experiência profissional e intelectual, todas as dicas e instruções foram imprescindíveis para o desenvolvimento e conclusão deste trabalho.
Também agradecemos aos nossos familiares por nos terem apoiado e entendido a nossa ausência, não só durante as aulas, mas especialmente durante o processo de desenvolvimento deste trabalho.
Enfim, a todos, o nosso grande muito obrigado!
"Unir-se é um bom começo, manter a união é um progresso, e trabalhar em conjunto é a vitória."
(Henry Ford)
ARAGÃO, Vinícius Di Santi Cascales. FILHO, Floriano Pereira da Silva. SILVA, Bruno Lopes. Trabalho de Conclusão de Curso no Ensino Técnico em Informática para Internet – WEBSITE – Empresa Jr. 2013. 31 f. Dissertação de Mestrado em Tecnologia no Centro Estadual de Educação Tecnológica Paula Souza, São Paulo, 2013.
RESUMO
O website foi criado de acordo com as necessidades requeridas pela escola ETEC Prof. Mário Antônio Verza, por intermédio dos gestores da instituição que solicitaram um banco de currículos dos discentes e egressos, para que assim as empresas de Palmital e região que demandam na busca por profissionais altamente qualificados, possam contratar alunos e ex-alunos para o mercado de trabalho, assim aumentando a visibilidade da escola e dos alunos que se destacam com várias habilidades e qualificações técnicas.
O banco de currículos foi projetado e desenvolvido para atender as necessidades das empresas que buscam por profissionais para suprir vagas e funções específicas no mercado, auxiliando na busca precisa dessas informações. Já o módulo de galeria de fotos foi desenvolvido para que a comunidade conheça melhor os eventos realizados pela Etec. E o terceiro módulo do website contém informações detalhadas de todos os segmentos das áreas de conhecimento oferecidas pela Etec Profº Mário Antônio Verza.
Palavras-chave: website, banco de currículos, Etec Prof. Mário Antônio Verza.
LISTA DE ABREVIATURAS E SIGLAS
ABNT Associação Brasileira de Normas Técnicas.
AJAX Asynchronous Javascript and XML.
CSS Cascading Style Sheets.
DER Diagrama Entidade Relacionamento.
ETEC Escola Técnica Estadual
IDE Integrated Development Environment HTML Hypertext Markup Language
Jquery Java script para Web Designers.
MER Modelo Entidade Relacionamento.
PHP Personal Home Page.
UE Unidade Escolar
Lista de Figuras
Figura 1. Home Page – Página Principal ... 20
Figura 2. Página Sobre ... 20
Figura 3. Página da Gestão ... 21
Figura 4. Página da Informática ... 21
Figura 5. Página Profissões de TI ... 22
Figura 6. Página Saúde ... 22
Figura 7. Tipos Sanguíneos ... 23
Figura 8. Cálculo de IMC ... 23
Figura 9. Prim. Socorros ... 24
Figura 10. Galeria de fotos ... 24
Figura 11. Fotos dos Jogos ... 25
Figura 12. Fotos Seminário Semana Paulo Freire & Trote ... 25
Figura 13. Fotos TCC 1º Semestre ... 26
Figura 14. Currículos ... 26
Figura 15. Contato ... 27
SUMÁRIO
1. INTRODUÇÃO ... 12
1.1 OBJETIVOS ... 12
1.1.1. OBJETIVOS ESPECÍFICOS ... 12
1.1.2. OBJETIVOS GERAIS ... 12
1.2. PROCEDIMENTOS METODOLÓGICOS ... 13
2. REFERENCIAL TEÓRICO ... 13
2.1. RAMO DE ATIVIDADE ... 13
2.1.1. SERVIÇOS PRESTADOS ... 14
2.2. TECNOLOGIAS ... 14
2.2.1. CSS ... 14
2.2.2. FERRAMENTA DREAMWEAVER ... 15
2.2.3. FERRAMENTA PHOTOSHOP ... 15
2.2.4. JQUERY ... 16
2.2.5. HTML ... 16
2.2.6. LINGUAGEM JAVA SCRIPT ... 17
2.2.7. LINGUAGEM PHP ... 17
3. ESTUDO DE CASO ... 19
3.1. PROJETO DO WEBSITE ETEC JUNIOR ... 19
3.1.1. CORES ... 19
3.1.1.1. LOGOTIPO ... 19
3.1.2. DESENVOLVIMENTO DO WEBSITE ETEC JUNIOR ... 19
3.1.2.1. PÁGINA PRINCIPAL – HOME PAGE ... 19
3.1.2.2. PÁGINAS INTERNAS DO WEBSITE ... 20
4. CONSIDERAÇÕES FINAIS ... 28
5. REFERÊNCIAS BIBLIOGRÁFICAS ... 29
6. APÊNDICE ... 30
APÊNDICE A – LOGOTIPO ... 30
APÊNDICE B – QUESTIONÁRIO – ENTREVISTA COM OS COORDENADORES DE CURSO ... 31
APÊNDICE C – CRONOGRAMA ... 32
12
1. INTRODUÇÃO
O website ETEC MAV Júnior foi planejado para organizar a gestão escolar da ETEC Prof. Mário Antônio Verza de Palmital-SP, contendo um banco de currículos dos discentes e egressos, um espaço reservado para que as empresas possam escolher os melhores alunos disponíveis na escola para estágios que se encaixam em determinadas funções específicas na empresa.
O website também é composto por uma galeria de fotos para que toda a comunidade possa contemplar os eventos que foram realizados e os iminentes e, além disso, dispõe-se de informações específicas sobre cada um dos seguimentos que são oferecidos pela ETEC Prof. Mário Antônio Verza.
O website fez uso de programas como Dreamweaver para a criação do website e montagem do layout. Photoshop para edição de fotos, criação do Logotipo, e escolha de cores utilizadas no site. E também linguagens como HTML para a montagem do site.
1.1 OBJETIVOS
Foi desenvolvido um website para a gestão de escola técnica, Prof.
Mário Antônio Verza.
1.1.1. OBJETIVOS ESPECÍFICOS
O website tem o objetivo de organizar a gestão escolar e os eventos da ETEC Prof. Mário Antônio Verza, possibilitando também que as empresas possam se cadastrar para divulgarem seus serviços e consultar os currículos dos alunos.
1.1.2. OBJETIVOS GERAIS
Foi criado um website funcional para a escola Prof. Mário Antônio Verza para divulgar o trabalho da UE e dos alunos.
13
1.2. PROCEDIMENTOS METODOLÓGICOS
Os métodos utilizados para a elaboração deste projeto foram caracterizados em várias etapas, que são elas: auxilio dos professores, informações retiradas da Internet, livros sobre as linguagens de programação utilizadas na elaboração do website e pesquisas realizadas por questionários, onde os coordenadores de cada área respondeu o que seria necessário ter no website. Quanto à coleta de dados, contamos com o levantamento que foi realizado em sites que nos ajudaram na criação de nosso projeto.
2. REFERENCIAL TEÓRICO
O projeto do website apresentado tem a função de permitir a interação entre as empresas e os alunos, por meio das consultas dos currículos. Assim os empresários terão conhecimento dos alunos qualificados da ETEC, contribuindo para o mercado de trabalho. Informações dos seguimentos presentes na ETEC Prof. Mário Antônio Verza estão disponíveis no website com o intuito de ajudar as pessoas a escolherem o seguimento preferível para estudar.
Fotos de viagens técnicas e eventos realizados pela escola serão disponibilizados na galeria de imagens.
Foram utilizadas várias tecnologias para a elaboração do website, como por exemplo: PHP (Personal Home Page), AJAX (Asynchronous Javascript and XML), HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) e Jquery (Java Script em galeria).
2.1. RAMO DA ATIVIDADE
A ETEC MAV Júnior foi desenvolvida para gerenciar a gestão escolar da ETEC Prof. Mário Antônio Verza de Palmital-SP.
14
O site contém alguns recursos essenciais, como uma galeria de imagens para que as pessoas possam ter conhecimento dos eventos realizados pela ETEC, havendo também um banco de currículos para que as empresas consigam visualizar currículos dos alunos que estão disponíveis para estágio ou uma vaga de emprego e, além desses recursos, há informações de cada seguimento disponível na ETEC prof. Mário Antônio Verza.
2.1.1. SERVIÇOS PRESTADOS
A organização da gestão escolar presenta na ETEC Prof. Mário Antônio Verza de Palmital-SP, além de possuir fotos de viagens técnicas e de eventos realizados na ETEC dentro da galeria de imagens, banco de currículos para que as empresas possam contratar vagas para estagiários, vagas para empregos e todos os possíveis prestados pelos diversos cursos da escola.
2.2. TECNOLOGIAS
Foram utilizados vários programas para o desenvolvimento do website ETEC MAV Júnior, como o Dreamweaver e o Photoshop da família Adobe e Corel Draw x6 da Microsoft.
Os programas Photoshop e Corel Draw x6 foram utilizados na edição de imagens em geral. O Dreamweaver foi utilizado para a elaboração do site (aplicação do HTML, CSS, AJAX, JQUERY, JAVA SCRIPT, etc.).
2.2.1. CSS
CSS (Cascading Style Sheets) é uma linguagem de estilo, ou seja, ela funciona como um “complemento” para outras linguagens como o HTML e seus derivados.
É usado para facilitar o trabalho do programador e também o download da página, onde reutiliza uma “tag” já criada para que não precise reescrevê-la novamente.
15
A linguagem funciona como uma folha separada ou embutida dentro de uma página principal, ela funciona basicamente em todas as IDE’s, até mesmo no famigerado bloco de notas, mas de uma forma mais complexa. Sua última versão é CSS3, onde sofreu algumas melhorias e avanços. A linguagem é disponibilizada em open source.
2.2.2. FERRAMENTA DREAMWEAVER
O programa Adobe Dreamweaver1 desenvolvida pela empresa Adobe, foi lançado em 2012 e é uma das melhores ferramentas de desenvolvimento de aplicativos e websites disponíveis no mercado, apresentada em vários idiomas, incluindo o português brasileiro.
A ferramenta abrange uma grande área de linguagens de programação que podem ser trabalhadas, dentre elas, o PHP, HTML, CSS, JAVASCRIPT e várias outras. Existem códigos e até mesmo websites pré-programados para facilitar a vida do desenvolvedor, ela também conta com a função de autopreenchimento de “tags”, independente da linguagem trabalhada. A ferramenta é “não livre” e se apresenta na versão “CS6”, e custa em torno de US $659,00.
2.2.3. FERRAMENTA PHOTOSHOP
O programa Adobe Photoshop2 desenvolvida pela empresa Adobe, foi lançada em 1990 e é uma das ferramentas mais usadas atualmente para a criação e edição de imagens em bitmap (imagens que apresenta vários pontos ao aumentar o tamanho da imagem), sendo bem completa e assim como o Dreamweaver, está disponível em várias línguas, incluindo o português brasileiro.
A ferramenta é bem completa, e de fácil compreensão, seja para usuários iniciantes ou avançados, tendo várias funcionalidades e ferramentas
1 Disponível em <https://creative.adobe.com/apps?trial=DRWV&promoid=JZXTK>. Acesso em: 10 abril 2013.
2 Disponível em <https://creative.adobe.com/apps?trial=DRWV&promoid=JZXTK>. Acesso em: 10 abril 2013.
16
específicas para cada detalhe que a imagem precise. Adobe Photoshop está na versão “CS6”, é “não livre” e custa em torno de US$ 699,00.
2.2.4. JQUERY
JQUERY é uma galeria de códigos de Javascript, que serve para simplificar a utilização do JavaScript, essa galeria é muito usada em criações complexas, como por exemplo, galerias de imagens rebuscadas, tendo efeitos bem parecidos com o Flash(ferramenta de criação de vídeos e imagens vetoriais de forma amadora ou profissional),ou até melhores, tudo depende da qualidade que o programador deseja e/ou consegue fazer.
A galeria é incrivelmente grande e exige habilidade do desenvolvedor para conseguir trabalhar com 100% da capacidade dessa incrível galeria, mas tendo ótimos resultados se bem usada. Ela está na versão 1.9, onde sofreu algumas mudanças na qualidade e também no uso, e ela é open source, podendo ser usada em várias IDE’s, como Dreamweaver e Netbeans.
2.2.5. HTML
HTML (Hyper Text Markup Language) é a principal linguagem de criação de websites que existe, ela funciona como uma linguagem “mãe” onde todas as outras linguagens se ligam e funciona em harmonia a maioria das vezes.
É nela onde a página cria forma, e as “tags” são lidas pelo navegador, assim fazendo o site criar a forma desejada. Pode ser usada em praticamente todas as IDE’s existentes, pois, ela é uma linguagem de fácil compreensão e também de criação.
Ela é uma linguagem em open source desenvolvida por Tim Berners- Lee, um físico britânico.
O XHTML (eXtensible Hypertext Markup Language) é uma reformulação da linguagem HTML, baseada em XML, combina as tags do HTML com regras da XML. Este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos. O XHTML foi criado com a intenção de melhorar
17
a acessibilidade, então consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada.
O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página, cria novas tags e modifica a função de outras. Seria mais semântica com menos código, mais interatividade sem a necessidade de instalação de plugins e perda de desempenho, é a criação de código, pronto para futuros dispositivos e que facilita a reutilização da informação de diversas formas.
2.2.6. LINGUAGEM JAVASCRIPT
JavaScript é a primeira e também a mais usada linguagem script que existe, ela funciona dentro da “head” do HTML, sendo indexada e funcionando a partir do mesmo, um pouco parecido com o CSS nesse aspecto, mas bem diferente no geral.
Ela pode ser usada como um “embelezamento” para o website, mas também pode ser usada para a programação lógica. Sua base, assim como várias outras linguagens de programação lógica, veio do C, tendo várias “tags”
como “if”, ”while”, ”switch”, dentre outras.
É uma linguagem muito completa e bem aceita em todos os lugares. É compatível com várias IDE’s disponíveis no mercado e sua ultima versão é
“1.8.5”, além de ser open source.
2.2.7. LINGUAGEM PHP
PHP (Personal Home Page) é uma linguagem de programação estreitamente lógica, usada principalmente para fazer a ligação direta entre o HTML e a base de dados do servidor, além, de ser usada especificamente para a parte de programação que o website necessita. Para funcionar adequadamente é necessário ter um servidor ou simulador do mesmo, pois os navegadores são incapazes de lerem o PHP. É uma linguagem bem dinâmica e talvez a mais fácil de compreender de sua categoria.
18 Funciona em IDE’s que tenham suporte para ela, como por exemplo, Dreamweaver e NetBeans, está na versão 5.4.15 e como a maioria de sua categoria, também é uma linguagem open source.
A linguagem tem uma segurança muito grande, pois os códigos que são escritos são guardados em um banco de dados, então não é possível de ser visualizado sem possuir o código.
19
3. ESTUDO DE CASO
Foi realizado um estudo de caso com os coordenadores de cada área do curso para discutir o que seria necessário em cada área disponível no website ETECMAV Jr.
3.1. PROJETO DO WEBSITE ETEC JUNIOR
No website terá duas tabelas distintas, cada um com sua função, a primeiro será usada para a disponibilização das galerias de imagens do website, já a segunda, irá ser usado para o cadastramento de currículos.
3.1.1. CORES
No website ETECMAV Jr. foi utilizado às cores: preto, vermelho, cinza e bege.
3.1.2. DESENVOLVIMENTO DO WEBSITE ETEC JUNIOR
O desenvolvimento do website foi realizado por um grupo de alunos onde, cada um dos integrantes priorizou uma parte do TCC.
3.1.2.1. PÁGINA PRINCIPAIL – HOME PAGE
Na Figura 1 apresenta a página inicial do website com os links para as subpáginas e as novidades realizadas na escola.
20
Figura 1. Home Page - Página Principal
3.1.2.2. PÁGINAS INTERNAS DO WEBSITE
A Figura 2 representa a página na qual disponibiliza informações sobre o website ETECMAV Jr.
Figura 2. Página Sobre.
21
Na Figura 3 apresenta a aba segmentos, na parte da Gestão está disponíveis informações sobre a área da gestão, disponível na escola.
Figura 3. Página da Gestão.
Está representada na Figura 4 a aba segmentos, que na parte da Informática estão disponíveis informações sobre o curso de Informática para internet, disponível na escola.
Figura 4. Página da Informática.
22
Na Figura 5 há a aba segmentos, que na parte da Informática e no submenu profissões de TI está disponíveis informações sobre as áreas de trabalho que um formando do curso Informática para internet pode realizar.
Figura 5. Página Profissões de TI.
A Figura 6 mostra a aba Saúde, que estão disponíveis links que levarão para as páginas dos cursos Enfermagem e Agente Comunitário.
Figura 6. Página Saúde
23
A Figura 7 está representando o submenu Tipos sanguíneos na aba Saúde, no qual está disponível informações sobre os tipos de sangue, esclarecendo as dúvidas.
Figura 7. Tipos Sanguíneos
A Figura 8 demonstra o submenu Cálculo de IMC localizado na aba Saúde, havendo informações sobre o cálculo de índice de massa corporal, possibilitando também o cálculo do IMC da pessoa que visitar a página.
Figura 8. Cálculo de IMC
24
Está representado na Figura 9 o submenu Primeiros Socorros, que há dicas de primeiros socorros para as pessoas que não possuem conhecimento de como agir em uma situação desesperada.
Figura 9. Prim. Socorros
Na Figura 10 há a representação da aba Galeria de fotos, na qual há álbuns de fotos dos eventos realizados na escola, jogos, apresentações, etc.
25
Figura 10. Galeria de fotos
A Figura 11 está apresentando o link Fotos dos Jogos, no qual há fotos que foram tiradas durante os jogos realizados pela ETEC.
Figura 11. Fotos dos Jogos
Na Figura 12 está representando a página do link Fotos Seminário Semana Paulo Freire & Trote, no qual está disponível fotos da apresentação e trote realizados pela turma do Ensino Médio.
26
Figura 12. Fotos Seminário Semana Paulo Freire & Trote
A Figura 13 demonstra o link Fotos TCC 1º Semestre, no qual há fotos tiradas durante as apresentações de TCC realizadas na ETEC.
Figura 13. Fotos TCC 1º Semestre
27
Na Figura 14, há a demonstração da aba Currículos, na qual estão disponíveis currículos dos alunos da ETEC, para que as empresas possam visualizar os alunos mais adequados para uma vaga de estágio ou emprego.
Figura 14. Currículos
A Figura 15 mostra a aba Contato que há um formulário no qual possibilitará que alunos da ETEC possam cadastrar seus currículos.
Figura 15. Contato
28
4. CONSIDERAÇÕES FINAIS
O website pretende mostrar de forma fácil os projetos e atividades desenvolvidas pelos alunos dos cursos técnicos e do ensino médio para esclarecer as dúvidas de quem pretende cursar um dos cursos oferecidos pela ETEC Prof. Mário Antônio Verza de Palmital-SP áreas da saúde, gestão, informação e comunicação.
Também apresenta o banco de currículos, onde alunos poderão cadastrar seus currículos para eventuais consultas para a contratação dos mesmos por empresas. Terá também, a galeria de imagens, onde iremos exibir as imagens de viagens técnicas, eventos e produções que a escola irá produzir, ou que já foram realizados. Podendo assim, incentivar a comunidade a ingressar-se em um dos cursos oferecidos pela UE. Além disso, terá várias informações da própria escola, e dicas de como se ingressar nos Vestibulinhos e informações gerais sobre os principais assuntos que envolvam a escola.
29
5. REFÊRENCIAS
Machado, F. Projeto de Banco de Dados - Uma Visão Prática. São Paulo: Érica, 2012.
Manzano, J. A. SQL SERVER 2005. São Paulo: Érica, 2010.
Oliveiro, C. A. HTML 4.0 Conceitos e Aplicações. São Paulo: Érica, 2012.
Disponível em: <http://tableless.com.br/>. Acesso em: 10 abril 2013.
Disponível em:<http://www.w3schools.com/>. Acesso em: 10 abril 2013.
Disponível em:<http://www.adobe.com/br/>. Acesso em: 10 abril 2013.
Disponível em:<https://creative.adobe.com/apps?trial=DRWV&promoid=JZXTK>.
Acesso em: 10 abril 2013.
Disponível em:<http://www.baixaki.com.br/download/brmodelo.htm>. Acesso em: 10 abril 2013.
30
6. APÊNDICES
APÊNDICE A – LOGOTIPO
31
APÊNDICE B – QUESTIONÁRIO – ENTREVISTA COM OS
COORDENADORES DE CURSO.
32 APÊNDICE C – CRONOGRAMA
