Produção textual individual 1º semestre TelecineMozer

Prévia do material em texto

20
Sistema de Ensino Presencial Conectado
superior de tecnologia em análise e desenvolvimento de sistemas
ezequiel gnich
Telecine mozer
Locação de filmes online
Joinville
2017
ezequiel gnich
telecine mozer:
Locação de filmes online
Trabalho de Ezequiel Gnich apresentado à Universidade Norte do Paraná - UNOPAR, como requisito parcial para a obtenção de média bimestral na disciplina de Produção Textual Individual 
Joinville
2017
SUMÁRIO
1 INTRODUÇÃO	3
2	DESENVOLVIMENTO layout	4
2.1	Página inicial – Telecine mozer:	4
2.1.1	BARRA DE NAVEGAÇÃO – OPÇÃO NAVEGAR:	4
2.1.2	BARRA DE NAVEGAÇÃO – OPÇÃO CATEGORIAS:	5
2.1.2.1 LAYOUT MENU SUSPENSO – CATEGORIAS:	5
2.1.3	BARRA DE NAVEGAÇÃO – OPÇÃO ENTRAR:	5
2.1.3.1	LAYOUT POP-UP – ENTRAR:	6
2.1.4	POP-UP PRÉ-VISUALIZAÇÃO DE CONTEÚDO SOBRE O FILME:	7
2.1.4.1	LAYOUT POP-UP PRÉ-VISUALIZAÇÃO DE CONTEÚDO SOBRE O FILME:	7
2.1.5	PÁGINA DE CADASTRO DE USUÁRIOS	7
2.1.5.1	LAYOUT PÁGINA DE CADASTRO DE USUÁRIOS	8
2.2	Página de Contato	8
2.2.1	LAYOUT PÁGINA DE CONTATO	8
2.3	Página de perguntas frenquentes	9
2.3.1	LAYOUT PERGUNTAS FREQUENTES	9
2.4	página política de privacidade e segurança	9
2.4.1	LAYOUT PÁGINA DE POLÍTICA DE PRIVACIDADE E SEGURANÇA	9
2.5	PÁGINA ONDE ASSISTIR	10
2.5.1	LAYOUT PÁGINA ONDE ASSISTIR	10
3	Imagens de apoio ao texto	11
4	CONCLUSÃO	20
1 INTRODUÇÃO
Neste trabalho irei apresentar o desenvolvimento de um site chamado TELECINE MOZER, tema proposto para aplicação das habilidades que serão desenvolvidas no decorrer do curso Superior de Analise e desenvolvimento de sistemas. A princípio será feito apenas o desenvolvimento do layout do site, onde será definido as cores, disposição dos elementos no site e serviços que serão fornecidos. Irei demonstrar minuciosamente os detalhes do meu site e o que eu imagino como funcionalidades para o mesmo. Com base em artigos acadêmicos, sites e livros, vou buscar expressar o desenvolvimento correto seguindo as regras para uma boa criação e organização do mesmo.
DESENVOLVIMENTO layout
 Página inicial – Telecine mozer:
Na página inicial do site Telecine Mozer como é possível observar na Figura 1, é dividido em partes, todas demarcando pontos precisos e importantes de sua estrutura. Na parte superior à o desenvolvimento de uma barra de navegação que quando a página é rolada para cima ou para baixo ela permanecera estática para um acesso rápido a outras áreas do site, nesta barra está contido logo da empresa no canto esquerdo, com um menu com as opções “Navegar”, “Categorias”, “Lançamentos” e um botão “Entrar” para acessar a conta do usuário. Ainda no início do site terá a apresentação de banners de filmes rolando da direita para a esquerda com um pequeno delay para o cliente poder observar as possíveis opções de filmes e ofertas em vigor, as opções poderão ser passadas mais rapidamente clicando com o mouse em cima de buttons específicos de navegação para a área de banners, dentro de cada banner haverá um button “Saiba mais”, que direcionará o usuário para a página do filme escolhido.
Buscando uma interação maior com o usuário nas redes sociais, haverá uma área destinada a comentários do “Twitter” ou comentários vindos do próprio site, a área terá o nome de “#Últimos Comentários”. 
O site também contará com uma área de filmes em alta, com o título “#Em Alta”, nesta área será disposto filmes de gêneros que tiverem mais acesso durante o mês. Esta área estará em destaque na parte inferior direita do site, com opção de acesso rápido a página do filme escolhido.
Ao final do site terá um rodapé na cor preta com conteúdo na cor branca. Essa área terá um pequeno menu de acesso rápido a algumas áreas especificas, são elas a página de “Contatos”, “Perguntas Frequentes”, “Política de Privacidade” e “Onde Assistir”, seguido pelos ícones das redes sociais da empresa, todas dispostas lado a lado (Facebook, Twitter, Google+, WhatsApp, Instagram).
BARRA DE NAVEGAÇÃO – OPÇÃO NAVEGAR:
Ao clicar na opção navegar da barra de navegação, o cliente será direcionado para a página de filmes em ordem alfabética por gênero, a área de “#últimos comentários” e “#Em alta” não farão mais parte da página dando espaço para um maior conteúdo de filmes para opção de escolha do usuário.
BARRA DE NAVEGAÇÃO – OPÇÃO CATEGORIAS:
Nesta parte como é demonstrado na Figura 2 ao clicar sobre o menu Categoria, é aberto um menu suspenso contendo todos os gêneros disponíveis no site, e outras formas de seleção de conteúdo especifico como: “Mais vistos, Adicionados recentemente, Em breve e Nossa Seleção” (As páginas para todos esses links não foram criadas até o momento, apenas uma a título de exemplificação), para cada link acessado do menu “Categorias” o usuário será levado para a página escolhida e na página haverá áreas mais especificas como “Animações->Lançamentos de animações->Mais vistos em animações”.
2.1.2.1 LAYOUT MENU SUSPENSO – CATEGORIAS:
O layout do menu suspenso de “Categorias” terá um background na cor “#000” com uma opacidade de 95%, a font-family do menu será a – Oswald com font-size de 19px e font-color #fff, o menu será dividido em quatro colunas, listando todos os títulos de gêneros disponíveis no site.
BARRA DE NAVEGAÇÃO – OPÇÃO ENTRAR:
No momento em que o usuário clicar na opção entrar da barra de navegação, será aberto uma pop-up acima do conteúdo intitulada “Minha Conta (Figura 3) ”, nesta janela, o usuário terá a opção de acessar o Telecine Mozer utilizando seu e-mail previamente cadastrado no banco de dados, ou utilizar o login pelo nome de usuário da rede social Facebook, se acontecer do usuário não se lembrar da senha de acesso, ele poderá solicitar uma redefinição de senha clicando em “Esqueci minha senha! ” e assim sendo redirecionado para uma nova janela com a opção de colocar um e-mail válido cadastrado e que ele possua acesso, ao fazer isso um e-mail será enviado para redefinição de senha possibilitando assim mais uma vez o acesso a conta do usuário.
Ainda na janela de acesso há a opção de cadastro de um usuário novo. Ao clicar em “Cadastre-se agora” o novo usuário será redirecionado para uma página de formulários em que deverá ser preenchida corretamente e após preenchida será enviado um e-mail para confirmação. Tendo acessado o e-mail e feito os procedimentos para verificação de autenticidade o usuário já terá acesso ao site, filmes e ofertas especiais. 
LAYOUT POP-UP – ENTRAR:
Ao clicar sobre o botão entrar, e ser redirecionado para a pop-up de acesso, o usuário irá ver a janela (Figura 3) com a cor de background – “#e9f9ff” e uma borda na cor “#00a8ec” com “1px” de espessura, todo conteúdo que se encontra na parte de traz da pop-up será coberto por uma área escura com uma leve transparência para dar ênfase a pop-up de acesso do usuário. A pop-up irá ter duas caixas de texto com o título “E-mail” e outra com o título “Senha” para o usuário digitar suas informações e fazer o acesso ao site, seguindo logo abaixo entre o botão de entrar e a caixa de texto “Senha”, estará link de redefinição de senha no qual o usuário será redirecionado para outra tela para preencher os dados necessários para fazer a recuperação de login.
O usuário ainda contara com a opção de cadastro nesta mesma tela, um botão logo abaixo de um pequeno texto explicativo sobre o porquê se inscrever e ser um usuário TelecineMozer, e assim ao clicar sobre o botão estará sendo redirecionado para a página de formulários para cadastro. Ao final desta pop-up de acesso, será adicionado um pequeno logo da empresa.
POP-UP PRÉ-VISUALIZAÇÃO DE CONTEÚDO SOBRE O FILME:
Tanto na página inicial quanto nas outras páginas da lista filmes, será possível pré-visualizar o conteúdo do filme, os idiomas disponíveis, a qualidade da imagem do filme e um pequeno vídeo no lado direito com trailer do filme escolhido.LAYOUT POP-UP PRÉ-VISUALIZAÇÃO DE CONTEÚDO SOBRE O FILME:
No layout desta pop-up teremos como background uma imagem de amostra do filme escolhido, com uma pequena transparência para não atrapalhar a leitura dos conteúdos dispostos na mesma. O conteúdo iniciara no canto superior esquerdo com nome do filme, na sequência teremos o ano de lançamento, país de origem do filme, e no caso de uma série de televisão será mostrada em qual temporada aquele conteúdo faz parte. Abaixo disposto em três áreas com destaques estará a informação se o filme é dublado, se possui legendas e a qualidade do filme. Na sequência um relato sobre o filme, os atores, e o diretor. No lado direito um vídeo com o trailer do filme/série e abaixo um button que direcionará o usuário para a área do filme para efetuar a compra do mesmo.
PÁGINA DE CADASTRO DE USUÁRIOS 
O usuário será direcionado para esta página (Figura 5) quando na área de acesso (Figura 3), o button “Cadastre-se agora” for acionado, esta área é responsável por receber os dados iniciais de um novo usuário, nela estão contidos campos como, “Email” e “Senha” que serão utilizados para o acesso ao site, dados pessoais como “Nome”, “Sobrenome”, “Data de Nascimento” etc..., endereço, nesta opção o usuário poderá optar por pesquisar o CEP se o mesmo não souber a numeração, ao clicar sobre o button “Buscar”, será aberto uma pop-up que será usada para digitar o nome da rua e assim fazer a pesquisa e disponibilizar o número do CEP da rua.
Abaixo, logo depois de preencher todos os dados necessários para cadastro do novo usuário estará um check-box que será usada para confirmação de que o usuário leu e aceita os termos de “Política e Privacidade” do site, após deita a checagem, o usuário clicará em cadastrar, e assim já poderá ter acesso ao site.
LAYOUT PÁGINA DE CADASTRO DE USUÁRIOS
A página de cadastro de usuários está dividida em três grandes áreas todas com background na cor # f8f4b9, a primeira chamada de “Dados de Acesso”, a segunda “Dados Pessoais” e a terceira “Endereço”.
Na área de “Dados de Acesso”, teremos campos como, “Email” – “Confirmar Email”, “Senha” – “Confirmar Senha”.
Na área de “Dados Pessoais” teremos, “Nome”, “Sobrenome”, “CPF”, “Data de Nascimento”, “RG”, “Sexo” esta com duas opções “Masculino e Feminino”, “Telefone Celular”, “Telefone Residencial” e “Outro Telefone”.
Na área “Endereço”, teremos “CEP”, com a opção de pesquisar um pelo nome do endereço clicando no button “Buscar” que se encontrará ao lado do campo “CEP”. “Endereço” (que será preenchido automaticamente se o usuário digitar o CEP ou fizer a busca pelo nome da rua), “Numero”, “Bairro”, “Cidade”, “UF”, “Complemento”.
Página de Contato
Nesta página (Figura 6), o usuário poderá entrar em contato com a empresa, para poder dar sugestões, reclamações, elogios e tirar dúvidas sobre qualquer assunto relacionado ao funcionamento do site. Nesta área também estará contido os números de telefone para contato endereço físico de onde localiza a sede da empresa, e os horários de funcionamento. (Todos os dados contidos nessa área são fictícios e não corresponde a uma empresa existente, apenas a título de exemplo para o trabalho).
LAYOUT PÁGINA DE CONTATO
A página de contato, será desenvolvida em uma grande área central com a cor de background na cor #cdcdcd, esta área central será dividida em duas áreas menores sem espaçamento entre si, apenas com uma linha na cor preta fará a divisão do conteúdo, de um lado os campos para serem preenchidos tais como, “Nome”, “Email”, “Telefone”, “Motivo do contato” e um campo para descrever suas dúvidas, elogios e dificuldades. Em seguida um botão “Enviar”, na cor verde. 
Do lado esquerdo, estarão contidos todos dados da empresa para o usuário entrar em contato da melhor forma possível, como telefones, email alternativo, o nome da rua em que se encontra a sede da empresa, o CNPJ, e o horário de funcionamento para ser atendido.
Página de perguntas frenquentes
Nesta página (Figura 7) temos o resumo das perguntas e suas respectivas respostas que os usuários mais tiveram dúvidas, desenvolvendo assim esta área para que não seja necessário esperar um retorno por parte da empresa para perguntas muitas das vezes simples. 
LAYOUT PERGUNTAS FREQUENTES
Todo o layout desta página (Figura 7) estará disposto acompanhando o fundo amarelo do site, com exceção das respostas que estarão dentro de uma caixa a parte, para o usuário visualizar uma resposta em especial, será preciso clicar em cima da pergunta, desta forma a resposta irá descer e será apresentada logo abaixo da pergunta que foi selecionada.
página política de privacidade e segurança
Nesta página (Figura 8) consta toda a política de privacidade e segurança da empresa a qual o usuário poderá terá acesso indo até o rodapé da página principal e clicar em “Política de Privacidade e Segurança”. 
LAYOUT PÁGINA DE POLÍTICA DE PRIVACIDADE E SEGURANÇA
Nesta página de política de privacidade e segurança (Figura 8), todo o texto será escrito no background #fff000, que é a cor predominante do próprio site, com exceção dos índices que indicam sobre o que se trata o trecho especifico da política, este será na cor #cdcdcd, e ocupará todo o espaço de uma linha na página criando uma divisão entre os conteúdos da página. No rodapé desta página se encontrará a data da última atualização dos termos descritos nesta política de privacidade e segurança.
PÁGINA ONDE ASSISTIR
Esta página (Figura 9) nada mais é do que uma amostragem dos dispositivos que o site terá suporte para funcionar, demonstrando ao usuário se no sua smart tv, smartphone ou console, será possível assistir sem mais problemas.
LAYOUT PÁGINA ONDE ASSISTIR
O layout desta página (Figura 9) também será desenvolvido no background na cor #fff000, que é a mesma cor de fundo do site, será dividida em quatro áreas separadas por linhas na cor preta, cada área terá um tipo de dispositivo em que o site pode apresentar o conteúdo.
Imagens de apoio ao texto
Figura 1 – Página inicial Telecine Mozer
 
Figura 2 – Página inicial - Categorias
Figura 3 – Página inicial - Entrar
Figura 4 – Pop-up pré-visualização de filmes
Figura 5 – Página de cadastro de usuários
Figura 6 – Página de Contato
Figura 7 – Página de Perguntas Frequentes
Figura 8 – Página de Política e Privacidade
Figura 9 – Página Onde assistir
CONCLUSÃO
Neste trabalho foi apresentado uma pequena parte do que compreende o todo do desenvolvimento de aplicações web. Todo site foi concebido e desenvolvido tendo como padrão/parâmetro sites já existentes no mercado e que já são referências em design e aplicação junto aos usuários. Neste site foi aplicado um pouco mais sobre o que eu acho relevante para o desenvolvimento de um site no meu pouco entendimento sobre tecnologias web, e conclui que desenvolver qualquer que seja a aplicação, web, mobile ou desktop requer muito tempo, leitura e estudo sobre o que quer que queremos desenvolver, para assim poder atingir o público alvo de forma agradar a maioria dos que querem se utilizar da tecnologia desenvolvida.
Para este trabalho foram atingidos todos os objetivos, sabendo que apenas a parte de layout do site era necessária, com alguns itens específicos que foram desenvolvidos e aplicados de forma conceitual.
Este trabalho como um todo, foi importante para a compreensão e aprofundamento dos meus conhecimentos na área de desenvolvimento web, mais especifico a parte de criação da arte para aplicação web, alcançando os objetivos proposto pude concluir o quão abrangente e volumoso é esta área na qual se desenvolve este curso.