Manual do Usuário - prototipo online (base)
Contents
1. Clique no projeto que deseja abrir para utiliz lo ROT TIPO NLINE Abrir Projeto Selecione o projeto que deseja abrir Projeto sem titulo Projeto 1 Cancelar Figura 3 6 Lista de projetos 3 5 Criar Telas Uma tela o espa o onde ser poss vel inserir elementos de interface simulando uma interface de software ou seja este o espa o onde ser constru do o seu prot tipo de interface Para criar uma nova tela clique no bot o Nova Tela Figura 3 7 Projeto TelaSemNome Projeto sem t tulo _ TelaSemNome Figura 3 7 Bot o nova tela O sistema ir apresentar a caixa de entrada para defini o do nome que identificar a sua tela Figura 3 8 importante indicar nomes significativos para as telas pois os mesmos ser o utilizados para identific las durante seus relacionamentos com outras telas CROTOTIPO 10 NLIN MANUAL DE UTILIZA O Nova Tela Digite o nome da tela MovaTela Criar Tela b Cancelar Figura 3 8 Caixa de entrada dados da nova tela Insira um nome para a tela e clique no bot o Criar Tela Sua tela est pronta para ser utilizada 3 6 Editando as Telas Em cada tela criada Ver 3 5 Criar Telas ser poss vel realizar diversas a es modificando o conte do da tela com a inser o remo o e altera o dos aspectos dos elementos que est o sendo utilizados Para cada elemento existe2. Exportar AME 18 SA dO u a 18 3 14 Ufilizar o Help 19 ROT TIPO E ONLINE 1 CARACTERISTICAS GERAIS O sistema Prot tipo Online permite a cria o de prot tipos do tipo mock up podendo ser estes tanto de baixa fidelidade como tamb m de alta fidelidade Esta ferramenta est dispon vel de forma online podendo o usu rio acess la de qualquer lugar usufruindo de um sistema free E um diferencial que o sistema possui a possibilidade de exportar a navegabilidade do prot tipo criado para o formato XML a fim de possibilitar que o usu rio possa utilizar estes dados para fins distintos como por exemplo a an lise autom tica da navega o a ser realizada pelo usu rio no sistema A interface do sistema baseada em outras ferramentas de desenvolvimento de software como o Jude e o Visual Studio funcionando de forma similar a estes tipos de aplica es ROT TIPO gt ONLINE 2 INSTALA O A aplica o est dispon vel no CD que acompanha este trabalho e pronta para ser publicada Antes disto para instalar o sistema ser o necess rios os seguintes recursos e Software e Sistema operacional Linux ou Windows e Banco de dados HSQLDB e Servidor de aplica es Apache Tomcat 6 0 e Ambiente de desenvolvimento Eclipse JDK 1 5 e Hardware e configura o m nima recomend vel um computador com velocidade de 500Mhz 51
3. abrir o help clique no bot o Ajuda Figura 3 22 Elementos x Imagem TT Testo Hyperlink Testboy Figura 3 22 Bot o Ajuda
4. o tamanho do elemento ROT TIPO NLINE _ C TelaSemMome Figura 3 11 Redimensionando elementos 3 6 4 Trazer para frente Utilizando o bot o Trazer para Frente o elemento da tela que estiver selecionado ir ficar vis vel sobre os demais elementos que estiverem inseridos Selecione o elemento Figura 3 12 e clique no bot o Trazer para frente Trazer para frente Remover Elemento TelaSemNome Selecione Figura 3 12 Elemento selecionado O elemento fica vis vel sobre os demais elementos da tela Figura 3 13 ROT TIPO I NLINE a Abrir Projeto Projeto 8 Projeto sem titulo Telas _ TelaSembNome Figura 3 13 Elemento sobreposto aos demais 3 7 Propriedade do Elemento Dependendo do elemento selecionado existem caracter sticas diferentes que poder o ser modificadas Para modificar as caracter sticas do elemento selecionado clique no bot o Propriedades do Elemento Figura 3 14 Figura 3 14 Bot o propriedades do elemento Altere as caracter sticas que deseja e clique no bot o Salvar O elemento passar a possuir as caracter sticas indicadas Figura 3 15 15 ROT TIPO gt ONLINE Propriedades do Elemento Cor 008 7 Fundo Figura 3 15 Bot o salvar Na tabela 3 2 est o as op es de altera o para cada elemento Tabela 3 2 Op es de altera o dos eleme
5. 2Mb de mem ria RAM e disco r gi do de 2Gb resolu o m nima de 1024x768 No CD a aplica o est localizada em PrototipoQOnlineideploy e identi ficada como prototipoonline war 2 1 Publicando a aplica o Considere o seguinte cen rio antes de seguir os passos que se r o indicados e A m quina j deve possuir instalado o Java SE Development Kit JDK 1 5 ou superior e servidor de aplica o deve estar instalado e O diret rio na qual o servidor de aplica o est instalado dever ser representado por TOMCAT HOME Os passos a seguir servem tanto para ambiente Windows como para Linux e Passo 1 e Copie o arquivo prototipoonline war para dentro da pasta webapps que est localizada dentro da pasta TOMCAT HOME e Passo 2 CROTOTIPO ONLINE e Copie o arquivo hsgldb jar para dentro da pasta lib que est localizada dentro da pasta TOMCAT HOME e Passo e Abra o arquivo context xml localizado dentro da pasta TOMCAT HOMEiconf e adicione a seguinte entrada den tro da tag Context como demonstrado abaixo lt Context gt lt Resource name dbc PrototipoOnlineDS auth Container type javax sgl DataSource driverClassName org hsgldb jdbcDriver url dbc hsgldb hsgl Mocalhost prototipoonline db maxActive 20 maxlidle 4 gt lt Context gt e Passo 4 e Copie o conte do da pasta IPrototipoO
6. 3 2 e a tela de Login do sistema ser apresentada ROT TIPO f NIN p gina hktp localhost 8080 diz Figura 3 2 Bot o OK 3 2 Acessando o sistema o acessar o sistema voc pode criar seus prot tipos de interface e salvar seus projetos de forma a poder recuper los estando em qualquer outra m quina remota Para acessar o sistema necess rio previamente estar cadastrado Ver 3 1 Realizando o cadastro no sistema Estando cadastrado acesse a url principal insira seu nome de usu rio sua senha e clique no bot o Login Figura 3 3 Inserindo os dados corretos o sistema ir permitir o seu acesso e a tela principal ser apresentada ONLINE Login Para acessar o sistema entre com os seus dados de acesso choque em Loan caso voc n o possua um usuario sistema chique em Novo Usuario para realizar o cadastro usu rio senha Login Novo Usu rio Figura 3 3 Tela Login ROT TIPO gt ONLINE 3 3 Criando um Projeto Para criar um novo projeto clique no bot o Novo Projeto Figura 3 4 _ TelaSemNome Figura 3 4 Bot o novo projeto 3 4 Abrindo um Projeto Tendo algum projeto j salvo no sistema Ver 3 10 Salvar Projetos Para abri lo clique no bot o Abrir Projeto Figura 3 5 TelaSemNome Figura 3 5 Bot o abrir projeto O sistema ir apresentar a lista de projetos existentes Figura 3 6
7. PONTIF CIA UNIVERSIDADE CAT LICA DO RIO GRANDE DO SUL FACULDADE DE INFORM TICA CURSO DE BACHARELADO EM SISTEMAS DE INFORMA O ROT TIPO ONLINE MANUAL DE UTILIZA O Gelson Gentil Ferreira Abr o Ricardo Francisco Luckei Orientadora Profa Milene Selbach Silveira Porto Alegre 2008 CONTE DO CONTEUDO 2 1 CARACTERISTICAS GBERAL S u u ss raK ayda asss 3 INSTALACAO i au 4 2 1 P ublicando A anda 4 SUTILIZANDO O SISTEMAS 6 3 1 Realizando o cadastro no sistema 6 O SISTEM 7 Criando a u 8 34 Abrindoum uu u uy u sss 8 5 5 Criar Tel ry uuu 0 uk Qu i au a 9 3 0 Editando 10 6 Insermdo Elementos na Tela au u uuu E 10 3 0 2 Excluindo Elementos na Telegram 12 3 6 3 Determinar a posi o e tamanho do elemento 12 4 Trazer pala uuu sas akaqa 13 3 Propredadedo 14 58 Similar Nayeeaqeqo0o u u as 16 39 Salvar Lekin Susa a az ma 16 3 10 SalarProje1l00 u 17 sa sda 17 3 12
8. ado para representar escolha nica para determinada op o BOT O Utilizado para representar uma a o a ser tomada pelo sistema Utilizado para inserir textos explicativos referentes s id ias relativas aos aspec COMENT RIO E tos da interface criada ou criar lembretes BOX Utilizado para determinar uma regi o da interface com cor diferenciada ou com um objeto diferenciado SEPARADOR Utilizado para dividir regi es da interface ABA DE TAB Utilizado para identifica o de tabelas TABELA Utilizado para representar dados na forma de tabela 3 6 2 Excluindo Elementos na Tela Para excluir um elemento da tela clique no elemento desejado para selecion lo e ap s clique no bot o Remover Elemento Figura 3 10 brir Projeto Nowo Projeto Nowa Tela Salvar Projeto SalwarTela Trazer para frente Esto O T 7 TelaSemblome NovaTela 8 Projeto sem titulo TelaSemblome Figura 3 10 Selecionando e Removendo Elementos 3 6 3 Determinar a posi o e tamanho do elemento o inserir um elemento Ver 3 6 1 Inserindo elementos na tela o elemento ir conter uma posi o e tamanho default Para posicionar o elemento em determinada regi o da tela selecione o elemento desejado e o arraste at o ponto desejado Para modificar o tamanho de um elemento clique no local indicado vide exemplo da Figura 3 11 e movimente o mouse para diminuir ou aumentar
9. emblome Figura 3 18 Bot o salvar projeto 3 11 Fechar Tela Para fechar a tela clique no bot o Fechar Tela referente tela que voc deseja fechar Figura 3 19 Abrir Projeto Novo Projeto Nova Tela Salvar Projeto SalvarT ela Trazer para trente Projeto Projeto sem titulo _ MovaTelal _ TelaSemblome Figura 3 19 Bot o fechar tela 3 12 Exportar XML XML um padr o recomendado pela W3C http www w3c br que suporta internacionaliza o extensibilidade composi o e persist ncia porque o formato aberto e tamb m pode ser lido por qualquer um e permite que os dados de seu prot tipo possam ser utilizados para outros fins Para gerar o arquivo XML do seu projeto clique no bot o Exportar XML Figura 3 21 Propriedades do Elemento Figura 3 21 Bot o exportar XML O sistema ir disponibilizar o arquivo com a navegabilidade do prot tipo para download Agora falta apenas salvar o arquivo em seu computador 3 13 Sair do Sistema o sair do sistema caso queira acess lo novamente ser necess rio realizar o login Ver 3 2 Acessando o sistema Para sair clique no bot o Sair Figura 3 20 Figura 3 20 Bot o sair _ SO ONLINE 3 14 Utilizar o Help do Sistema O help do sistema ir ajudar nos casos de d vidas em rela o a o a ser tomada para executar alguma funcionalidade Para
10. m determinadas caracter sticas que podem ser modificadas Ver 3 Propriedades do Elemento 3 6 1 Inserindo Elementos na Tela Para inserir um elemento na tela clique no elemento desejado Figura 3 9 ROT TIPO 11 ONLINE Elementos X Imagem Tento lt Huperlink E Tenthom E Testarea RB Z checkbox Combobos Multi select Radio button Bot o Coment rio E Separador Aba de tab Ta Tabela Figura 3 9 Elementos dispon veis tabela 3 1 relaciona e indica a utilidade dos elementos dispon veis Tabela 3 1 Elementos dispon veis UTILIDADE IMAGEM Utilizado para representar a localiza o de uma imagem no layout da interface TEXTO Utilizado para inserir textos diversos em determinado local da interface iliz ra representar um apontador para outro local da interface ou outra HYPERLINK colo bp b P P TEXTBOX Utilizado para representar o local de inser o de dados pelo usu rio Utilizado para determinar uma rea de texto diferenciada ou representar rea TEXTAREA de inser o de dados CHECKBOX Utilizado para representar escolha m ltipla para determinadas op es existen tes S COMBOBOX Utilizado para representar escolha nica para determinada op o MULTI SELECT para representar escolha m ltipla para determinadas op es existen ONLINE UTILIDADE UTILIDADE RADIO P3 BUTTON Utiliz
11. nlineidatabase para uma pasta de seu computador e execute o arquivo abre banco bat e Passo 5 e Inicie o servidor de aplica o Finalizando estes passos teste o acesso a aplica o abrindo o browser e entrando com o en dere o http localhost 8080 prototipoonline logindo ap s este passo a tela de login do sistema dever ser exibida ROT TIPO 6 SS ONLINE 3 UTILIZANDO O SISTEMA Para ter acesso ao sistema necess rio apenas acessar a url http localhost 8080 prototipoonline login do e realizar o seu cadastro Caso j possua cadastro no sistema basta acessar a mesma url e realizar o login com seu nome de usu rio e senha 3 1 Realizando o cadastro no sistema o realizar o cadastro voc estar apto a acessar e utilizar o sistema para construir seus prot tipos de interface Para realizar o cadastro ao acessar a url http localhost 8080 prototipoonlinelogin do clique no bot o Novo Cadastro A tela de cadastro ser apresentada Figura 3 1 e ent o indique seu nome e e mail e insira um nome de usu rio e uma senha Clique no bot o Cadastrar para finalizar o processo ROT TIPO ONLINE Novo Usu rio Fara cadastrar um novo usu rio no sistema preencha os campos abaixo e chique no bot o Cadastrar Nome Ema Usu rio Senha Cadastrar Cancelar Figura 3 1 Cadastro Seu cadastro ser realizado clique em Figura
12. ntos PROPRIEDADES DO ELEMENTO gt lt gt lt m 5 NINE 3 8 Simular Navega o Ap s completar o layout do prot tipo da interface ser poss vel simular a utiliza o do prot tipo criado Com a s tela s de prot tipo aberta s clique no bot o Simular Navega o Figura 3 16 Para sair do simulador feche a aba ou a tela do browser Nova Tela Figura 3 16 Bot o simular navega o 3 9 Salvar Telas Para salvar a tela que est sendo utilizada clique no bot o Salvar Tela Figura 3 17 e no bot o OK para retornar ao sistema e RR A Da ip des Em n pe UA Sea SRT k a im s por a sI Abrir Projeto Hovo Projeto Mova Tela Salvar Projetof SalvarTelalD Trazer para frente Projeto NovaTela Projeto sem titulo 7 NovaTelal TelaSemiblome Figura 3 17 Bot o salvar tela ROT TIPO 17 NLINE 3 10 Salvar Projetos Para salvar o projeto clique no bot o Salvar Projeto Figura 3 18 e no bot o OK para retornar ao sistema a E abrir Projeto Mova Tela Salvar Projeto SalvarTela Trazer frente Frojeto TelaSemblo 2 Projeto sem titulo NovaTelal TelaS
Download Pdf Manuals
Related Search