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