Interrelation entre Spotify et l’usager : assemblage d’espaces

Elementos de interação são aqueles com os quais o usuário pode interagir na interface para executar as funcionalidades da aplicação. Os elementos de interação foram agrupados em três categorias distintas de acordo com seus respectivos propósitos. Essas três categorias são: elementos de ativação, elementos de entrada de

dados e elementos de seleção de dados.

Elementos de Ativação

Elementos de ativação são aqueles com os quais o usuário interage ativamente para disparar um evento na interface. As ações que o usuário realiza através desses elementos podem variar desde um simples clique até o posicionamento do mouse em um determinado elemento. Os eventos disparados pelas ações dos usuários, por sua vez, podem provocar a submissão de um formulário, exibir um painel escondido, abrir uma nova janela, etc.

3 A Linguagem de Fluxo de Interação para Geração de Casos de Teste 26

A Figura 7 ilustra exemplos de elementos de ativação definidos pela IFL4TCG. Os elementos de ativação mostrados são respectivamente: botão, link, texto, ícone e item de menu.

Figura 7 - Elementos de Ativação

Tabela 7 – Palavras-reservadas para elementos de ativação

Palavra Reservada Descrição

button

Componente de formulário que permite ao usuário submetê-lo ou realizar outra ação.

Em páginas HTML este componente é concretizado através da tag <input> com o atributo type igual a “button” ou “submit”. Alternativamente a tag <button> pode ser utilizada.

link

Fragmento de texto especial através do qual o usuário pode acessar outra página ou algum outro recurso disponível (arquivo de media, por exemplo). Em páginas HTML este componente é concretizado através da tag <a>.

text

Texto simples presente na interface e que pode conter qualquer estilo ou formatação. Apesar de textos poderem disparar ações na interface, eles raramente são utilizados para esse fim.

icon

Imagem que permite ao usuário acessar novas páginas ou disparar um evento na interface.

Em páginas HTML este componente é concretizado através da tag <img> e a busca por ela é feita através do nome do arquivo definido pelo atributo <src> ou pela descrição da imagem definida pelo atributo <title>.

menu item

Fragmento de texto especial que possui uma organização hierárquica e que permite ao usuário acessar outras páginas. Em HTML este componente pode ser concretizado através de várias tags tais como <li> ou <div>, obtendo a aparência característica através da aplicação de um estilo (CSS).

3 A Linguagem de Fluxo de Interação para Geração de Casos de Teste 27

As palavras-reservadas para cada elemento de ativação, bem como uma breve descrição sobre cada um deles são apresentadas na Tabela 7.

Elementos de Entrada de Dados

Elementos de entrada de dados são aqueles com os quais o usuário interage para prover informações à aplicação. Esses componentes são concretizados em HTML através de controles de formulários nativos ou estendidos. A Figura 8 exibe os elementos de entrada de dados definidos pela IFL4TCG.

Figura 8 - Elementos de entrada de dados

Tabela 8 – Palavras-reservadas para elementos de entrada de dados.

Palavra Reservada Descrição

textbox

Componente de formulário que permite ao usuário informar curtas sequências de caracteres numéricos e/ou alfanuméricos.

Em páginas HTML este componente é concretizado através da tag

<input> com o atributo type igual a “text”.

autocomplete

Componente de formulário que permite ao usuário informar curtas sequências de caracteres numéricos e/ou alfanuméricos para que uma lista de itens seja exibida.

Em páginas HTML este componente é definido através da tag

<input> com o atributo type igual a “text” e algum código JavaScript responsável por obter e listar as informações

relacionadas ao valor atual.

textarea

Componente de formulário que permite ao usuário informar longas sequências de caracteres numéricos e/ou alfanuméricos. Em páginas HTML este componente é concretizado através da tag

<textarea>.

datepicker Componente de formulário que permite ao usuário informar uma

3 A Linguagem de Fluxo de Interação para Geração de Casos de Teste 28

Os elementos de entrada de dados ilustrados na Figura 8 são, respectivamente: campo de texto simples, campo de texto com preenchimento automático (autocomplete), área de texto e seletor de data.

As palavras-reservadas para cada elemento de entrada de dados, bem como uma breve descrição sobre cada um deles são apresentadas na Tabela 8.

Elementos de Seleção de Dados

Elementos de seleção de dados são aqueles com os quais o usuário pode interagir para selecionar uma ou mais opções em um conjunto de opções. Da mesma forma que os elementos de entrada de dados, estes elementos são concretizados em HTML através de controles de formulários nativos ou estendidos. A Figura 9 ilustra os elementos de seleção de dados definidos pela IFL4TCG.

Figura 9 - Elementos de seleção de dados

Tabela 9 – Palavras-reservadas para elementos de seleção de dados

Palavra Reservada Descrição

combobox

Componente de formulário que permite ao usuário selecionar uma opção dentre um conjunto de opções. Em páginas HTML este componente é concretizado através da tag <select>.

listbox

Componente de formulário que permite ao usuário selecionar várias opções dentre um conjunto de opções. Em páginas HTML este componente é concretizado através da tag <select> com o atributo multiple definido.

radiogroup

Componente de formulário que permite ao usuário selecionar uma opção dentre um conjunto de opções. Em páginas HTML este componente é concretizado através da tag <input> com o atributo

type igual a “radio”.

checkgroup

Componente de formulário que permite ao usuário selecionar várias opções dentre um conjunto de opções. Em páginas HTML este componente é concretizado através da tag <input> com o atributo type igual a “checkbox”.

3 A Linguagem de Fluxo de Interação para Geração de Casos de Teste 29