Circuito Hidráulico Básico Detalhes da Produção

Transcrição

1 Circuito Hidráulico Básico Detalhes da Produção Prof. Dr. José Hamilton Chaves Gorgulho Júnior, Janeiro de 2012 O vídeo que simula uma reunião entre o designer instrucional e o cliente permite entender a função do storyboard. Porém, os pequenos detalhes que não puderam ser mostrados lá serão discutidos aqui. Primeira tela: objetivo No início do vídeo o cliente diz estou pensando em apenas duas telas, mas depois o designer instrucional sugere uma primeira tela onde seriam apresentados o objetivo e dados do desenvolvimento do programa. O cliente aceitou a sugestão e deu-se início à elaboração do layout da tela. O rascunho elaborado está na Figura 1. Figura 1 Esboço da primeira tela Na Figura 2 pode-se observar a versão final deste storyboard. O designer instrucional optou por representar o que foi esboçado usando recursos computacionais ao invés da imagem digitalizada do esboço. Nesta figura também é possível ver as anotações realizadas para as pessoas envolvidas na elaboração da tela descrita pelo storyboard. 1

2 Figura 2 Storyboard da primeira tela A primeira informação envolve o próprio cliente que, neste projeto, é o professor conteudista, que enviou as informações solicitadas pelo mostrado a seguir. Caro DI O nome da disciplina em que usarei o programa é EME610 Sistemas Hidropneumáticos. O texto para a tela que você sugeriu pode ser: Este programa tem o objetivo de apresentar todos os componentes que formam um circuito hidráulico básico mostrando para cada componente sua simbologia, um texto com a sua função e também uma fotografia. O programa também mostra o funcionamento do circuito. Aguardo o seu contato. Até mais... Prof. José Hamilton Chaves Gorgulho Júnior Universidade Federal de Itajubá (UNIFEI) Instituto de Engenharia de Produção e Gestão (IEPG) O designer instrucional fez algumas pequenas alteraçõe no texto e, em seguida, conversou com o designer gráfico que executou o seu trabalho: elaborou o layout final com base na sugestão do storyboard. Após a tela estar 2

3 pronta o revisor fez a sua análise e sugestões, que foram acatadas pelo designer gráfico e implementadas. Em seguida o designer instrucional apresentou a tela ao cliente que aprovou o resultado (Figura 3). Figura 3 Primeira tela Observa-se que as informações sobre a elaboração do projeto não foram colocadas nesta tela, pois o visual ficaria muito poluído. Decidiu-se pelo uso de uma janela que aparece quando se clica no botão sobre. A última anotação no primeiro storyboard (aprovação do layout pelo cliente) tem grande importância no projeto, pois trata-se da definição do visual. Como as demais telas compartilham do mesmo formato deve-se garantir a aprovação antes de seguir com o desenvolvimento. Uma alteração no layout depois de elaborado todo o projeto certamente traria um grande retrabalho. O trabalho do designer gráfico destaca-se quando se compara o storyboard com a tela final. Nota-se primeiro a definição das cores: fundo branco na barra superior com texto em azul claro e fundo cinza na área principal com texto em preto. Foram definidas bordas também em azul, mas com uma tonalidade mais profunda. As barras que separam os símbolos foram inclinadas, diferente do que sugeria o storyboard. 3

4 A barra inferior com os botões de avançar e recuar, sugeridos pelo designer instrucional, não foram utilizados. Nesta primeira tela não há para onde recuar. Além disso, a barra ocuparia um espaço importante nas telas seguintes. Segunda tela: componentes hidráulicos O storyboard inicial da segunda tela ficou bastante simples, como podese ver na Figura 4 (antes de serem preenchidas as informações na barra superior e direita). Basicamente tem-se a definição da posição do esquema hidráulico no lado direito e as informações sobre os componentes do lado esquerdo (nomes, texto descritivo e imagem). Figura 4 Storyboard incompleto da segunda tela O storyboard final, com as informações para a equipe de produção, está na Figura 5. Nota-se que falta uma informação para o ilustrador que, além de elaborar os símbolos em preto e em cores, deveria criá-los em cinza, como foi discutido na reunião apresentada no vídeo. Isso foi corrigido posteriormente. 4

5 Figura 5 Storyboard final da segunda tela O ilustrador teve como base para o seu trabalho o material impresso passado pelo cliente: o esquema da página 60 (Figura 6, esquerda) e o desenho dos símbolos individuais nas páginas 125 à 131. No lado direito da Figura 6 tem-se alguns dos desenhos elaborados pelo ilustrador. Figura 6 Material passado pelo cliente (esquerda) e alguns desenhos do ilustrador Nesta segunda tela também nota-se decisões tomadas pelo designer gráfico. A Figura 7 traz a primeira versão dessa tela, seguindo a sugestão do storyboard. 5

6 Figura 7 Versão inicial da segunda tela (para o manômetro) O designer gráfico observou que tanto o texto quanto a foto ficaram pequenos e também achou que o quadro com esses objetos estava simples. Por isso elaborou uma nova versão com o conceito de abas. Em uma aba tem-se apenas o texto (Figura 8) e na outra apenas a imagem (Figura 9). Figura 8 Segunda tela (texto do manômetro) Nota-se que a quebra de cantos do quadro deixou a tela mais elegante. 6

7 Figura 9 Segunda tela (fotografia do manômetro) Observa-se também que a decisão do designer gráfico em abolir os botões de avançar e retornar foi acertada. O avanço ocorre quando se clica no símbolo (Figura 10) e o recuo se dá pelo botão vermelho típico da interface do sistema operacional. Além disso, a eliminação da barra inferior deixou mais espaço para o conteúdo. Figura 10 Segunda tela (seleção dos símbolos) 7

8 Neste storyboard o pequeno texto dedicado ao programador (substituir texto e foto conforme o símbolo clicado) esconde uma grande parte do trabalho de criação. Na realidade texto e foto não são substituídos na tela: a tela toda é substituída. Porém, como o fundo se mantém igual tem-se a impressão de que apenas seu conteúdo sofre alteração. Na Figura 11 vê-se que o produto, que para o cliente e alunos, possui 3 telas, tem na verdade 33. Figura 11 Telas que compõe o produto final A Figura 12, que é parte de um storyboard de navegação, ajuda a compreender o processo. A segunda tela que o usuário vê pela primeira vez é o Slide 3. As informações referentes ao manômetro estão nos slides 14 e 15. No slide 3 o programador definiu que, quando se clica no símbolo do manômetro (destacado em vermelho) salta-se para o slide 14 (seta vermelha). Figura 12 Telas que compõe o produto final 8

9 No slide 14 há dois lugares que podem ser clicados. Clicando na aba imagem (destacada em azul) salta-se para o slide 15 ou clicando-se no botão vermelho (destacado em verde), retorna-se ao slide 3. De forma similar, no slide 15 tem-se a opção de retornar ao slide 14 (clicando na aba descrição, destacada em laranja) ou ao slide 3 (clicando no botão vermelho, destacado em verde). Obviamente, no slide 3, há a programação para os outros 10 símbolos, envolvendo outros 20 slides. Terceira tela: funcionamento A tela de funcionamento foi elaborada por meio de 3 storyboards. O primeiro descreve o que ocorre quando o circuito hidráulico é ativado (Figura 13) e utilizou o próprio desenho apresentado pelo cliente durante a reunião. Figura 13 Storyboard da terceira tela: acionamento Como pode-se observar na Figura 14, no início a tela apresenta um pequeno texto e possui apenas um símbolo que pode ser clicado: motor elétrico. Após o símbolo ser clicado a tela fica como mostra a Figura 15. Observa-se a mudança do texto, das cores e a alteração da posição da seta no símbolo da válvula limitadora de pressão. 9

10 Figura 14 Terceira tela: antes do acionamento do circuito hidráulico É possível notar que o símbolo do manômetro também sofreu alteração. Essa decisão foi tomada na reunião de aprovação com o cliente e, devido a isso, não está registrada no storyboard. Figura 15 Terceira tela: circuito hidráulico acionado A próxima etapa, que consiste na animação do avanço do atuador, foi registrada no storyboard da Figura

11 Figura 16 Storyboard do avanço do atuador Na tela da Figura 15, além do botão voltar, pode-se clicar apenas no símbolo do botão da válvula direcional. Quando isso ocorre o texto é alterado bem como a posição e as cores de alguns símbolos (Figura 17). A animação ocorre por 15 segundos e, ao final, ocorrem mudanças nos símbolos do manômetro e da válvula limitadora de pressão (Figura 18). Figura 17 Terceira tela: avanço do atuador 11

12 Figura 18 Terceira tela: atuador avançado A última etapa que ocorre na terceira tela é o recuo do atuador após o usuário clicar novamente no símbolo do botão da válvula direcional, que foi descrito no último storyboard (Figura 19). Figura 19 Storyboard do recuo do atuador Quando o símbolo é clicado o texto é alterado bem como a posição e as cores de alguns símbolos (Figura 20). A animação ocorre por 10 segundos e, 12

13 ao final ocorrem mudanças nos símbolos do manômetro e da válvula limitadora de pressão, voltando à condição da Figura 15. Figura 20 Terceira tela: atuador recuando 13