PROJETO DE WEB SITE PARA LOJA DE MATERIAIS DE CONSTRUÇÃO

Transcrição

1 PROJETO DE WEB SITE PARA LOJA DE MATERIAIS DE CONSTRUÇÃO São Lourenço do Oeste SC Fev. 2014

2 Sumário SITE EAMAIS MATERIAIS DE CONSTRUÇÃO... 3 INICIO... 5 Banner Principal... 5 Botões de Redirecionamento Rápido... 6 Mini-Banners de Redirecionamento... 6 Marcas Rodapé SOBRE PRODUTOS PROMOÇÕES SERVIÇOS CONTATO... 24

3 SITE EAMAIS MATERIAIS DE CONSTRUÇÃO Página Inicial da loja materiais de construção: Imagem 1: Página Inicial FONTE: Maicon Machado (fev. 2014).

4 4 Esta página (Imagem 1) será aberta em seu navegador utilizando seu endereço de dominio ( No topo do site, encontra seis botões de navegação. Estes por sua vez, apareceram em todas as páginas do site (não apenas na página inicial). Imagem 2: Botões do topo FONTE: Maicon Machado (Fev.2014). Como visto na Imagem 1 e Imagem 2, os seis botões são: INICIO; SOBRE; PRODUTOS; PROMOÇÕES; SERVIÇOS; CONTATO.

5 5 INICIO Clicando neste botão, ele o redirecionará a página principal (tela vista na Imagem 1), e listara todos seus itens da página como: Banner Principal; Botões de Redirecionamento Rápido; Mini-Banners de Redirecionamento; Marcas; Rodapé. Banner Principal Como pode ser visto na Imagem 1, o Banner Principal aparecerá no inicio da página, facilitando assim a vizualização do usuário. Imagem 3: Banner Principal FONTE: Maicon Machado (fev. 2014). Como observado na Imagem 3, o Banner Principal é constituido de uma imagem de fundo, um título (teste2 usado como exemplo nesta imagem), uma breve introdução (sublinha em cor branca como visto na imagem) e um botão VER MAIS que redireciona a uma página pré determinada pelo admistrador ou pessoa responsável por alimentar o sistema, que por sua vez (o sistema) disponibiliza Cadastra, Alterar e Excluir de 1 a n Banner Principal (

6 6 caso contenha mais que um Banner Principal cadastrado, estes aparecererão depois de um determinado tempo no lugar do atual ou caso o usuário clic nas flechas encontradas a direita ou a esquerda do banner). Botões de Redirecionamento Rápido Botões que serão utilizados pelo usuário para o redirecionamento rápido das seguintes páginas ( como pode ser vizualizado na Imagem 4): Imagem 4: Botões de Redirecionamento Rápido FONTE: Maicon Machado (fev. 2014). PRODUTOS; PROMOÇÕES; SERVIÇOS. O botão de PRODUTOS irá encaminhar o usuário a página principal de produtos da loja, onde encontrará uma infinidade de produtos cadastrados, no qual será explicado mais a seguir. PROMOÇÕES, neste botão o usuário será redirecionado à todos os produtos que estão em promoção, mas seus detalhes serão vistos mais à diante. E por fim o botão SERVIÇOS, que mostrará em sua páginas os serviços de pessoal técnico disponibilizado pela loja. Mini-Banners de Redirecionamento

7 7 Nesta parte da Página são encontrados seis itens (como mostra a imagem a seguir), cada qual redireciona a sua respectiva página. Imagem 5: Mini-Banners de Redirecionamento A imagem, o titulo e a breve introdução desses seis itens pode ser alterada da maneira desejada, porém é imposivel excluir um iten e cadastrar outros, o número fixo de itens é seis. A passar o ponteiro do mouse sobre um desses itens (Imagem 6) o mesmo será sublinhado e um botão escrito VEJA MAIS será mostrado.

8 8 Imagem 6: Mini-Banner selecionado Ao clicar em VEJA MAIS o usuário será redirecionado a página (link que será cadastrado pelo administrador) do Mini-Banner que clicou. A imagem 7 mostra o padrão de página dos Mini-Banners, mas nada impede que o administrador cadastre um link de um blog por exemplo ou qualquer outro.

9 9 Imagem 7 :Padrão de páginas do Mini-Banner FONTE: Maicon Machado (Fev.2014). No sistema o Administrador ou Mantedor de conteudo poderam cadastrar de um a n artigos nesta página, basta ter um titulo e um texto, a imagem é colocada a criterio de cada um, não é obrigatoria, mas uma imagem muda todo um contéudo. Os conteudos cadastrados de seus respectivos Mini-Banners apareceram listados a esquedar na página, a clicar em um, ele ficara mais destacado que os outros.

10 10 O topo e o rodapé fica o mesmo da página inicial (imagem 1). A única coisa que aparece agora é um pequeno menu de orientação como pode ser visto na Imagem 7 e Imagem 8, para que usuário saiba em que página está e que conteúdo está vendo. Imagem 8: Menu de Orientação Marcas Como foi visto na Imagem 1 e agora na Imagem 9, apareceram as imagem das marcas cadastrada no sistema. Imagem 9: Marcas As imagens seram passadas uma atraz da outra vagarosamente, mas também é possivel passalas da maneira desejada (indo e voltando), isto ocorre clicando nas fechas cinzas que se encontram no lado direito superior. Clincando na fleca do lado esquerdo, apareceram as imagem vindo do lado esquerto, e cliando na flecha do lado direito o oposto acontece.

11 11 Rodapé O Rodapé aparecerá em todas as páginas, sempre o mesmo rodapé, mas não é um simples rodapé, este por sua vez possui caracteristicas unicas e especiais como mostra a Imagem 10. Imagem 10: Rodapé Como visto na Imagem 10 estas caracteristicas são: Texto no rodapé; Integração com o Facebook; Cadastro na Newsletter. O texto do rodapé poderá ser cadastrado pelo administrador do site, onde precisará apenas de um titulo e um texto. Integração com o Facebook será utilizado pelo usuário caso o mesmo deseje curtir ou achar a página do site no facebook, muito util já que o Facebook é um ótimo meio de fazer plublicidade. Em cadastro de Newsletter, o usuário colocará seu e clicara em ENVIAR se ele quiser receber quaisquer s que o administrador do site enviar, mas isso será visto e explicado melhor posteriormente.

12 12 SOBRE Como visto na Imagem 2, ao clicar no botão SOBRE a página que fornece as informações da empresa (como visão, missão e historia da empresa) será aberta. Imagem 11: Página Sobre Se observar bem a Imagem 11, verá que é bastante semelhante a Imagem 7, isto ocorre por que estas duas páginas (assim como outras do Mini-Banner) possuem o mesmo padrão, uma técnica de engenharia de software aplicada a sistema web de qualidade.

13 13 Os itens que apareceram nesta páginas podem ser cadastrados no sismema de 1 a n itens, utilizando cadastro de titulo, imagem (se necessário) e texto.

14 14 PRODUTOS Após clicar no botão PRODUTOS (Imagem 2), a seguinte página será aberta: Imagem 12: Página Produtos

15 15 Está é a página de produtos (Imagem 12), como pode ser visto, à um menu a esquerda da imagem, este é responsável para filtrar os produtos em categorias, como não foi selecionado nenhum, todos os produtos seram mostrados. -Mas por que aparece apenas 6 itens se é para mostrar todos? R: Isto ocorre por que exite uma páginação, como mostra a Imagem 13. Imagem 13: Páginação FONTE: Maicon Machado Observe que a o numero da página se encontra no 1, caso o usuário clica-se em Próximo ou em qualquer outro número, outros itens seriam mostrados. Se o usuário desejar um produto especifico, basta ele clicar em uma derteminada categoria (esta cadastrada pelo administrador no sistema) que abrirá outras subcategoria, e então apareceram seus respectivos produtos (veja a Imagem 14 e Imagem 15 para endender melhor).

16 16 Imagem 14: Categoria As categorias cadastradas apareceram listadas uma em baixo da outra, se nenhuma for selecionada elas apareceram assim (fechadas com um simbolo de + ) que significam que poderam ser clicadas para aparecem suas subcategorias, se forem clicadas apareceram abertas (com um sinal de - ) mostrando suas subcategorias como mostra a Imagem 15.

17 17 Imagem 15: Subcategoria A Imagem 15 neste exemplo, o usuário clicou na categoria FERRAMENTAS e depois na subcategoria Ferramentas Manuais, com isto mostrou apenas os produtos que correspondem a essas categorias (veja a diferença da Imagem 15 e da Imagem 12). Observa-se também que o número de páginas agora é só um (1), isto acontece pois não à outras páginas com itens que se encaixem com essas categorias.

18 18 Após a filtragem dos produtos, se o usuário predente ver todas as informações do produto, basta ele passar o mouse em cima do produto desejado (Imagem 16) e clicar em VER MAIS. Imagem 16: Ver Produto Ao clicar em VER MAIS a página do produto escolhido será aberta (Imagem 17).

19 19 Imagem 17: Página Produto Escolhido

20 20 Na página do produto que o usuário escolheu aparece quatro campos bem importantes, que são: Imagens do produto; Titolo e texto do produto; Detalhes e informações tecnicas do produto; Produtos relacionados. Nas imagens do Produto, o administrador cadastrará de 0 à até 3 imagens do produto, que apareceram nesta página, neste exemplo as três imagens estão cadastradas, então é possivel clicar em qualquer uma delas para vizualizar melhor o produto. Titolo e texto, nesta área, foi cadastrada o nome e um textinho sobre o produto em si, claro que o tamanho do texto vai da pessoa que cadastrou o produto. Vale destacar que este texto pode ser curtido e conpartilhado pelo facebook se o usuário desejar. Em Detalhes aparecerá um texto detalhando melhor sobre o produto do que no texto anterior, e no campo ao lado informações técnica, ao clicado subtituira o texto de Detalhes e mostrara o texto das respectivas informações tecnicas cadastradas para este produto escolhido. Mais abaixo (Vizualizando a Imagem 17) exite o campo Produtos Relacionados, este campo mostra até quatro produtos que se encaixem com a mesma categoria do produto escolhido, este produtos poderam ser clicados (como ocorreu na Página de produtos Imagem 15 e Imagem 16, para abrir o produto escolhido pelo usuário) para ver o produto.

21 21 PROMOÇÕES Semelhante a Página de Produtos (Imagem 12), porem este aparecerá apenas os produtos que foram cadastrados em Promoção, mostrando assim seus valores. Imagem 18: Página Promoções

22 22 A ideia dos filtros de categoria é a mesma da Página de Produtos (Imagem 12), caso nenhum filtro seja escolhido aparecerão todos os produtos, caso escolha uma categoria e subcategoria, aparecerá os produtos em promoção dessa respectiva categoria escolhida. Caso o usuário escolha um produto em promoção, irá abrir a mesma tela da imagem 17, porem agora aparecerá o campo de valores à mais. Imagem 19: Valores FONTE: Maicon Machado Note que aparece agora, os valores anteriores da promoção e o valor atual na promoção, também aparece até quando está promoção permanecerá (acima do nome do produto).

23 23 SERVIÇOS Ao clicar em SERVIÇO (Imagem 2) a seguinte página abrirá: Imagem 20: Página Sobre Os menus a esquerda são semelhantes a Página de Produtos (Imagem 12), o usuário seleciona a categoria que encaixa no serviço desejado, e depois escolhe o serviço, aparecendo então o titulo do serviço (cadastrado no sistema) e o texto referente ao serviço escolhido.

24 24 CONTATO Este botão (CONTATO, Imagem 2) redimenciona o usuário à página para contato com a empresa (Imagem 21), que por sua vez é constituida de quatro partes fundalmentalmente importantes. Imagem 21: Página Contato

25 25 Estas Quatro partes são: Campo de contato; Campo de atendimento; Campo de endereço; Campo de contato online; No campo de contato (Imagem 22), o usuário poderá enviar um para contatar a empresa. Imagem 22: Campo Contato Neste campo o usuário fornecerá seu Nome*, *, Telefone e escreverá sua menssagem em Sua mensagem vai aqui.... Após estes campos preenchido, o usuário clica em ENVIAR, com isto feito a mensagem do usuário será enviada para o cadastrado pelo administrador para receber s do site. Em atendimento (imagem 23). Mostra os dias da semana e os horários de atendimento da empresa.

26 26 Imagem 23: Campo Atendimento Este campo é importante para o usuário/cliente saber qual o melhor dia para enviar s ou até mesmo ser atendido online. Já o campo de endereço (Imagem 24), é apenas um campo para informar o local onde fica este estabelecimento, telefone, fax, (outro de contato) da empresa, bastante util para novos cliente, pois este possui integração com o Google Maps. Imagem 24: Campo de Endereço

27 27 Pode ser observado que o local onde fica a empresa aparece com um balazinho apontando no mapa. Por fim, o campo de contato (Imagem 25) online é utilizado pelo usuário para a comunicação direta com a empresa (atendente da comunicação online), no qual poderá tirar duvidas ou entra em contato para diversos fins em tempo real. Imagem 25: Campo de Contato Online Ao clicar em ATENDIMENTO ONLINE a seguinte tela ira abrir:

28 28 Imagem 26: Tela de Contato Online Nesta etapa, o usuário fornecerá alguns dados utilizados pelos atendentes online, e escolherá o Departamento que necessita entra em contato o mais breve possivel. Feito isso, começa a conecxão com o chat. A Imagem 27 ilustra claramento como é feito este chat.

29 29 Imagem 27: Página de Chat Na Imagem 26 foi usado um exemplo de colecxão do usuário (Pedro) com o atendente (neste caso do site da eamais.com.br no departamento de suporte), à tela de chat é bastante semelhante à alguns chats de redes sociais, tornando a utilização do sistema ainda mais cofortante ao usuário.