Desenvolvimento Web TCC-00.226 Turma A-1 Conteúdo Projeto de Interface com o Usuário em HTML Professor Leandro Augusto Frata Fernandes laffernandes@ic.uff.br Material disponível em http://www.ic.uff.br/~laffernandes/teaching/2013.2/tcc-00.226 Aula de Hoje Maquetes Casos de uso Modelo de navegação Formulários HTML TCC-00.226 Desenvolvimento Web 2 1
Maquetes TCC-00.226 Desenvolvimento Web 3 Maquetes Útil no refinamento de casos de uso Criação de casos de uso reais Maquetes também são conhecidas como mapas de tela Desenho inicial das telas do sistema Podem ser desenhadas utilizando tecnologia diferente da que será utilizada pelo sistema Utilizaremos formulários HTML para a construção das maquetes TCC-00.226 Desenvolvimento Web 4 2
Exemplo de Maquete Janela A Campo A Campo B Botão A Botão B TCC-00.226 Desenvolvimento Web 5 Objetivos e Elementos Principais O objetivo da maquete é validar as funcionalidadese não o design propriamente dito Cada maquete deve ter um identificador único Possibilitar sua referência nos casos de uso e no modelo de navegação Campose componentes de controle também deve ter um identificador único no contexto da maquete TCC-00.226 Desenvolvimento Web 6 3
Casos de Uso TCC-00.226 Desenvolvimento Web 7 Caso de Uso Casos de uso define as interações entreatores e o sistema para que um objetivo seja atingido Ator é um humano que interage com o sistema O objetivo é a conclusão de uma tarefa Pode ser modelado por um diagrama UML de caso de uso Visão em alto nível da funcionalidade do sistema mediante uma requisição do usuário TCC-00.226 Desenvolvimento Web 8 4
Exemplo de Caso de Uso TCC-00.226 Desenvolvimento Web 9 Modelo de Navegação TCC-00.226 Desenvolvimento Web 10 5
Modelo de Navegação Também são conhecidos como mapas de navegação Possibilitam visualizar o sistema como um todo Usualmente, o número de maquetes de um sistema é significativo Representação gráfica Construídos através do diagrama de transição de estados da UML Utiliza a nomenclatura de janelas e campos definida nas maquetes TCC-00.226 Desenvolvimento Web 11 Exemplo de Modelo de Navegação Janela "Novo Pedido" Janela "Principal" Botão "Sair" Botão "Incluir pedido" Botão "Inserir Item" Botão "Remover Item" Botão "Remover" Diálogo "Inserção Diálogo "Remoção de Item" de Item" Botão "Inserir" Botão "Cancelar" Botão "Finalizar" Botão "Confirmar" Janela "Pagamento" TCC-00.226 Desenvolvimento Web 12 6
Formulários HTML TCC-00.226 Desenvolvimento Web 13 Formulários HTML Formulários são recursos definidos no HTML que permitem que uma página apresente campos de edição O usuário pode selecionar ou preencher o conteúdo destes componentes, que poderá ser enviado para o servidor Formulários HTML podem ser construídos utilizando ferramentas WYSIWYG ou através de descrição textual HTML.am (http://www.html.am/) - Gratuito KompoZer (http://kompozer.net/) - Gratuito etc. WYSIWYG : What You See Is What You Get TCC-00.226 Desenvolvimento Web 14 7
Formulários HTML O conjunto de campos de edição de um formulário HTML é limitado: Botões (submit e reset) Linhas de edição (texte password) Caixas de seleção (check boxes) Botões de opção (radio buttons) Listas de seleção (combo e listboxes) Área de texto (textarea) TCC-00.226 Desenvolvimento Web 15 Introdução a Formulários HTML O formulário é indicado pelas tags<form>e</form> O início e o fim não delimitam a área ocupada pelo formulário, mas os campos que pertencem a este A disposição dos campos depende das tagshtml apresentadas entre eles, tais como tabelas ou parágrafos TCC-00.226 Desenvolvimento Web 16 8
Introdução a Formulários HTML Um formulário está associado a uma URL A página ou programa indicado pela URL será ativado quando o usuário submeter os dados do formulário (atributo action) A página ou programa receberá os dados digitados pelo usuário em um formato especial O método de envio de parâmetros também é indicado no formulário (atributo method, valor get ou post) TCC-00.226 Desenvolvimento Web 17 Introdução a Formulários HTML A tag<input> indica um campo em uma página Os diversos tipos de campos são definidos de acordo com o valor do atributo type O nome do campo é identificado pelo atributo name O nome é utilizado para identificar o conteúdo do campo quando enviado para o servidor O nome de um campo deve ser único dentre os campos de um formulário TCC-00.226 Desenvolvimento Web 18 9
Linhas de Edição (Text e Password) O atributo typeindica o tipo da linha de edição: Linha de edição simples (text) Linha de edição de senha (password) o Cuidado ao usar senhas com o método get O atributo sizeindica o tamanho da linha de edição Tamanho na página, não número de caracteres O atributo valueindica o conteúdo inicial da linha TCC-00.226 Desenvolvimento Web 19 Botões (Submit e Reset) Atributo type igual a submit: O atributo value indica o título do botão Se o usuário clicar no botão, o navegador submete o formulário ao servidor Atributo type igual a reset: O atributo value indica o título do botão Se o usuário clicar no botão, o navegador retorna todos os campos do formulário para o valor padrão (inicial) TCC-00.226 Desenvolvimento Web 20 10
Exemplo de Linhas de Edição e Botões <form action="login.jsp" method=post> Login <input type=text name=login value=fulano size=10> <br> Senha <input type=password name=senha size=10> <input type=submit value=login> </form> TCC-00.226 Desenvolvimento Web 21 Caixas de Seleção (Check Boxes) Atributo type igual a checkbox: O atributo value é enviado para o servidor junto ao nome do campo quando este é marcado pelo cliente Se o campo não é marcado, o cliente omite (não envia) seu nome e valor como parâmetros para o servidor A atributo checkedindica que a checkboxdeve estar inicialmente selecionada TCC-00.226 Desenvolvimento Web 22 11
Exemplo de Caixa de Seleção <form action="teste.html" method=get> <input type="checkbox" name="marcado" value="mrc" checked="checked"> Click para marcar <br> <input type="submit" value="ok"> </form> TCC-00.226 Desenvolvimento Web 23 Botões de Opção (Radio Buttons) Atributo type igual a radio Um formulário pode ter diversos radio buttons com o mesmo nome Os radio buttons de mesmo nome formam um grupo onde no máximo um campo está selecionado Cada radio button deve conter um valor distinto, indicado no atributo value O valor do radio button é enviado para o servidor se o campo estiver selecionado TCC-00.226 Desenvolvimento Web 24 12
Exemplo de Botões de Opção <form action="teste.html" method=get> <input type="radio" name="tipo" value="0" checked="checked">tipo 0 <input type="radio" name="tipo" value="1">tipo 1 <input type="radio" name="tipo" value="2">tipo 2 <input type="radio" name="tipo" value="3">tipo 3 <br> <input type="submit" value="ok"> </form> TCC-00.226 Desenvolvimento Web 25 Listas de Seleção (Combo e List Boxes) Campo definido pela tag <select> O campo possui um nome, indicado pelo atributo name O campo possui diversas opções O atributo size indica o número de opções apresentadas ao mesmo tempo na página Se size for igual a 1 ou não for especificado, o campo aparecerá como uma combo box Se size for maior que 1, o campo será apresentado como uma lista de opções TCC-00.226 Desenvolvimento Web 26 13
Listas de Seleção (Combo e List Boxes) Opções de listas Cada opção é indicada por uma tag<option> dentro do escopo da tag <select> Cada tag <option> possui um valor, indicado no atributo value O valor é enviado para o servidor junto com o nome da lista, quando o navegador envia o formulário TCC-00.226 Desenvolvimento Web 27 Exemplo de Lista de Seleção <form action="teste.html" method=get> <select name="combo"> <option value="1">opcao 1</option> <option value="2">opcao 2</option> <option value="3">opcao 3</option> </select> <input type="submit" value="ok"> </form> TCC-00.226 Desenvolvimento Web 28 14
Exemplo de Lista de Seleção <form action="teste.html" method=get> <select name="combo" size="2" multiple="multiple"> <option value="1" selected="selected">opcao 1</option> <option value="2">opcao 2</option> <option value="3" selected="selected">opcao 3</option> </select> <input type="submit" value="ok"> </form> TCC-00.226 Desenvolvimento Web 29 Área de Texto (Text Area) Campo definido entre as tags <textarea> e </textarea> Uma área de texto é um conjunto de linhas de edição O número de linhas da área de texto é especificado no atributo rows O número de colunas da área de texto é especificado no atributo cols TCC-00.226 Desenvolvimento Web 30 15
Exemplo de Área de Texto <form action="teste.html" method=get> <textarea rows="2" name="area1" cols="20"> Texto contido na area de edição numero um. </textarea> <input type="submit" value="ok"> </form> TCC-00.226 Desenvolvimento Web 31 Escolha o campo adequado! Edição de texto de uma linha text deve ser utilizado sempre que for necessário obter pequenas quantidades de informação textual do usuário password deve ser utilizado caso a informação seja sigilosa o O texto não apareça na tela durante a sua digitação Edição de texto de múltiplas linhas textarea deve ser utilizado sempre que a quantidade de informação for maior que uma linha TCC-00.226 Desenvolvimento Web 32 16
Escolha o campo adequado! Seleção de uma opção radio button deve ser utilizado para selecionar uma opção dentre poucas (todas as opções cabem na tela) combo box é aplicado caso o número total de opções não caiba na tela list box também pode ser utilizado em situações onde se deseja selecionar uma única opção dentre várias o Aviso: pode poluir visualmente a interface com informações não relevantes TCC-00.226 Desenvolvimento Web 33 Escolha o campo adequado! Seleção de várias opções check box deve ser utilizado para selecionar mais de uma opção dentre poucas (todas as opções cabem na tela) list box é aplicado quando a quantidade total de opções não caiba na tela TCC-00.226 Desenvolvimento Web 34 17