portifólio Análise e Desenvolvimento de Sistemas 2°Semestre. TELECINE MOZZER

Prévia do material em texto

�PAGE �
SISTEMA DE ENSINO à distância
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
cÍCERO FRAZÃO MORAES
portifólio individual – 2° semestre
Fundamentos de Tecnologia da Informação
Imperatriz-MA
2017
CÍCERO FRAZÃO MORAES
PORTIFÓLIO INDIVIDUAL – 2° SEMESTRE
Fundamentos de Tecnologia da Informação
Atividade interdisciplinar individual apresentado à UNOPAR – Universidade Pitágoras Unopar, como requisito parcial para a obtenção de média bimestral nas disciplinas de Introdução ao Desenvolvimento de Sistemas Web, Lógica e Técnicas de Programação, Metodologia Cientifica e Processo de Negócio e Software.
Orientador: Profs. Merris Mozer, Anderson Emidio de Macedo Gonçalves, José Adir lins Machador e Marco Ikuro Hisatomi
Imperatriz-MA
2017
sumário
1 INTRODUÇÃO..........................................................................................................3
2 OBJETIVO.................................................................................................................4
3 DESENVOLVIMENTO...............................................................................................5
3.1 Protótipo do TELECINE MOZER............................................................................5
3.1.1 Tela inicial............................................................................................................5
Figura 1 – Protótipo de tela inicial do TELECINE MOZER...........................................5
3.1.2 Tela de listagem de filmes...................................................................................6
Figura 2 – Protótipo de tela de listagem de filmes.......................................................6
3.1.3 Tela de exibição de detalhes do filme.................................................................8
Figura 3 – Protótipo da tela de detalhes do filmes selecionado...................................8
3.1.4 Tela de visualização do histórico do cliente........................................................9
Figura 4 – Protótipo da tela de histórico do cliente......................................................9
3.1.5 Tela de visualização do histórico do Administrador..........................................10
Figura 5 – Protótipo da tela do administrador............................................................10
4 CONCLUSÃO..........................................................................................................11
5 REFERÊNCIAS.......................................................................................................12
�
INTRODUÇÃO
Neste trabalho irei abordar os assuntos que foram repassados durante o 1° e 2° semestre do curso Superior em Tecnologia em Análise e Desenvolvimento de Sistemas tendo como base maior o conteúdo ministrado no 2° semestre, sendo eles: a aplicação em HTML5, através de tags ou comandos para um documento feito todo em HTML5 e formatando usando os comandos aprendidos em CSS3 para organização do layout, que proporciona uma página mais leve, de fácil carregamento para o usuário e que seja dinâmica e de fácil modificação e manutenção, pois o CSS3 é utilizado para fazer todo o layout do site. Apresentando de um modo panorâmico como seria o protótipo de um sistema voltado para locação de filmes.
Por fim, farei uma breve abordagem de algumas telas do site e suas funcionalidades de uso ao usuário e ao administrador.
 2 OBJETIVO 
Com base no cenário do estudo de caso do TELECINE MOZER que nos foi proposto neste 2° semestre, tendo como objetivo elaborar um protótipo de interface simples e de fácil carregamento na web, levando em consideração tudo que nos apresentado em conhecimentos básicos de elaboração de interfaces, levando em conta o aprendizado sobre HTML5 e CSS3, tendo como objetivo que o usuário tenha uma maior facilidade de navegação e com uma interface leve e intuitiva, objetiva, clara e de fácil modificação e manutenção.
Objetivando ainda no estudo das disciplinas abordadas neste segundo semestre, um melhor aprofundamento no conhecimento das técnicas de codificação aprendidas durante o semestre, irei aplicar e descrever as melhores opções que melhor se encaixam dentro do protótipo do estudo de caso proposto no semestre, buscando apresentar um protótipo de site que siga um layout padrão e assim apresentando os modelos para as telas inicial, listagem de filmes, detalhes de filme escolhido e informações de alguns indicadores tanto para o cliente como para o administrador. E irei explicar melhor nos itens seguintes cada tela e seu funcionamento quanto ao usuário e quanto o administrador do site.
Por fim, tendo como objetivo de conhecer melhor a influencia e importância da tecnologia na vida contemporânea, pretendo exemplificar de forma clara e básica algumas das praticas na qual a tecnologia esta inserida.
DESENVOLVIMENTO 
3.1 Protótipo do TELECINE MOZER
3.1.1 Tela inicial
Figura 1 – Protótipo de tela inicial do TELECINE MOZER
A tela inicial do nosso site consiste em uma breve apresentação de forma geral, informações dos nossos produtos, no caso os filmes e com as opções de “Logar” para os usuários já cadastrados e com a opção “cadastrar” para os que ainda não são cadastrados em nossa biblioteca de mídias. Após clicar na opção de efetuar o seu cadastro, irá habilitar algumas funções, como termos de contrato, detalhamento das taxas de pagamento. Quando da conclusão do cadastro em nosso site o usuário terá um detalhamento de toda a nossa biblioteca de filmes, ou aos que já tem seu cadastro efetuado.
O cliente quando concluir seu cadastro receberá um link de confirmação em seu e-mail e após confirmar clicando neste link, será redirecionado para a nossa página inicial e com isso confirmando que foi ele mesmo que tenha feito o cadastro em nosso site. Após esse passo será gerado um boleto mensal ou fracionado de acordo com a quantidade de dias restantes do mês, efetuando o pagamento deste boleto será gerada uma senha de acesso ao nosso site. Essa senha será gerada todos os meses após o fechamento do boleto e enviada por e-mail. Pois somente terá acesso a biblioteca de mídias informando essa senha que é gerada mensalmente junto com o boleto, e após o pagamento o nosso cliente ao acessar será pedida também essa senha e dessa forma liberará o acesso a toda a nossa biblioteca de filmes.
3.1.2 Tela de Listagem de Filmes ao Cliente
Figura – 2 Protótipo da tela de listagem de filmes
Após o cliente efetuar seu login ou ter concluído seu cadastro (no caso de novos assinantes), nosso site irá abrir uma tela listando um total de 10 filmes de forma aleatória, ou seja, cada pesquisa que for feita em nosso site abrirá sempre uma aba com 10 filmes, e logo abaixo as abas com as páginas seguintes, e informando qual página o usuário está no momento marcada com a cor “vermelha” e entre a numeração de cada página duas setas uma indicando para a esquerda e outra para a direita, assim o usuário pode avançar ou retroceder na navegação. E na parte superior da tela o usuário pode fazer a filtragem por “exibição”, “categoria” ou “nome do filme”.
Na opção de filtro o usuário pode optar em pesquisar 5 ou 10 filmes por página, listando por ordem alfabética, categoria, preço, lançamento ou mais assistidos. Com isso nosso cliente pode fazer a pesquisa da melhor forma que lhe for conveniente.
Os filmes que são apresentados na lista apresentam apenas a imagem de capa, ou seja, um pôster, com o nome. Já na opção detalhes essa será responsável em apresentar maiores informações sobre o filme escolhido tais como: disponibilidade de horários, preços e aluguel.
Quando o nosso cliente efetuar o seu login, no lado direito do site habilitará as opções de “cadastro”, “extrato”, “histórico”, “busca” e “atendimento” possibilitandoao cliente total controle sobre suas informações de acesso em nosso site.
3.1.3 Tela de exibição de detalhes do filme
Figura – 3 Protótipo da tela de detalhes do filme selecionado
Quando o usuário clica na opção detalhes de um determinado filme, irá abrir uma página com informações detalhadas do filme em questão como: “título”, “lançamento”, “gênero”, “duração”, “diretor”, “tamanho”, “qualidade”, “formato”, “idioma”, “legenda”, “alugar o filme”, “ver horários”, “ver trailler” e “sinopse”.
Ao final da página teremos um botão “voltar para a lista” afim de que o cliente ao final de sua pesquisa caso não goste do filme em destaque possa retornar facilmente a lista de filmes do site.
Cada filme que for locado será adicionado em sua conta de forma automática ao seu histórico e o valor também acrescido em na sua fatura mensal, e no final do mês o boleto será gerado com o valor referente a todos os filmes locados em sua conta. E tudo isso pode ser consultado de forma prática e rápida na opção de “extrato” e “histórico” do cliente.
3.1.4 Tela de visualização do histórico do cliente
Figura – 4 Protótipo da tela de histórico do cliente
Nesta tela o cliente pode visualizar seu histórico mensal. Verificar todas as suas locações de forma organizada e simples de serem acessadas em filtro de ordem alfabética”, “gênero”, “datas especificas” ou “intervalo de datas”. Com isso ele pode detalhar seus gastos e ter controle total do que ele assiste, possibilitando melhor pesquisa com base no seu histórico para locações futuras tendo como base nos seus filmes locados.
3.1.5 Tela de visualização do historico do administrador
Figura – 5 Protótipo da tela do administrador
Na tela do administrador, começando na tela histórico, o administrador tem a sua disposição os filtros que lhe dão acesso a movimentação de todas as locações do site, tais como “clientes cadastrados”, “locações do cliente”, “filmes”, “quantas locações” foram feitas de um determinado filme, podendo listar essa ordem crescente demonstrando a quantidade de sua locações. Com isso ele pode fazer uma busca listando os clientes que mais fizeram locações em um determinado periodo desejado sendo semana, mês ou determinado período de tempo. Assim ele pode elaborar promoções aos seus clientes mais fieis e de acordo com seu filmes mais locados e desta forma fidelizar mais ainda e/ou conquistar novos clientes com uma boa politica de bonificação.
O administrador ainda dispõe das opções de “configurações”, “contabilidade”, “gerenciamento” e “atendimento” e desta forma ele pode ter controle total de tudo que necessita para administrar melhor o seu TELECINE MOZER.
– CONCLUSÃO
 A primeira etapa do projeto consistia em pesquisa e entendimento dos princípios mais elementares da linguagem HTML (Hypertext Markup Language). Essa é a linguagem padrão utilizada na criação e manutenção em sites na Web.
Através dessa linguagem podemos acrescentar dados, links, imagens, formulários, entre outros e também deixarmos o site responsivo, ou seja, um site que se adequa também aos dispositivos móveis, como smarphones e tablets. Pois hoje é praticamente todas as pessoas possuem um smartphone com acesso a internet e se o site não for pensando para ser responsivo e abrir em vários tamanhos de tela o site provavélmente terá poucos acessos. 
 Após análise de sites do ramo de entretenimento, sendo eles em sua maioria de filmes, foi possível adquirir referênciais para a elaboração de páginas deste site. Tanto em estruturação de página, quanto em seu layout.
 A etapa seguinte foi fundamental para a definição de parâmetros e de como aplicar os recursos obtidos na primeira etapa.
 A estruturação dos grandes sites de locação de filmes serviu de base para a aplicação de uma interface adequada ao atual mercado. Pois, apesar de sempre buscar inovações, elas seguem um padrão muito usado comercialmente. Isso se faz necessário para que seja mantida uma linguagem e estruturação de dinâmicas e de fácil interação.
 Na etapa final, foi o momento da aplicação das linguagens CSS. O CSS foi utilizado para a padronização de todas as páginas que compõe o site. Como cor, margem, fonte, menu, etc.
 O CSS serviu para otimizar o projeto e agilizar a formatação de todos os ambientes da página à fim de satisfazer todas as expectativas no que se refere a manter a identidade do site. Pois com o CSS podemos agilizar todo esse layout e customização deixando assim um código mais limpo e de fácil manutenção sem precisar fazer alterações linha por linha do código do fonte.
REFERÊNCIAS
Foram utilizados os livros impressos, as web-aulas das disciplinas abordadas e alguns sites para conclusão do trabalho.
http://hospedagem2.procergs.com.br/tutorial/PROCERGS-PHP-Seguro.pdf. Disponivel em:. Acesso em 08 de Agosto de 2017.
http://www.martinsfontespaulista.com.br/anexos/produtos/capitulos/254879.pdf. Disponivel em:. Acesso em 08 de Agosto de 2017.
http://homepages.di.fc.ul.pt/~paa/projects/conferences/coopmedia2003/10.pdf. Disponivel em:. Acesso em 30 de Agosto de 2017.
http://www.univasf.edu.br/~jorge.cavalcanti/cap1_livro_ergonomia_usabilidade.pdf. Disponivel em:. Acesso em 02 de Setembro de 2017.
http://www.revistapindorama.ifba.edu.br/files/Simone%20Azevedo%20Bandeira%20de%20Melo%20Aquino%20IFMA.pdf. Disponivel em:. Acesso em 02 de Setembro de 2017.
https://www.slideshare.net/janevita/mini-curso-design-de-interface-para-dispositivos-mveis. Disponivel em:. Acesso em 15 de Setembro de 2017.