Upload
cristina-manfio
View
72
Download
0
Embed Size (px)
Citation preview
SISTEMA DE ENSINO PRESENCIAL CONECTADOANÁLISE E DESENVOLVIMENTO DE SISTEMAS
ANGELINA MARIA WIECHOR POLON
PRÉ-PROJETO
Frederico Westphalen2012
ANGELINA MARIA WIECHOREK POLON
PRÉ-PROJETO
Projeto de Estágio apresentado à Unopar – Universidade do Norte do Paraná, com requisito parcial para a obtenção do titulo de tecnologia em Análises e Desenvolvimento de Sistemas.
Professor Supervisor.Tutor Orientador.
Frederico Westphalen
2012
LISTA DE FIGURAS
Figura 1- Diagrama de caso de uso..................................................16
Figura 2- Diagrama de classe...........................................................18
Figura 3- Protótipo Home Page........................................................19
Figura 4- Protótipo Sobre Nós..........................................................20
Figura 5- Protótipo Contatos.............................................................20
Figura 6- Protótipos Nossas Fotos...................................................21
Figura 7- Protótipos Promoções.......................................................21
Figura 8- Protótipo Cronograma.......................................................22
4
SUMÁRIO
1- INTRODUÇÃO..............................................................................4
2- JUSTIFICATIVA............................................................................6
3- OBJETIVOS..................................................................................8
3.1- OBJETIVO GERAL.................................................................8
3.2- OBJETIVO ESPECIFICO.......................................................8
4- TECNOLOGIA...............................................................................9
4.1- ADOBE DREAMWEAVER.....................................................9
4.1.1- Versões.............................................................................10
4.2- ADOBE FIREWORKS..........................................................11
5- LEVANTAMENTO DE REQUISITOS.........................................13
5.1- DESCRIÇÕES DO SISTEMA PROPOSTO.........................14
6- DIAGRAMA DE CASO DE USO................................................14
7- DIAGRAMA DE CLASSE..........................................................16
8- PROTOTIPAÇÃO DAS TELAS.................................................17
9- CRONOGRAMA..........................................................................20
10-CONCLUSÃO.............................................................................21
11-REFERENCIAS..........................................................................22
5
1- INTRODUÇÃO
O pré-projeto- TCC tem como objetivo descrever as atividades
desenvolvidas no estágio, visando inserir o aluno dentro de uma empresa que já
trabalha com analise ou desenvolvimento de sistemas para que o mesmo vá se
acostumando e conhecendo o dia-a-dia de um analista ou programador.
O tema deste estágio foi buscar entender uma outra parte da
programação onde é também de extrema importância. A programação Web tem uma
ampla e bem desenvolvida quantidade de ferramentas para auxiliar as pessoas no
desenvolvimento de sites seja eles pessoais ou para empresas de pequeno, médio e
grande porte.
O estágio ajuda também o aluno a decidir em qual área da
programação ele se adapta melhor ou gosta mais, para que co isto busque um
aperfeiçoamento constante dentro da área escolhida, porque quanto mais atualizado
mais chances tem de crescer dentro da área de atuação escolhida e
consequentemente mais mercado de trabalho terá.
As atividades desenvolvidas tiveram como meta pesquisar
ferramentas para o desenvolvimento de sites e também como deixa-lo seguro,
utilizando alguns conhecimentos adquiridos no decorrer do curso.
A empresa escolhida para a realização do estágio é um
supermercado, onde busca cada vez mais trazer comodidade e bom atendimento
para os seus clientes.
O assunto escolhido para o desenvolvimento do estágio após
inúmeras conversas foi decidido que seria bom o supermercado ter um site, onde a
empresa já vem a algum tempo querendo ter um, mas por medo que o mesmo não
tenha segurança e com isso acabe prejudicando a integridade da empresa, eles
acabavam sempre desistindo.
Como isso me propus a desenvolver este site, onde fiz farias
pesquisas sobre ferramentas para o desenvolvimento do mesmo, mas o mais
importante, sobre como ter um site bom e seguro.
6
O estagio foi muito bom às pesquisas deram ótimos resultados a
empresa gostou bastante e já se sente um pouco mais segura. Com certeza o site
irá ajuda-los muito.
7
2- JUSTIFICATIVA
Neste estágio percebi a importância do mesmo para que o aluno
consiga por em pratica o que aprendeu e consequentemente no decorrer do mesmo
as duvidas irão surgir, é desta forma que os conhecimentos serão aperfeiçoados,
porque vamos buscar sanar nossas duvidas e também buscar novos conteúdos para
nos atualizarmos, pois, está área esta sempre evoluindo e cada vez mais surgem
profissionais bons e outros não tão bons que tornam cada vez mais competitiva e
quem não crescer junto acaba sendo “derrubado”.
O estágio faz com que o aluno coloque em pratica todo o
conhecimento adquirido no decorrer do curso fazendo com que o aluno busque,
pesquise e treine, adquira novos conhecimentos que irão enriquecer cada vez mais
o seu aprendizado e com isso tornando- se um ótimo profissional onde empresas
disputem para telo como funcionário.
Os acadêmicos devem dar muito valor para o estagio, pois, é a partir
dele que as empresas vão conhecer o seu trabalho e quem sabe mais tarde está
mesma empresa te contrate para que você faça parte do seu quadro de
funcionários.
8
3- OBJETIVOS
3.1- GERAL
O estagio tem como objetivo inserir o aluno no meio profissional
onde mais tarde Le pretende atuar. É o momento onde o aluno pode analisar a
realidade em que esta pretendendo viver, onde quem comanda é a tecnologia. É
onde o aluno vai mostrar se está realmente preparado para depois de formar-se
seguir em frente.
Na empresa algumas dificuldades foram encontradas no decorrer do
estágio, onde a empresa estava trocando todo o seu sistema de vendas, parte
contábil e financeira, onde o objetivo do estagio foi pesquisar ferramentas
necessárias para o desenvolvimento da tarefa proposta, onde o projeto proposto
alem de ser bonito tem que ser muito seguro, para evitar que pessoas mal
intencionadas possam tentar tirar o site do ar ou prejudicar a integridade da
empresa.
3.2- ESPECÍFICO
Depois de muitas conversas com a gerente e os
proprietários do supermercado, foram levantados os seguintes
objetivos do estagio:
Recolher informações da empresa necessárias para a
realização do projeto.
Pesquisar ferramentas para o desenvolvimento da atividade
proposta, tendo em vista a segurança como o principal objetivo.
9
Fazer um site para melhor atender seus amigos, clientes e
colaboradores.
Fazer com que o estagiário coloque em pratica alguns
conhecimentos adquiridos em sala.
10
4- TECNOLOGIA
4.1- ADOBE DREAMWEAVER:
Dreamweaver é um software de desenvolvimento voltado para a
Web, foi criado pela Macromedia e vendido para a Adobe Systems. Em suas
versões anteriores contava com um simples editor HTML. Atualmente em seus
recentes lançamentos conta com um suporte para varias tecnologias como: XHTML,
CSS, JAVA Script, AJAZ, PHP, ASP, ASP.NET e JSP Coldfusion.
O Dreamweaver torma possível que pessoas que não tem
conhecimento nenhum em programação, HTML, PHP, entre outras, criem facilmente
páginas, sites e até mesmo aplicações para web. Alguns desenvolvedores criticam
este modo de função do Dreamweaver por produzir códigos sujos, muito maiores do
que o necessário, o que pode levar a erros de visualização em páginas HTML e
erros de segurança em aplicações web. No entanto, este tipo de erro não se dá a
ferramenta, e sim ao profissional que está usando a ferramenta, pois tem em seu
pacote a opção de editar os codigos tornando possivel fazer qualquer alteração se
necessaria.
O Dreamweaver permite selecionar a maioria dos navegadores,
para se ter uma preview da página diretamente no navegador escolhido como
destino. O software possui também ótimas ferramentas de gerenciamento e
transferência de arquivos , possui tambem a habilidade de encontrar e substituir, no
projeto inteiro, linhas de texto ou código através de parâmetros especificados.
Um aspecto muito importante e bastante reconhecido no
Dreamweaver é sua arquitetura expansível onde qualquer desenvolvedor web com
ou sem experiencia pode escrever um codigo HTML, PHP entre outros que ele
disponibiliza, qualquer um pode baixar e instalar pois é muito facil, o que proporciona
funcionalidade adicional ao software. O Dreamweaver conta com uma ampla
comunidade de desenvolvedores que torna disponíveis extensões, comerciais ou
grátis, para a maioria das tarefas de desenvolvimento web.
11
Desde o final dos anos 90, o Dreamweaver vem tendo um sucesso
crescente e hoje domina cerca de 80% do mercado de editores HTML. Existem
versões tanto para MAC OS quanto para WINDOWS e LINUX.
4.1.1- Versões:
Dreamweaver Mx, a Macromedia incorporou ferramentas de
criação de conteúdo dinâmico ao Dreamweaver. No espírito das ferramentas HTML
WYSIWYG, permite que usuários se conectem facilmente a bancos de dados, como
MYSQK e Microsoft Access, para filtrar e mostrar conteúdo usando tecnologias de
script como PHP, Cold Fusion, Asp e Asp.net, sem qualquer experiência em
programação. Foi a ultima versão do Dreamweaver com tradução para o Português.
Dreamweaver 8, Ultima versão do Dreamweaver sob gestão da
Macromedia, trouxe implementações e melhorias nas funções já utilizadas na versão
MX e correções de bugs em comportamentos de servidores. Sua principal novidade
foi o surgimento da extensão Ajax ToolBox desenvolvida pela InterAKT trazendo a
ferramenta suporte a alguns conceitos básicos de Ajax.
Dreamweaver CS3, lançado em 16 de abril de 2007. Na versão
CS3 o destaque é a capacidade de gerar páginas em Ajax. Para isso é utilizado o
Spry, framework para desenvolvimento de Ajax criado e mantido pela própria Adobe.
Utilizando o Spry, é possível criar menus de navegação dinâmicos, componentes
para validação de formulário como mudar a cor dos campos, mostrar quantos
caracters foram digitados ou quantos faltam para o limite. Tudo é feito visualmente,
sem a necessidade de lidar diretamente com código. Passando assim a ser
preferência desde simples usuarios da internet que desejam ter sua Home Page ate
a experientes programadores de web sites. Outras novidade da nova versão são
avanços nas áreas de CSS e checagem de browser. A ferramenta de verificação de
browsers ficou mais poderosa e indica com precisão possíveis problemas de
compatibilidade entre navegadores. Na área de CSS, o programa traz uma boa
quantidade de modelos para layout baseados em estilo alem de que se por acaso o
12
desenvolvedor erre o codigo do css , ele exibe um 'alerta' com um link para o site da
adobe mostrando o erro ou a inexistendia do código inserido e a possivel solução
para o browser checado.
Dreamweaver CS4, lançado em 23 de setembro de 2008. Vêm
com grandes transformações em seu ambiente de software, adequando-se as
aparências mais recentes de seus sistemas operacionais e organizando melhor seu
layout para que diferentes tipos de profissionais possam ter facilidade em trabalhar
com suas ferramentas. No entanto as principais novidades dessa versão não vieram
no seu pacote default e sim nas extensões dela, que agora com novas metologias
permitiram que fosse desenvolvidas extensões para integração com frameworks
consagrados.
Dreamweaver CS5 com duas versões, CS5 lançado em 12 de
abril de 2010 e CS5. 5 lançado em 12 de abril de 2011.
Dreamweaver CS6, é o mais novo e recente lançamento da
Adobe, lançado em 23 de abril de 2012, e escrito em C++. Fornece uma interface
visual intuitiva para criar e editar sites e aplicativos móveis. Para criar páginas, use o
layout de grade fluida desenvolvido para oferecer compatibilidade com várias
plataformas.
4.2- ADOBE FIREWORKS:
O Fireworks é um editor de imagens desenvolvido pela Macromedia
e vendido para a Adobe em 2005. Suas funcionalidades focam a publicação gráfica
na Internet, com suporte a GIF animado, PNG,JPG e imagens fatiadas.
O objetivo da Adobe foi em criar um conjunto mais poderoso de
soluções para a criação, gerenciamento e entrega de conteúdo e experiências
atraentes em múltiplos sistemas operacionais, dispositivos e mídias, voltados para a
programação Web.
13
O CS5 é a mais recente criação da adobe. Ele serve para rápidos
protótipos de websites, aplicação de interfaces, entre outros. Tem uma interface
simples e facil de manusear, com muita variedade de fontes e estilos.
14
5- LEVANTAMENTO DE REQUISITOS
5.1- DESCRIÇÕES DO SISTEMA PROPOSTO
O site será desenvolvido com o intuito de divulgar a empresa, seus
produtos e serviços. Um site é um cartão de visitas para a empresa, onde é uma
forma moderna, dinâmica e tem custos baixos em relação à divulgação em rádios,
jornais, revistas, etc.
Para a realização do site estão sendo usadas ferramentas boas e
que são de fácil utilização, como por exemplo, o Adobe Fireworks que é uma
ferramenta que será usada para fazer toda a parte do designe do site, é fácil de
trabalhar e de fazer alterações quando necessárias.
Outra ferramenta que será usada é o Adobe Dreamweaver, que vai
ser a ferramenta onde todo o designe feito no Fireworks vai ser importado para o
Dreamweaver que vai montar toda pagina, definir os links, entre outras
funcionalidades que vão ser definidas. Esta ferramenta também vai ser usada para
fazer toda a parte do banco de dados do site, pois ela tem isto em seu pacote.
O site vai ser bem dinâmico e fácil de utilizar pelos clientes, pois,
não adianta ele ser bem bonito e cheio de frescuras se não tiver utilidade nenhuma
para os clientes, que são o publico alvo disto, ou seja, não adianta fazer um designe
de “ai clica aqui, ai clica ai” se o que o cliente realmente quer não vai ter.
Para desenvolver este site também esta sendo feita uma pesquisa
com os clientes e amigos do que seria interessante em conter neste site, ou seja, o
que seria importante e útil, o que iria facilitar realmente a vida das pessoas.
Esta pesquisa será de grande importância, pois é aonde serão
decididos alguns dos componentes do site, como por exemplo se será colocado um
fórum aonde os clientes vão deixar sugestões e reclamações, eu mais tarde serão
avaliadas e mudadas para um melhor atendimento.
15
6- DIAGRAMA DE CASO DE USO
Figura 1 (Diagrama Caso De Uso)
O supermercado entrou em contato com um web designer para que
ele fizesse um projeto para a montagem de um site, onde nesse projeto tenha os
custos e alguns protótipos da pagina. Depois do projeto pronto a empresa pediu que
o web designer fizesse a pagina e conforme fossem surgindo mudanças e novas
ideias ele teria que as fazer.
Este site deve conter os seguintes requisitos:
Em primeiro e mais importante o site deve ter muita segurança
nas informações nele contidas.
Deve ter uma pagina aonde o cliente tenha acesso a seus
telefones e e-mails quando necessitar.
Fotos dos eventos realizados no supermercado, como por
exemplo feira de salgados, sorteio de prêmios, entre outros.
16
A historia da empresa para que os clientes conheçam com tudo
começou.
uma pagina das promoções semanais que o mercado realiza.
17
7- DIAGRAMA DE CLASSE
Figura 2 (Diagrama Classe)
18
8- PROTOTIPAÇÃO DAS TELAS
Figura 3 (Home Page)
19
Figura 4 (A Empresa)
20
Figura 5 (contatos)
Figura 6 (Fotos)
Figura 7 (Promoções)
21
9- CRONOGRAMA
Figura 8 (Organograma)
22
10-CONCLUSÃO
Este trabalho fez com que a gente colocasse em pratica tudo o que
foi aprendido em aula. O estagio é uma forma de a gente ver as nossas dificuldades
e aprender com elas, fazer pesquisas para aprender novos conteúdos relacionados
na nossa área.
O pré-projeto ajuda a ir nos preparando para o TCC, onde, vamos
mostrar um pouco do que foi aprendido e trabalhado na parte pratica no decorrer do
curso.
Este trabalho foi feito em cima de novas ferramentas que foram
cuidadosamente pesquisados e escolhidas para que o projeto saia dentro do
cronograma e conforme o que foi conversado com a empresa, onde estas
ferramentas são novas para mim, mas não são difíceis de trabalhar, irão ajudar
muito no decorrer do projeto e depois para a realização do TCC.
23
11-REFERENCIAS
http://pt.wikipedia.org/wiki/Adobe_Dreamweaver
http://pt.wikipedia.org/wiki/Adobe_Fireworks