Embed Size (px)
Citation preview
CENTRO DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA
ETEC DOUTOR DOMINGOS MINICUCCI FILHO
Técnico em Informática
Fiama Izabelly Francisco Guerra
Lucas Felipe Guilherme Gabriel
Uilma Sales Almeida
Vitor Emanuel Tomazela Sebastião
Desenvolvimento de um Website: Festival de Sabores
Botucatu-SP
2016
Fiama Izabelly Francisco Guerra
Lucas Felipe Guilherme Gabriel
Uilma Sales Almeida
Vitor Emanuel Tomazela Sebastião
Desenvolvimento de um Website: Festival de Sabores
Trabalho de Conclusão de Curso apresentado ao Curso Técnico em Informática da Etec Dr. Domingos Minicucci Filho orientado pelo Professor Arilson José de Oliveira Júnior como requisito parcial para obtenção do título de Técnico em Informática.
Botucatu-SP
2016
DEDICATÓRIA
A nossos professores do técnico que nos auxiliaram fornecendo um conhecimento para o término do curso. Aos coordenadores sempre a disposição e por apoiarem nossas ideias. Aos diretores por susterem nossos princípios e convicções. E também aos nossos colegas que nos ajudaram a engrandecer nosso projeto
EPÍGRAFE
“Ninguém pode ser escravo de sua identidade: quando surge uma possibilidade de
mudança é preciso mudar”
(Elliot Gould)
RESUMO
A crescente informatização das mais diversas atividades transforma a tecnologia da
informação em uma área cada vez mais relevante economicamente. A expansão
levou à especialização e, atualmente, é possível encontrar várias empresas do ramo
alimentício e que demandam novos métodos de divulgação. Em meio a tantos outros
sites que envolvem o ramo alimentício é difícil um que se destaque em tantas
novidades já que empresas de maior porte investem de forma intensa no marketing.
O projeto do Website tem como intuito executar a propaganda de forma mais eficaz,
criando um processo inovador no ramo alimentício, e incitando a ideia de votos com
a participação dos clientes na escolha da temática do cardápio, proporcionada pelo
restaurante. Esse projeto tem a função de mesclar essa ideia inovadora com a parte
tecnológica, permitindo ao cliente dispor da capacidade de votar e acompanhar a
votação de onde achar mais adequado, através de seu computador, Smartphone,
Tablets etc. Neste Website, também haverá o cardápio online, contendo todos os
países disponíveis e seus respectivos pratos, auxiliando na hora das votações e
permitindo acompanhar o andamento dos votos. Foram usadas ferramentas como
MySQL e Notepad++, respectivamente no banco de dados e depois no
desenvolvimento das páginas. A tela inicial foi a parte que mais exigiu dedicação já
que foi necessária formatação de imagens para que haja maior interação visual com
o usuário, tendo em vista que todas as páginas contêm um contexto em que a
perspectiva é envolver visualmente o mesmo. O projeto cumpriu o objetivo principal
de atrair clientes através da parte visual, e destacou-se por possibilitar do mesmo
poder escolher o tipo de culinária que mais o atrai através da página de votação e
todos os recursos disponibilizados, todos desenvolvidos com êxito.
Palavras-chave: Setor alimentício. Tecnologia da Informação. Website.
ABSTRACT
The growing computerization of the most diverse activities transforms information technology into an increasingly relevant area economically. The expansion has led to specialization and, currently, it is possible to find several food companies that demand new methods of disclosure. In the midst of so many other sites that involve the food industry it is difficult one that stands out in so many novelties since larger companies invest intensely in marketing. The website design aims to run advertising more effectively, creating an innovative process in the food industry, and inciting the idea of votes with the participation of customers in the choice of the menu theme, provided by the restaurant. This project has the function of merging this innovative idea with the technological part, allowing the client to have the ability to vote and follow the voting wherever they find the most appropriate, through their computer, Smartphone, Tablets, etc ... In this Website, too There will be the online menu, containing all available countries and their respective dishes, assisting at the time of voting and allowing to follow the progress of the votes. In this site were used tools like MySQL and Notepad ++, respectively in the database and then in the development of the page. The home page was the part that most required dedication since it was necessary to format images so that there is greater visual interaction with the user, considering that all the pages contain a context in which the perspective is to involve the same visually the same. The project has the main objective of attracting customers on the visual side, and stood out by allowing the same type of choice the type of cuisine that attracts most by the voting page and all the resources made available, all developed successfully. Key-words: Food Sector. Technology. Website.
LISTA DE ILUSTRAÇÕES
Figura 1: Página Inicial "Festival de Sabores" ...................................... 15
Figura 2: Sobre a Empresa ................................................................... 16
Figura 3: Cardápio ................................................................................ 17
Figura 4: Culinária Francesa ................................................................ 18
Figura 5: Área Do Cliente ..................................................................... 18
Figura 6: Página de Login ..................................................................... 19
Figura 7: Página de Cadastro ............................................................... 20
Figura 8: Página de Votação ................................................................ 20
Figura 8: Página de Votação .............................................................. 201
SUMÁRIO
1 - INTRODUÇÃO .................................................................................. 9
2 - DESENVOLVIMENTO ..................................................................... 10
2.1 HTML .......................................................................................... 10
2.2 PHP ............................................................................................. 10
2.3 Notepad ++ .................................................................................. 11
2.4 MySQL ........................................................................................ 11
2.4.1 MySQL Workbench ............................................................... 12
2.5 Bootstrap ..................................................................................... 13
2.6 Modos de utilização das ferramentas .......................................... 14
3 - RESULTADOS ................................................................................ 15
3.1 Página inicial ............................................................................... 15
4 - CONCLUSÃO.................................................................................. 22
9
1 - INTRODUÇÃO
As exigências da vida moderna e as longas jornadas de trabalho têm estimulado o
brasileiro a tornar-se um adepto da alimentação rápida. Segundo à Associação
Brasileira de Bares e Restaurantes (2016), cerca de um quarto da população, o
equivalente a 60 milhões de pessoas, realiza refeições fora de casa diariamente, o
que consome aproximadamente 30% da renda familiar destinada à alimentação.
Destacado por ser o mercado mais promissor no Brasil, o ramo de alimentação
cresce hoje três vezes mais que o PIB nacional, mesmo com um significativo
destaque na economia. Com expansão de 10% anual, o setor de bares e
restaurantes, gera cerca de 450 mil novas oportunidades de emprego.
Web sites, páginas em redes sociais, ou guias indicando os restaurantes de uma
determinada cidade ou região, vem se tornando cada vez mais comum graças ao
aumento do número de restaurantes existentes. Mas são limitados a apenas mostrar
aos visitantes sua localização, contato e cardápio. Em alguns casos específicos,
possibilitam aos clientes a opção de fazer reservas online, ou fazer divulgação de
eventos ou atrações especiais, mas nada inovador.
A tecnologia envolvendo o setor do ramo alimentício vem crescendo nos últimos
anos com aplicativos para fazer pedidos de seus pratos mais desejados no conforto
de sua casa sem aquela espera indesejada ao telefone. Mas ainda sim o convívio
entre pessoas as leva a ter um contato mais físico unindo-as em restaurantes ou
bares. Pensando nisso, vários locais disponibilizam tablets nas mesas para que o
cliente possa realizar seu pedido sem a espera de um garçom ou atendente e se
limitando apenas nisso.
Assim, este trabalho tem por objetivo desenvolver um website para trazer aos
clientes uma interação maior, onde participa diretamente na escolha dos cardápios,
e também trazendo novas experiências a modo de tirar a monotonia da dieta em que
está habituada.
10
2 - DESENVOLVIMENTO
2.1 HTML
HTML é a sigla de Hyper Text Markup Language, expressão inglesa que significa
“Linguagem de Marcação de Hypertexto”. Consiste em uma linguagem de marcação
utilizada para produção de páginas na web, que permite a criação de documentos
que podem ser lidos em praticamente qualquer tipo de computador e transmitidos
pela internet.
Os códigos (conhecidos como tags) servem para indicar a função de cada elemento
da página Web. As tags funcionam como comandos de formatação de textos,
formulários, links (ligações), imagens, tabelas, entre outros.
“As pessoas pensam que é muito difícil construir um website. Isto não é verdade! Qualquer
um pode aprender como construir um website. Através do HTML, CSS e PHP.”
(MAURICIO SAMY SILVA, 2016)
Para escrever documentos HTML não é necessário mais do que um editor de texto
simples e conhecimento dos códigos que compõem a linguagem.
É através do HTML que construímos todo o layout do website. Toda a parte de
estruturação, desde a inserção de título, corpo da página, até os ajustes de textos,
imagens (inserção e posicionamento) e links. Nós utilizamos por ser a linguagem
padrão da internet, e devido ao seu fácil entendimento, tanto das pessoas quanto
da máquina.
2.2 PHP
O PHP é focado para ser uma linguagem de script do lado do servidor, tem funções
como: coletar dados de formulários, gerar páginas com conteúdo dinâmico ou enviar
e receber cookies.
Essa linguagem pode ser utilizada em quase todos os sistemas operacionais, e
também é suportada pela maioria dos servidores web atuais. Também pode ser
configurada como módulo para a maioria dos servidores, e para os outros como GCI
comum.
PHP, que significa "PHP: Hypertext Preprocessor", é uma linguagem de programação de ampla utilização, interpretada, que é especialmente
11
interessante para desenvolvimento para a web e pode ser mesclada dentro do código HTML. A sintaxe da linguagem lembra C, Java e Perl, e é fácil de aprender. O objetivo principal da linguagem é permitir a desenvolvedores escreverem páginas que serão geradas dinamicamente rapidamente, mas você pode fazer muito mais do que isso com PHP. (DIOGO GALVÃO, 2016)
Com o PHP o usuário não estará limitado a gerar somente HTML, pois terá também
habilidades que incluem geração de imagens, arquivos PDF e animações FLASH.
Foi utilizada essa linguagem de programação por ser possível de inserção em
documentos HTML, para fazer a comunicação da página com o banco de dados,
possibilitando a criação/alteração de cadastro, o serviço de login e a função de
votação e visualização dos resultados.
2.3 Notepad ++
Notepad++ é um pequeno e rápido editor de texto de código aberto, para Windows,
que permite trabalhar com arquivos de textos simples e códigos-fonte de diversas
linguagens de programação.
O Notepad ++ é um editor de código fonte gratuito (como em "discurso livre" e também em "cerveja grátis") e substituição do Bloco de Notas que suporta vários idiomas. Em execução no ambiente MS Windows, o seu uso é regido pela Licença GPL. Baseado no poderoso componente de edição Scintilla, o Notepad ++ é escrito em C ++ e usa puro Win32 API e STL que garante uma maior velocidade de execução e menor tamanho do programa. (DON HO, 2016)
Pra quem programa, o Notepad++ tem suporte à difenciação de comandos através
de cores, um recurso muito usado em ambiente de programação (IDE). Ele já traz
embutido o reconhecimento para linguagens com C,C++,Java,HTML,XML,PHP,
JavaScript e várias outras. Mas, se a linguagem desejada não for suportada, é
possível personalizar o programa para reconhecê-lá, usando um “sistema de
definição de linguagem” integrado.
Foi utilizado devido ao fato de ser uns software leve, de fácil entendimento e
gratuito. Através dele elaboramos o código fonte dos documentos HTML e PHP.
2.4 MySQL
O MySQL é um sistema gerenciador de banco de dados relacional de código aberto
usado na maioria das aplicações gratuitas para gerir suas bases de dados. O serviço
12
utiliza a linguagem SQL (Structure Query Language – Linguagem de Consulta
Estruturada), que é a linguagem mais popular para inserir, acessar e gerenciar o
conteúdo armazenado num banco de dados.
Na criação de aplicações web abertas e gratuitas, o conjunto de aplicações mais
usado é o LAMP, um acrônimo para Linux, Apache, MySQL e Perl/PHP/Python.
Nesse conjunto de aplicações, inclui-se, respectivamente, um sistema operacional,
um servidor web, um sistema gerenciador de banco de dados e uma linguagem de
programação. Assim, o MySQL é um dos componentes centrais da maioria das
aplicações públicas da Internet.
O sistema foi desenvolvido pela empresa sueca MySQL AB e publicado,
originalmente, em maio de 1995. Após, a empresa foi comprada pela Sun
Microsystems e, em janeiro de 2010, integrou a transação bilionária da compra da
Sun pela Oracle Corporation. Atualmente, a Oracle, embora tenha mantido a versão
para a comunidade, tornou seu uso mais restrito e os desenvolvedores criaram,
então, o projeto MariaDB para continuar desenvolvendo o código da versão 5.1 do
MySQL, de forma totalmente aberta e gratuita. O MariaDB pretende manter
compatibilidade com as versões lançadas pela Oracle.
O MySQL é o banco de dados de código aberto mais popular do mundo. Com seu comprovado desempenho, confiabilidade e facilidade de uso, o MySQL se tornou a principal escolha de banco de dados para aplicativos baseados na web, usados por propriedades web de alto perfil, incluindo Facebook, Twitter, YouTube, Yahoo! e muitos mais. A Oracle impulsiona a inovação do MySQL, fornecendo novos recursos para fornecer energia à próxima geração de aplicações web, cloud, móveis e incorporadas. (MYSQL, 2016)
O MySQL entrou em nosso projeto por ser fácil de usar, confiável e pela sua alta
performance e isso tudo sem considerar o fato de ser o SGBD mais popular, o que
facilita na hora de realizar pesquisas no decorrer do projeto.
2.4.1 MySQL Workbench
MySQL Workbench é uma ferramenta visual unificada para arquitetos de banco de
dados, desenvolvedores e DBAs. MySQL Workbench fornece modelagem de dados,
desenvolvimento de SQL e ferramentas de administração abrangentes para
configuração do servidor, administração de usuários, backup e muito mais. MySQL
Workbench está disponível no Windows, Linux e Mac OS X.
13
2.5 Bootstrap
O Bootstrap é uma coleção de vários elementos e funções personalizáveis para
projetos da web, empacotados previamente em uma única ferramenta. Ao projetar
um site com o Bootstrap, os desenvolvedores podem escolher quais elementos
querem usar. E, o mais importante, podem ter a certeza de que os elementos
escolhidos não conflitarão entre si. É como um quebra-cabeças, exceto que cada
peça se encaixa perfeitamente com as outras, quaisquer que sejam as peças
escolhidas.
Originalmente criado por um designer e desenvolvedor no Twitter, o Bootstrap tornou-se um dos frameworks de front-end mais populares e projetos open source do mundo. O Bootstrap foi criado no Twitter em meados de 2010 por @mdo e @fat. Antes de ser um framework aberto, o Bootstrap era conhecido como Twitter Blueprint. A poucos meses de desenvolvimento, o Twitter realizou a sua primeira Hack Week e o projeto explodiu como desenvolvedores de todos os níveis de habilidade pulou sem qualquer orientação externa. Ele serviu como o guia de estilo para desenvolvimento de ferramentas internas na empresa por mais de um ano antes de seu lançamento público, e continua a fazê-lo hoje. Originalmente lançado na sexta-feira, 19 de agosto de 2011, nós já tínhamos mais de vinte lançamentos, incluindo duas grandes reescrevendo com v2 e v3. Com o Bootstrap 2, adicionamos funcionalidade responsiva a toda a estrutura como uma folha de estilo opcional. Com base no Bootstrap 3, reescrevemos a biblioteca mais uma vez para torná-la responsiva, por padrão, com uma primeira abordagem móvel.
(MARK OTTO, 2011)
Esses elementos personalizáveis contidos no Bootstrap são uma combinação de
HTML, CSS e JavaScript. Graças ao conceito do software livre, o Bootstrap é
aprimorado continuamente.
O Bootstrap foi utilizado para incrementar toda a parte visual do website. Seus
recursos são de fácil entendimento e auxilia na construção do corpo e layout da
página.
14
2.6 Modos de utilização das ferramentas
A primeira etapa aconteceu sobre a ferramenta Notepad++, que foi a própria criação
e modelagem do site através das linguagens HTML e PHP, isso foi usado para
introdução de textos, imagens, nas cores de fundo, entre outras coisas.
No site também tem a capacidade de login e cadastro, devido a ferramenta MySQL,
que permite a criação de um banco de dados, que se conecta ao site através da
linguagem PHP, que permite a manipulação dos campos no banco de dados, pelo
próprio site.
15
3 - RESULTADOS
3.1 Página inicial
Na página inicial, ilustrada na Figura 1, há contido um carrossel de imagens que irá
mostrar a temática mensal, Países disponíveis para votação e qual pais está
liderando a votação (Figura 1). Ainda na mesma página o usuário terá a
possibilidade de escolher entre saber um pouco mais sobre a empresa, ver os
cardápios para auxiliá-lo na hora da votação ou acessar a área destinada ao cliente
(também disponível através do botão login).
Figura 1: Página Inicial "Festival de Sabores"
Fonte: Website “Festival de sabores” (2016)
Ao clicar no primeiro botão, “Sobre a Empresa”, o cliente será levado até uma nova
página que terá mais informações sobre a empresa.
16
Figura 2: Sobre a Empresa
Fonte: Website “Festival de sabores”(2016)
Já no segundo botão cardápios, serão disponibilizados para os usuários os
possíveis países que serão a temática da empresa e alguns dos pratos de todos os
países, também servindo como um auxílio na hora da escolha.
17
Figura 3: Cardápio
Fonte: Website “Festival de sabores”(2016)
Nessa página será exibido o nome de todos os países e uma breve descrição de
todos seguidas de um botão que possibilitará uma transição de tela para uma tela
que contenham os pratos de seus respectivos países.
18
Figura 4: Culinária Francesa
Fonte: Website “Festival de sabores”(2016)
Por fim no terceiro botão, área do cliente, onde dará acesso aos dados do seu
cadastro, votação e a quem está vencendo a votação.
Figura 5: Área Do Cliente
Fonte: Website “Festival de sabores”(2016)
19
Também há a área de login e área de cadastro
Figura 6: Página de Login
Fonte: Website “Festival de sabores”(2016)
20
Figura 7: Página de Cadastro
Fonte:
Website “Festival de sabores”(2016)
Na pagina do cliente você tem acesso a três opções, inclusive a de votar no pais da
sua escolha, como visto na figura 9.
Figura 8: Página de Votação
Fonte: Website “Festival de sabores”(2016)
21
Como também a opção de acompanhar a votação em tempo real.
Figura 9: Exibição dos resultados das votações
Fonte: Website “Festival de sabores”(2016)
22
4 - CONCLUSÃO
O site teve sua conclusão, no âmbito de êxito, já que foi alcançado o resultado
desejado de aplicação de uma tela inicial com o componente visual atrativo, de fácil
entendimento por parte do usuário, contendo uma área sobre a empresa, outra área
para o cardápio de todos os possíveis países a serem oferecidos pela empresa,
login, a área do cliente, também contém a parte de votações, disponível para o
usuário através de seu cadastro e além de tudo isso o usuário tem de modo
acessível a possibilidade de acompanhar em tempo real as votações.
23
REFERENCIAS BIBLIOGRÁFICAS
BOOTSTRAP. Bootstrap. Disponível em: <getbootstrap.com/> Acesso em 14. Nov.
2016.
RODRIGUES, Joel. HTML. Disponível em: <http://www.devmedia.com.br/html-
basico-codigos-html/16596> Acesso em 16. Nov. 2016.
MYSQL. MySQL. Disponível em: <https://www.mysql.com/> Acesso em 16. Nov.
2016.
MYSQL. MySQL Workbench. Disponível em: <http://www.mysql.com/products/
workbench/> Acesso em 16. Nov. 2016.
NOTEPAD ++. Notepad++. Disponível em: <https://notepad-plus-plus.org/> Acesso
em 16. Nov. 2016.
PHP. Manual do PHP. Disponível em: <https://secure.php.net/manual/pt_BR/
index.php> Acesso em 17. Nov. 2016.
ABRASEL. Bares e restaurantes são a alavanca do Brasil empreendedor.
Disponível em: < http://www.abrasel.com.br/noticias/3164-07012015-bares-e-
restaurantes-sao-a-alavanca-do-brasil-empreendedor.html> Acesso em 27. Set.
2016.
SEBRAE. Bares e restaurantes: um setor em expansão. Disponível em: <
http://www.sebrae.com.br/sites/PortalSebrae/artigos/bares-e-restaurantes-um-setor-
em-expansao,1038d53342603410VgnVCM100000b272010aRCRD> Acesso em 27.
Set. 2016.
