Centro Estadual de Educação Tecnológica Paula Souza GOVERNO DO ESTADO DE SÃO PAULO ETEC JORGE STREET

Transcrição

1 Centro Estadual de Educação Tecnológica Paula Souza GOVERNO DO ESTADO DE SÃO PAULO ETEC JORGE STREET VINICIUS ANTONIO LESSA SÁBIO VALDIR SANTOS MAYARA VIANNA MARCOS ANTONIO GUILHERME BALDIN INFOTEC SÃO CAETANO DO SUL 2014

2 VINICIUS ANTONIO LESSA SÁBIO VALDIR SANTOS MAYARA VIANA MARCOS ANTONIO GUILHERME BALDIN INFOTEC Trabalho de Conclusão de Curso apresentada à ETEC Jorge Street como parte dos requisitos para a obtenção do Título de Técnico em Informática. Orientadora: Prof.ª Suely Sousa SÃO CAETANO DO SUL 2014

3 FICHA CATALOGRÁFICA GARCIA, Marcos Antonio Alencar Informática: aplicativo InfoTec / Guilherme Badin Araujo; Mayara Vianna Teixeira; Marcos Antonio Alencar Garcia; Valdir dos Santos Junior; Vinicius Antonio Lessa Sábio CD-ROM: (46 p.) Monografia (Técnico em Informática) Escola Técnica Estadual Jorge Street. ETEC, Orientador(A): Prof. Suely dos Santos Sousa. 1.Carreira. 2. Técnico. 3. Aplicativo. I. Título. São Caetano do Sul / SP

4 VINICIUS ANTONIO LESSA SÁBIO VALDIR SANTOS MAYARA VIANA MARCOS ANTONIO GUILHERME BALDIN INFOTEC Aprovação em: dd mm ano Trabalho de Conclusão de Curso apresentada na ETEC Jorge Street como requisito para o término do terceiro módulo do curso técnico de informática Profª Orientador Profº Avaliador Profº Avaliador

5 DEDICATÓRIA Dedicamos este trabalho a todos que apoiaram e possibilitaram a conclusão do mesmo.

6 AGRADECIMENTOS Agradecemos primeiramente à Professora Suely, por nos ensinar, incentivar e apoiar em todos os aspectos. Queremos agradecer também aos nossos familiares por todo amor e compreensão dados. A todo o corpo docente e direção da ETEC Jorge Street pela conclusão deste curso.

7 RESUMO Atualmente os jovens não obtém sucesso em encontrar formas para solucionar um grande problema, como, a escolha de sua carreira profissional, dúvidas frequentes sobre os cursos, o que realmente é executado pelo profissional e habilitações curriculares. Devido a isso, foi criado o InfoTec; um aplicativo utilizado no auxílio da escolha de cursos técnicos, informações e instituições, explorando o conhecimento daqueles que buscam o futuro como técnicos. Com o pouco investimento na área, os estudantes com idade entre 16 aos 18 anos, perdem-se na escolha e entrada no mundo universitário. Ao fazer o download do App, o usuário tem acesso a um conteúdo educacional de informações sobre as formações técnicas oferecidas na instituição ETEC Jorge Street; fazendo apenas o cadastro e atualizando-o sempre que possível, para que haja uma melhor busca e satisfação da mesma, tornando assim, mais fácil e ampla a visão profissional da área técnica e seus benefícios. Palavras-chave: Carreira, técnico, aplicativo.

8 Abstract Young people currently not succeed in finding ways to solve a big problem, as the choice of his professional career, frequently asked questions about the courses, which is actually run by the professional qualifications and curriculum. Because of this, the Infotec was created; an application used to aid the choice of technical, information and institutions courses, exploiting the knowledge of those who seek the future as technicians. With little investment in the area, students aged 16 to 18 years, will be lost in selecting and entering the academic world. By downloading the App, the user has access to an educational content about the technical training offered at the institution ETEC Jorge Street; making only registration and updating it whenever possible, so there is a better looking and satisfaction of the same, thus making it easier and wide vision of professional technical area and its benefits. Key words : career, technical, application.

9 LISTA DE FIGURAS Figura 1: Mapa do aplicativo Figura 2: Mapa do site Figura 3: Página "Home" do site Figura 4: Página "Quem Somos" do site Figura 5: Página "Ajuda" do site Figura 6: Página "Download" do site Figura 7: Página Cadastro do site Figura 8: Página "Login" do site Figura 9: Logotipo Figura 10: Página "Home" do aplicativo Figura 11: Página "Ajuda" do aplicativo Figura 12: Página "Home" do aplicativo Figura 13: Página "Informática" do aplicativo Figura 14: Página "Informática" do aplicativo Figura 15: Página "Cursos" do aplicativo Figura 16: Página "História" do aplicativo Figura 17: Página "Localização" do aplicativo Figura 18: Diagrama de caso de uso Figura 19: Tabela Usuario do BD Figura 20: Dois cadastros na tabela Figura 21: Código criação do BD Figura 22: Pesquisa de campo... 46

10 Lista de Gráficos Gráfico 1 Você usaria este aplicativo... Erro! Indicador não definido.7 Gráfico 2 Como você obteve informações desses cursoserro! Indicador não definido.8 Gráfico 3 Você teve dificuldades em achar uma área que se identificaerro! Indicador não de Gráfico 4 Por que você teve dificuldades em achar essa área...20 Gráfico 5 Você considera mais fácil a escolha de um curso através de um aplicativo...21

11 Sumário 1. INTRODUÇÃO Problemática Objetivos Geral Específico Metodologia Resultado esperado ORGANIZAÇÃO Contextos do negócio Perfis da empresa Funções principais Restrições técnicas e administrativas (Ver até que ponto a ETEC permite a publicação de dados para a preparação do texto no TCC) ASPECTOS ESTRATÉGICOS Riscos do projeto Logotipo Slogan BRIEFING Públicos alvo Resultados Gráficos das pesquisas SITE E SOFTWARE Objetivos do Software Objetivo do Site Conteúdo e material disponível Mapas do site e do software/organograma Elementos das páginas DEFINIÇÃO DO CONTEÚDO Logotipo Menu de navegação INTERFACE USABILIDADE Passo a passo de navegação PROGRAMAÇÃO... 38

12 9.1 Diagrama de caso de uso Linguagens utilizadas Ferramentas Utilizadas BANCO DE DADOS Banco de Dados e Tabelas CONCLUSÃO Anexos... 46

13 13 1. INTRODUÇÃO 1.1. Problemática Os alunos que estão em fase de escolher sua carreira profissional, precisam de informações sobre cursos técnicos de determinadas áreas, no entanto não têm o conhecimento do que realmente o profissional executa em suas atividades, neste contexto, percebe-se a necessidade de desenvolver um aplicativo móvel com o intuito de atender essa demanda de mercado, onde não existem muitas ferramentas adequadas para este fim. Portanto, a finalidade deste aplicativo é auxiliar o aluno em relação às suas dúvidas de qual curso escolher Objetivos O objetivo do trabalho é orientar e auxiliar os alunos a tomar a difícil decisão de qual carreira seguir, mas pela falta de informação, a maior parte acaba seguindo uma carreira errada. E com o tempo, ao aplicativo ser desenvolvido, serão colocados novos conteúdos, com o intuito de não apenas ajudá-los, mas também incentivá-los Geral Desenvolver um aplicativo que auxilia na escolha de um curso técnico, trazendo informação relevantes sobre a área técnica escolhida Específico Mostrar informações a todos sobre qual área específica seguir Metodologia Foi realizado pesquisas de embasamento teórico em livros, revistas e site. Também foi realizado pesquisa de campo e o uso de ferramentas Resultado esperado Auxiliar futuros profissionais na escolha da carreira com a ajuda do aplicativo para então o almejado reconhecimento das pessoas que utilizarem este programa; a experiência do trabalho em grupo e a oportunidade de conhecer uma grande empresa ao ser apresentado o projeto.

14 14 2. ORGANIZAÇÃO 2.1 Contextos do negócio. O projeto tem como objetivo, o auxílio de uma pessoa durante a dúvida, fazendo com que consiga chegar a sua própria conclusão do que se encaixa a ele. O que pode ocorrer, é que o usuário do projeto, irá abrir o aplicativo em seu celular e buscar o curso desejado. Assim, encontrando de uma maneira rápida e eficaz. 2.2 Perfis da empresa. A empresa atua na área de TI, desenvolvendo software que auxilie o usuário a escolher em qual área seguir. A empresa busca sempre ajudar ao máximo nossos clientes, voltada para a escolha de um lugar certo para a pessoa. Conteúdo é o que nós teremos de sobra em nossos aplicativos e ajuda é que pretendemos ter sem falta. 2.3 Funções principais. Projetar programas para o auxílio das pessoas. Desenvolvendo uma melhora de vida profissional. 2.4 Restrições técnicas e administrativas Houve restrição da parte da instituição de ensino de fazer um trabalho com um tema que agradasse a todos os integrantes do grupo.

15 15 3. ASPECTOS ESTRATÉGICOS 3.1 Riscos do projeto. Por ser um produto novo no mercado, pode não haver o reconhecimento esperado e também a possibilidade de novos produtos semelhantes sejam lançados, incluindo um conteúdo de maior relevância, ou apenas atualizações do mesmo. Atualizações estarão disponíveis aos clientes, onde haverá o melhoramento para busca de informações. 3.2 Logotipo. No logotipo, foi utilizada a imagem do planeta Terra e o nome do produto, onde a cor escolhida foi o verde; cor essa que representa renovação e conhecimento, principais conceitos requeridos na marca. 3.3 Slogan. O slogan INFOTEC; UM UNIVERSO TÉCNICO NA PALMA DA MÃO é um trocadilho com o logotipo, por universo ser referente ao planeta Terra e, técnico a informação principal. Pessoas que procuram informações sobre cursos técnicos, qualificações e locais.

16 16 4. BRIEFING 4.1 Públicos alvo. Com grande satisfação em atender a todos com êxito a sociedade adulta e adolescentes que buscam informações de cursos técnicos e faculdades disponíveis, propondo grandes tecnologias e fácil acessibilidade a todos. O sucesso de conseguir as informações nos torna fortes e confiáveis perante a tecnologia. Para que possamos passar confiança à sociedade devemos nos infiltrar para mostrar nosso trabalho por meio de entrevistas, pesquisas, onde nos de uma base para que possamos qualificar nosso sistema. Por mais a tantas pesquisas realizadas, algumas entrevistas nos abriram mentes para aprimorar novas tecnologias segue abaixo alguns entrevistados nos últimos dias que usaram o nosso sistema e deram opinião referente a melhorias do nosso sistema.

17 Resultados Gráficos das pesquisas. Uso do aplicativo SIM NÃO TALVEZ S I M N Ã O T A L V E Z Gráfico 1: Uso do aplicativo Como retratado no gráfico, o uso do aplicativo atualmente nos tem mostrando grande eficiência perante a sociedade em relação ao uso do aplicativo.

18 Informações desse curso Amigos Familias Internet Palestras A M I G O S F A M I L I A I N T E R N E T P A L E S T R A S Gráfico 1: Informações desse curso Como retratado no gráfico, o percentual de buscas pelo aplicativo se destacou pelo uso da internet devido a grande tecnologia aplicada mundialmente.

19 Dificuldades em achar uma área que se identifica SIM NÃO S I M N Ã O Gráfico 3:Dificuldades em achar uma área que se identifica Como retratado no gráfico, o baixo índice de dificuldade em buscar uma área profissional mostra a importância do aplicativo e da tecnologia.

20 Dificuldades em achar essa área Falta de Informação Falta de pesquisa Falta de experiência Falta de Incentivo Desinteresse Gráfico 4 Dificuldades em achar essa área Como retratado no gráfico, problemas como falta de informação e desinteresse nos impõem um grande desafio em mostrar o interesse e a importância do aplicativo e dos cursos disponíveis.

21 Escolha de um curso através de um aplicativo SIM NÃO S I M N Ã O Gráfico 5: Escolha de um curso através de um aplicativo Como retratado no gráfico, o uso do aplicativo aumentou devido ao uso do smartphone para facilitar a busca e o interesse para todos.

22 22 5. SITE E SOFTWARE 5.1. Objetivos do Software O software tem como objetivo o auxílio dos estudantes que querem escolher certo curso a fazer e universidade com os melhores índices do mesmo. O software transpõe informações conclusivas de como funciona cada curso em cada universidade, assim, facilitando a escolha do usuário. Foi escolhido um design de fácil compreensão ao usuário, fazendo com o que haja uma melhor interação com o estudante Objetivo do Site O site tem como objetivo manter o usuário informado de novidades a respeito do software, informar a respeito da empresa e dos integrantes, e claro, disponibilizar o botão para download do aplicativo para celular. 5.2 Conteúdo e material disponível O material disponibilizado fornece o download do Ap. Sendo disponível apenas para sistema android. 5.3 Mapas do site e do software/organograma Figura 1: Mapa do aplicativo

23 23 Figura 2: Mapa do site 5.4 Elementos das páginas Figura 3: Página "Home" do site

24 24 Figura 4: Página "Quem Somos" do site Figura 5: Página "Ajuda" do site

25 25 Figura 6: Página "Download" do site Figura 7: Página Cadastro do site

26 Figura 8: Página "Login" do site 26

27 27 6. DEFINIÇÃO DO CONTEÚDO 6.1 Logotipo Figura 9: Logotipo A imagem do planeta Terra no logotipo se refere ao conhecimento e atualidades. Isso significa que a empresa oferece um aplicativo de conteúdos atualizados sobre cursos técnicos, por exemplo. O nome INFOTEC é a junção de duas palavras, INFO de Informação e TEC de técnico. Sobre isso, entendese que daremos informações sobre cursos técnicos. O formato do logotipo foi pensado exatamente por ser algo marcante quando olhamos e nos lembramos da empresa. 6.2 Menu de navegação. No site da empresa serão apresentadas quatro abas para clique: Home; Quem somos; Ajuda e Download. Home: Apresenta os principais conteúdos do site. Por exemplo, notícias e vídeos. Essa tela também é o início, quando acessamos o site. Quem Somos: É a aba que, quando pressionado, mostra as informações da empresa e do software fornecido por ela. Por exemplo, como surgiu e como o programa foi feito.

28 28 Ajuda: para os clientes que tem dificuldades ou são novos em manusear o aplicativo, existe essa página para guia-los. Há vídeos e textos que explicam passo a passo como usá-lo da maneira correta. Download: Por último, existe o botão Download, que ao ser pressionado é direcionado para a página de download do programa.

29 29

30 7. INTERFACE Com uma interface de fácil compreensão, tanto no site, como no software, visamos transmitir confiança e, principalmente, seriedade. 30

31 31 8. USABILIDADE 8.1 Passo a passo de navegação Figura 10: Página "Home" do aplicativo Tela Inicial: A tela que é aberta após o início do aplicativo. Nela há o logotipo do aplicativo e dois botões, Pesquisar e Ajuda.

32 32 Figura 11: Página "Ajuda" do aplicativo Ajuda: A parte que mostra e ensina o usuário com dúvidas sobre o que um curso técnico e o app oferece.

33 33 Figura 12: Página "Home" do aplicativo Menu: Essa é a tela do aplicativo que divide exatamente as partes navegáveis. Há o botão Cursos, Localização e História.

34 34 Figura 13: Página "Informática" do aplicativo Figura 14: Página "Informática" do aplicativo Curso Informática: Essa é a parte em que o app apresenta o real conteúdo. Nessa parte é ilustrado, de forma resumida e de fácil entendimento, informações sobre o curso, no caso informática. Assim há para todos os cursos da tal instituição de ensino técnico.

35 35 Figura 15: Página "Cursos" do aplicativo Cursos: A parte do App que separa o conteúdo de todos os cursos.

36 36 Figura 16: Página "História" do aplicativo História: Um complementar, mostrando a história da escola, a História é uma das telas disponíveis no menu.

37 37 Figura 17: Página "Localização" do aplicativo Localização: A tela em que nos mostra a localização da instituição de ensino e contatos. Também disponível em Menu.

38 38 9. PROGRAMAÇÃO 9.1 Diagrama de caso de uso Figura 18: Diagrama de caso de uso

39 Linguagens utilizadas HTML - abreviação para a expressão inglesa HyperText Markup Language(Linguagem de Marcação de Hipertexto), é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os padrões HyTime(padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo) e SGML(padrão de formatação de textos). Bibliografia: CSS - abreviação para a expressão inglesa Cascading Style Sheets(Linguagem de Folhdas 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. Bibliografia: JavaScript - é uma linguagem de programação interpretada. Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido. Bibliografia:

40 Ferramentas Utilizadas Net Beans IDE - é um ambiente de desenvolvimento integrado (IDE) gratuito e de código aberto para desenvolvedores de software nas linguagens Java, C, C++, PHP, Groovy, Ruby, entre outras. O IDE é executado em muitas plataformas, como Windows, Linux, Solaris e MacOS. O NetBeans IDE oferece aos desenvolvedores ferramentas necessárias para criar aplicativos profissionais de desktop, empresariais, Web e móveis multiplataformas. Bibliografia: Adobe Photoshop - é um software caracterizado como editor de imagens bidimensionais do tipo raster (possuindo ainda algumas capacidades de edição típicas dos editores vectoriais) desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem profissionais, assim como o programa de facto para edição profissional de imagens digitais e trabalhos de pré-impressão. Bibliografia: Inkscape - é um software livre para editoração eletrônica (Portugal: edição electrónica) de imagens e documentos vetoriais, com base numa versão mais avançada do antigo Sodipodi no qual teve origem. Trata-se assim de um fork considerado de sucesso. Utiliza o método vetorial, ou seja, gera imagens a partir de um caminho de pontos definindo suas coordenadas, de forma transparente ao usuário. Bibliografia: Intel XDK - é um software cuja proposta é facilitar a criação de aplicativos em HTML 5 (requer Java para ser instalado), oferecendo uma ferramenta simples para ajudar os desenvolvedores em sua árdua tarefa. Bibliografia:

41 BANCO DE DADOS 10.1 Banco de Dados e Tabelas O DataBase of Student ou Banco de Dados do Estudante é uma das ferramentas que funcionará dentro do servidor. O acesso a esse BD pelo usuário será feito pelo Site. A seguir temos o script da programação da tabela do BD em MYSQL usado no projeto, com a ferramenta PHPMyAdmin. Figura 19: Tabela Usuario do BD Na imagem a seguir temos dois cadastros já realizados no site, pronto para fazer o login. Figura 20: Dois cadastros na tabela

42 42 Figura 21: Código criação do BD Abaixo há o script de criação de banco de dados e tabela escrita por inteiro. -- phpmyadmin SQL Dump -- version Host: Generation Time: 12-Nov-2014 às 03:42 -- Versão do servidor: PHP Version: SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 */;

43 43 /*!40101 SET */; /*!40101 SET */; /*!40101 SET NAMES utf8 */; CREATE SCHEMA usuario; USE usuario; Database: `usuario` Estrutura da tabela `usuario` -- CREATE TABLE IF NOT EXISTS `usuario` ( `Usuario_ID` int(11) NOT NULL AUTO_INCREMENT, `nome` varchar(60) NOT NULL, ` ` varchar(60) NOT NULL, `Usuario` varchar(20) NOT NULL, `senha` varchar(20) NOT NULL, PRIMARY KEY (`Usuario_ID`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; --

44 44 -- Extraindo dados da tabela `usuario` -- INSERT INTO `usuario` (`Usuario_ID`, `nome`, ` `, `Usuario`, `senha`) VALUES (1, 'Marcos', 'Quinhos', 'Ola'), (2, 'Cafa', 'Cafinha', '1231'); /*!40101 SET */; /*!40101 SET */; /*!40101 SET */;

45 45 CONCLUSÃO Após a conclusão do projeto, foi testada com várias pessoas a utilização do aplicativo. O resultado foi que a maioria aprovou, e conseguiu compreender as explicações sem nenhum problema, além de vário clientes elogiaram o aplicativo. O trabalho teve bons resultados nos elogios do designer, no diferencial de propósito e na finalidade do projeto. Fazer um TCC pode parecer algo difícil, mas a realização dele depende do grupo. Concluímos que por meio deste aplicativo que vários estudantes terão disernimento dos cursos e saberão a melhor forma para que possam encontrar o trabalho ou área desejada.

46 46 Anexos Figura 22: Pesquisa de campo Pesquisa feita para o aprimoramento do aplicativo.