PLANO DA SITUAÇÃO DE APRENDIZAGEM Nº 1 / 2012

Formulário 1 – Aluno
Unidade Operacional: Jaraguá do Sul
Curso: Curso de qualificação profissional de nível básico de
Modalidade: EaD
desenhista de produtos gráficos - Web Design
Turma:

Docente(s):

Unidade(s) Curricular(es): Projeto Web

Unidade(s) de Competência 1: Criar interfaces para web, aplicando metodologias e padrões de desenvolvimento, normas técnicas, de
qualidade, de saúde e segurança do trabalho e preservação ambiental.
( X ) Módulo Básico ( ) Módulo Introdutório ( ) Módulo Específico

Estratégia da situação de aprendizagem: ( X ) Situação-Problema ( ) Projeto ( ) Pesquisa ( ) Estudo de Caso

Título da situação de aprendizagem: Projeto e modelo de site para a empresa Toalhas Maciez

Descritivo da atividade desafiadora, contextualizada, com suas especificações técnicas:

Prezado Participante!
Você trabalha como web designer na empresa Web Solution, que atua na área de desenvolvimento de sites. A empresa
está há pouco mais de um ano no mercado, e já desenvolveu cerca de 40 sites voltados a pequenas empresas. O departamento
de vendas está sempre em busca de novos clientes e o senhor Osvaldo, que é o diretor da empresa, o convocou para assumir os
trabalhos em um novo projeto de desenvolvimento de websites.
O senhor Osvaldo passou o contato de uma empresa chamada Toalhas Maciez, que quer desenvolver um site e, para
tanto, você precisa fazer uma visita, a fim de fazer o briefing do projeto junto ao gerente da empresa, o senhor Vanderlei, que já
adiantou querer urgência no projeto.
Na data e horário marcados, você compareceu à empresa com seu questionário de briefing (anexo 1) em mãos, a fim de
fazer o levantamento de requisitos detalhados, pois conhece a importância deste primeiro passo dentro de um projeto de
desenvolvimento. O senhor Vanderlei mostrou-lhe a empresa para que assim você tenha uma ideia mais próxima do trabalho
que está iniciando, compreendendo melhor aquilo que a empresa deseja: uma maneira rápida e abrangente de apresentação de
seus produtos, principalmente suas novidades.
O senhor Vanderlei lhe explicou que este será o primeiro site da empresa Toalhas Maciez. Portanto, há uma grande
expectativa em torno dele, já que, até então, a empresa apenas possuía um catálogo de produtos. Durante a conversa, várias
informações importantes foram repassadas e você foi anotando as respostas mais relevantes, as quais seriam de grande ajuda
na hora de desenvolver o site. O senhor Vanderlei detalhou que a empresa produz toalhas de banho de alta qualidade, as quais
são voltadas para grupos distintos de clientes, como grandes hoteis e resorts, um mercado em grande expansão. Segundo o
gerente, a principal virtude da empresa é o atendimento diferenciado para cada cliente, atendendo aos pedidos de maneira
rápida e eficiente, o que inclusive é uma característica muito apreciada nos sites preferidos do senhor Vanderlei, ou seja,
facilidade e velocidade para que se tenha a informação desejada.
O que a empresa deseja inserir no site são informações gerais sobre os produtos, como qualidade, matéria-prima
utilizada, possibilidades de personalização, novidades, etc. Além de informações de contato, localização, descrição do segmento
de atuação, bem como seus clientes mais assíduos, que comprovam a qualidade de seus produtos. O site deve passar uma
imagem de seriedade e bom gosto, devem ser usadas as cores branco e marrom, que são predominantes na logomarca da
empresa.
O senhor Vanderlei também pediu agilidade no processo de desenvolvimento, pois com a demanda crescente, cada dia
de atraso representa clientes deixados para trás e, dessa maneira, a solicitação é que dentro de 10 dias ele esteja finalizado.
A parte final da conversa foi sobre a aparência do site, onde o senhor Vanderlei mostrou em um papel algo muito
semelhante a um layout do site que mais tarde você deverá desenvolver. No papel ficou demonstrado que: no canto superior
esquerdo fica a logomarca da empresa, ocupando aproximadamente 25% na largura e 30% na altura da página. Já do lado direito
da logomarca, deve estar um banner da empresa ocupando o restante da largura, porém com a mesma altura da logomarca.
Abaixo da logomarca ficará o menu do site, com a mesma largura, e a altura total do site. O corpo da página, onde serão
inseridas as principais informações do site fica ao lado do menu, com aproximadamente 85% de sua altura, sendo que a largura é
de, aproximadamente, 70% do comprimento do banner da empresa. Ao lado direito do corpo da página existe um banner de
novidades, que contém os 30% restantes na largura do banner superior e a altura é a mesma do corpo da página. Para finalizar,
abaixo do corpo da página fica um espaço para informações rápidas de contato, ocupando os 15% da altura restantes do menu
do site (que fica ao seu lado esquerdo) e com a largura de todo o corpo da página e do banner de novidades.
Após a reunião, você voltou à Web Solutions com o objetivo de desenvolver este projeto o mais breve possível para
atender o prazo de entrega e terminar a documentação necessária para que nenhuma das especificações fique de fora!

Com base no que você viu na contextualização da situação-problema:

1) preencha o modelo de Briefing de projeto para o desenvolvimento web, conforme Anexo 1;

2) desenvolva os wireframes de acordo com a contextualização da situação-problema;
3) utilize ferramenta computacional para a elaboração dos wireframes.
 Anexo 1 – Briefing Projeto para desenvolvimento web

Nome do entrevistado:

Nome da empresa:

O que a empresa deseja:

( ) Criar um website novo

( ) Reprojetar um website já existente

Conhecendo o negócio de seu cliente:

1) Qual o ramo de atuação de sua empresa, qual o objetivo dela e como está o mercado em que atua?

2) Quais os produtos ou serviços que sua empresa fabrica/oferece?

3) Qual o diferencial de sua empresa no mercado (qualidade, preços, serviços, tempo, etc.)?

4) Descreva o público-alvo da empresa.

5) Qual o conteúdo a ser inserido no site (contato, produtos, promoções, fotos, etc.)?

6) Qual a aparência desejável para o site?

7) Qual a imagem a ser transmitida aos usuários com o site (inovação, tradicionalismo, design elaborado, simplicidade, cores
ligadas à empresa, etc)?

8) Atualmente a empresa utiliza algum meio de divulgação e marketing (revistas, jornais, rádio, TV, folders, etc.)?

9) Qual o objetivo que a empresa busca atingir com o website (informar, vender, dar suporte, etc.)?

10) Qual a pretensão de tempo para que o site esteja finalizado?

11) Quais são as características que agradam em um site e que outras empresas do setor já estejam utilizando?

Relação de materiais, ferramentas e instrumentos:

 Livro didático.
 Ambiente Virtual de Aprendizagem.
 Microcomputador.
 Materiais complementares.
 Anexo 1 - Briefing Projeto para desenvolvimento web.
 PLANO DA SITUAÇÃO DE APRENDIZAGEM Nº1 / 2012
FORMULÁRIO 2 - ALUNO
DETALHAMENTO DA SITUAÇÃO DE APRENDIZAGEM
*FUNDAMENTOS TÉCNICOS E DESENVOLVIMENTO
CIENTÍFICOS OU
RESULTADOS **CAPACIDADES TÉCNICAS CARGA
ATIVIDADES CRITÉRIOS DE AVALIAÇÃO CONHECIMENTOS MEIO DE ENTREGA
ESPERADOS E/OU CAPACIDADES SOCIAIS, D P I G HORÁRIA
ORGANIZATIVAS E
METODOLÓGICAS
 Apresentação das
 Interpretar o escopo/briefing respostas do
do cliente. escopo/briefing do
 Interpretar os requisitos do cliente.
Etapa 1
Ler, Briefing projeto web.  Apresentação, no projeto  Tipos de
interpretar e preenchido,  Identificar o conceito visual web, do conceito visual Requisitos: Ambiente Virtual de
responder o de acordo esperado pelo cliente no esperado pelo cliente. funcionais e Aprendizagem (AVA).
briefing com a desenvolvimento do projeto  Identificação do conceito não-funcionais. x x 5h
proposto, de contextualiza web com foco no público- visual, de acordo com as  Técnicas e Verifique com o
acordo com a -ção alvo. necessidades do cliente. métodos de professor tutor a
contextualiza- apresentada. pesquisa. ferramenta para
 Interpretar o briefing do  Identificação de dados
ção  Conceitos de publicação.
apresentada. cliente, identificando dados importantes do usabilidade.
importantes do produto/serviço para
produto/serviço para definição dos wireframes,
definição dos wireframes. no briefing do cliente.
 Utilizar tipologia adequada  Identificação das
ao conceito do projeto web. tipologias adequadas ao
conceito do projeto web.
 Apresentação, no projeto
 Identificar o conceito visual web, do conceito visual
esperado pelo cliente no esperado pelo cliente,
Etapa 2
desenvolvimento do projeto com foco no público-alvo.  Arquitetura de
Elaborar o Wireframe do Ambiente Virtual de
wireframe do projeto web com foco no público-  Identificação de dados web design. Aprendizagem (AVA).
site, de desenvolvido, alvo. importantes do  Ferramentas x x 5h
acordo com a de acordo  Interpretar o briefing do produto/serviço no de arquitetura Verifique com o
contextualiza- com a cliente, identificando dados briefing do cliente, para para web professor tutor a
ção descrição. design. ferramenta para
importantes do definição dos wireframes.
apresentada.  Identidade publicação.
produto/serviço para  Apresentação dos visual.
definição dos wireframes. conteúdos no projeto  Conceitos de
 Definir a hierarquia de web, de acordo com a wireframe.
 importância (disposição) dos hierarquia de importância
conteúdos no projeto web, dos conteúdos, definida
conforme o produto/serviço pelo cliente.
do cliente.  Aplicação de técnicas de
 Identificar técnicas de ergonomia no projeto
ergonomia empregadas nos web.  Normas de
wireframes.  Aplicação de técnicas de ergonomia
 Aplicar técnicas de ergonomia no wireframe. visual.
ergonomia para o projeto  Apresentação dos  Princípios de
web. wireframes por meio de IHC.
 Técnicas de
 Utilizar ferramenta gráfica ferramenta gráfica.
ergonomia.
para desenvolvimento do  Definição do wireframe  Ferramentas
wireframe. utilizando técnicas de gráficas de
 Aplicar técnicas de diagramação. desenho.
diagramação para definir o  Apresentação do
wireframe do projeto web. wireframe de acordo com
 Elaborar o wireframe o escopo do projeto web.
conforme o escopo do
projeto web.
LEGENDA: D = Distância P = Presencial I = Individual G = Grupo

PLANO DE ESTUDOS CARGA HORÁRIA

AÇÕES A SEREM REALIZADAS (capítulos 2 a 5)
Leitura do livro didático 20h
Navegação no Ambiente Virtual de Aprendizagem
Realização dos exercícios de passagem
Pesquisa nos materiais complementares disponíveis na Biblioteca Virtual
Contato com o professor tutor em caso de dúvidas
Realização da situação de aprendizagem 1 10h
Total de Horas 30h