1. Quadro de Avisos para Android na WEB
Brayan Vilela Alves Neves Jeferson Lopes Dias Johnnatan Messias
Universidade Federal de Moreli Peixoto Afonso
Ouro Preto Universidade Federal de Universidade Federal de
grimphosmg@gmail.com Ouro Preto Ouro Preto
jeferson.moreli@gmail.com johnnatan20@gmail.com
ABSTRACT
Development of an application for Android mobile with the
highest level of user interaction, so we offer to implement
technologies such as voice recognition and synthesis, chang-
ing the proportions of the elements on the screen in order to
facilitate the way you use a bulletin board .
Author Keywords
Android, Quadro de avisos On-Line, Dispositivos M´ veis,
o
¸˜
Interacao, Reconhecimento e S´ntese de Voz
ı
ACM Classification Keywords
H.5.2 Information Interfaces and Presentation: Miscellaneous—
Optional sub-category
Figure 1. Quadro de Avisos Improvisado no Facebook
General Terms
¸˜
Interacao, Quadro de Avisos, Recursos Inovadores ¸˜
usu´ rio de alterar, caso queira, a proporcao das letras e com-
a
ponentes do aplicativo uma vez que o p´ blico alvo adotado
u
¸˜
INTRODUCAO pelo professor ser´ pessoas com idade acima dos 60 anos.
a
Ao criarmos um grupo no Facebook para utiliz´ -lo como
a
¸˜
meio de comunicacao entre os alunos matriculados na disci- ¸˜
ESTRUTURA DA APLICACAO
¸˜
plina de BCC-324 Interacao Humano-Computador percebe- O aplicativo foi desenvolvido pensando nos seguintes aspec-
mos que para organizarmos uma maneira de apresentarmos tos:
novas tarefas para os demais participantes, o grupo adotou
um improvisado quadro de avisos. Esse quadro consiste na • Acessibilidade: Devido ao fato de que o p´ blico alvo seja
u
postagem de um texto e na medida em que se acrescentam pessoas com mais de 60 anos.
novos avisos o recado era editado. Vide figura [1] • Usabilidade: Maneira com que o usu´ rio possa realizar
a
uma tarefa espec´fica no aplicativo.
ı
Logo percebemos que o usu´ rio n˜ o tinha total interacao
a a ¸˜
com o quadro de avisos devido ao trabalho para postar o • Comunicabilidade: qualidade relacionada a capacidade de
`
recado e ainda todos os recados eram exibidos, imagine ent˜ o
a a ¸˜
os usu´ rios perceberem e compreenderem as intencoes do
a ´
quando tivermos excessivos recados. Sem d´ vida essa n˜ o e
u designer atrav´ s da interface do sistema.
e
´ ¸˜
uma otima opcao.
• Seguranca: Protecao das senhas dos usu´ rios.
¸ ¸˜ a
Logo, propomos um quadro de avisos na WEB para dispos- • Cores: As cores escolhias para compor todo o aplicativo
itivos m´ veis que utilizam o Sistema Operacional Android
o foram pensadas baseando-se em um quadro de avisos do
e ainda fazendo uso de alguns recursos a fim de melhorar a ´
mundo real, que geralmente e de madeira.
¸˜
interacao com o usu´ rio atrav´ s da acessibilidade como, por
a e
exemplo, reconhecimento e s´ntese de voz e a capacidade do
ı COMPONENTES DO ANDROID UTILIZADOS
Para este aplicativos utilizamos os seguintes componentes:
Permission to make digital or hard copies of all or part of this work for
• TextView: R´ tulo informativo de texto. Vide figura [3]
o
personal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that copies
• EditText: Respons´ vel pela entrada de texto do usu´ rio.
a a
bear this notice and the full citation on the first page. To copy otherwise, or Vide figura [3]
republish, to post on servers or to redistribute to lists, requires prior specific
permission and/or a fee. • Button: Bot˜ o para uma determinada acao. Vide figura
a ¸˜
CHI 2011, May 7–12, 2011, Vancouver, BC, Canada. [3]
Copyright 2011 ACM 978-1-4503-0267-8/11/05...$10.00.
1

2. (a) Antes
Figure 2. Tela Principal
• ListView: Lista de itens na tela. Usamos para representar
¸˜
a exibicao dos quadros e recados. Vide figura [6]
• SeekBar: Componente respons´ vel pelo tamanho da proporcao
a ¸˜
´
dos componentes na tela, basicamente e uma barra hori-
zontal que onde podemos avacar ou recuar, geralmente em
¸
porcentagem. Vide figura [3]
• QuickActionBar: Barra horizontal oculta que aparece so-
mente no momento em que o usu´ rio cria um evento ao
a
¸ e `
tocar na tela que faca referˆ ncia a ela. Vide figura [4]
• QuickActionBarItem: Item da QuickActionBar. Vide figura
[4]
• ActionBar: Barra principal presente no topo em todas as (b) Depois
¸˜
janelas da aplicacao. Vide figura [5]
• ActionBarItem: Item da ActionBar. Vide figura [5] Figure 3. Tela Cria Usu´ rio
a
• AlertDialog: Caixa de di´ logo em que o usu´ rio pode sim-
a a
¸˜
plesmente selecionar uma determinada opcao. Vide figura ´
Tela Cria Usuario
[2] ¸˜
Nessa secao apresentaremos alguns dos componentes uti-
lizados para compor essa tela.
• LinearLayout: Trata-se basicamente da janela em que os
componentes s˜ o desenhados pela classe View do Android.
a • Nome: Campo que utilizada o EditText, componente re-
spons´ vel por permitir a entrada de textos pelo usu´ rio.
a a
• TabActivity: Abas que, geralmente, separam informacoes
¸˜
distintas mas que sejam aplicadas juntas a um mesmo con- • Senha e Confirmacao de Senha: Nesses campos fizemos
¸˜
texto. Vide figura [8] uso de EditText, por´ m, por ser campo em que o usu´ rio
e a
entra com uma senha, ocultamos os caracteres digitados.
• ProgressDialog: Semelhando a AlertDialog, por´ m e us-
e ´
ada para dar um FeedBack ao usu´ rio enquanto aguarda
a • SeekBar: Para alterar o tamanho da fonte.
¸˜
por uma requisicao. Vide figura [5] • Bot˜ o Criar: Representa uma determinada acao, que nesse
a ¸˜
´
caso e criar uma conta de usu´ rio.
a
Tela Principal
Quando o aplicativo for iniciado pela primeira vez ser´ ex-
a Vide figura [3].
ibido para o usu´ rio uma caixa de di´ logo para que seja
a a
criado um novo usu´ rio, entrar com um usu´ rio cadastrado
a a Tela Lista de Quadros
como, por exemplo, em outro dispositivo, ou ainda usar o ´
Essa tela e respons´ vel por exibir a lista de quadros das quais
a
¸˜
aplicativo Off Line de modo a servir-se de apenas informacoes o usu´ rio faz parte. S˜ o exibidas atrav´ s de um ListView.
a a e
´
sincronizadas anteriormente. Como e mostrado na figura [2]. Vide figura [4].
2

3. (a) Antes
(a) Antes
(b) Depois
Figure 4. Tela Lista de Quadros
Tela Criar Recado
Essa tela comp˜ em os componentes necess´ rios para o cadas-
o a
tro dos usu´ rio como, por exemplo, EditText, Button, TextView.
a
Vide figura [5].
Tela Lista de Recados
Cont´ m uma ListView para listar todos os recados associados
e (b) Depois
ao quadro selecionado. Vide figura[6].
Figure 5. Tela Cria Recado
Tela Exibir Recado
Exibe o recado selecionado pelo usu´ rio. Vide figura [7].
a
¸˜
Tela Informacoes
¸˜
Tela respons´ vel por exibir as configuracoes bem como as
a
¸˜
informacoes sobre o aplicativo. Vide figura [8].
Seguranca
¸
¸˜
Para tornar mais segura nossa aplicacao, optamos por uti-
lizar nas senhas do aplicativo um sitema de criptografia de-
nominado Criptografia Hash MD5, onde o valor da chave e ´
3

4. (a) Antes
Figure 7. Tela Exibir Recado
ESTRUTURA DO BANCO DE DADOS
¸˜
Nessa secao apresentaremos a estrutura das tabelas utilizadas
¸˜
no Banco de Dados para compor as informacoes armazenadas
do aplicativo.
¸˜
Para informacoes sobre os tipos de cada atributo das tabelas,
vide figura [9]
Owner
´ ¸˜
Essa e a tabela respons´ vel por armazenar as informacoes de
a
cadastros dos usu´ rios, tendo a seguinte estrutura:
a
• id: C´ digo de identificacao associado a cada usu´ rio reg-
o ¸˜ a
istrado.
(b) Depois • name: Armazenamento do nome.
Figure 6. Tela Lista de Recados • password: Armazenamento da senha.
• size: Armazenamento da Opcao de Tamanho de Fonte es-
¸˜
formado por 16 bytes. colhida pelo usu´ rio.
a
¸˜
Seja uma funcao hash H, e uma string qualquer, teremos que Board
H(x) ser´ o valor hash para a string x.
a a ¸˜
Tabela respons´ vel por amarmazenar as informacoes sobre
os quadros criados.
ı a ¸˜
As caracter´sticas b´ sicas de uma funcao hash s˜ o:
a
• board id: N´ mero associado a cada quadro criado, servindo
u
¸˜
1. O valor de entrada da funcao possui qualquer tamanho. ¸˜
como identificacao do mesmo.
¸˜
2. O valor de sa´da da funcao possui tamanho fixo.
ı • board owner: Atributo respons´ vel por associar o a identificacao
a ¸˜
` ¸˜
do quadro a identificacao do usu´ rio propriet´ rio do quadro.
a a
´
3. H(x) e relativamente f´ cil de ser computado, para qual-
a
quer valor de x. • board name: Armazena o no do quadro.
´ ¸˜
4. H(x) e uma funcao one-way. • board password: Armazena a senha de cada quadro.
´
5. H(x) e livre de colis˜ o.
a Board User
e ¸˜
Cont´ m os registros de associacao usu´ rio e quadro.
a
¸˜ ´
Uma funcao hash e dita one-way pois uma vez obtido o valor
´
hash h para uma string x, e computacionalmente imposs´vel
ı • board id: Identificacao do quadro.
¸˜
fazer o processo inverso, ou seja, encontrar um valor x tal
que H(x) = h. • user id: Identificacao do usu´ rio.
¸˜ a
4

5. • Especificacao das Sequˆ ncias das Acoes: Devo criar meu
¸˜ e ¸˜
usu´ rio, logo ap´ s criar o quadro de aviso onde quero
a o
postar o aviso.
• Execucao:
¸˜
1. Clicar em menu
2. Clicar em Quadro de Avisos
3. Clicar em Novo Usu´ rio para me cadastrar
a
4. Digitar meu nome e minha senha
5. Digitar minha senha novamente para confirmar
6. Escolher o tamanho da letra do aplicativo
7. Clicar em Criar
¸˜
(a) Opcoes 8. Clicar em “+“ para criar o quadro
9. Digitar o nome e senha do quadro
10. Selecionar “´ um novo quadro“
e
11. Digitar novamente a senha para confirmar
12. Clicar em Criar
13. Clicar no Quadro de Avisos criado
14. Clicar em Novo Recado
15. Digitar o recado
16. Clicar em Criar
¸˜
Golfo de Avaliacao:
• Percepcao: Apareceu uma faixa no quadro de aviso.
¸˜
• Interpretacao: Os dados apresentados nessa faixa corre-
¸˜
(b) Sobre spondem ao meu recado.
¸˜
Figure 8. Tela Informacoes • Avaliacao da meta: Entrei com as informacoes que eu
¸˜ ¸˜
queria no quadro de avisos, o mesmo foi postado. Com-
pletei a tarefa com sucesso.
Notice
Essa tabela armazena os recados de cada quadro do aplica- ¸ ˜
AVALIACOES
tivo. ¸˜ ¸˜
Utilizamos trˆ s tipos de avaliacoes para melhorarmos a interacao
e
¸˜
do aplicativo. S˜ o, portanto, Avaliacao de Usabilidade , Co-
a
• id: Identificacao de cada recado.
¸˜ municabilidade e Acessibilidade .
• text: Armazena o recado. ¸˜
Avaliacao de Usabilidade
• start: Tempo em que o recado e criado.
´ ¸˜
Com a avaliacao de usabilidade, tivemos como proposta avaliar
o nosso futuro quadro de avisos para o grupo de casais de
• board: Identificacao do quadro que cont´ m o recado.
¸˜ e ¸˜
Santo Algoritmo. Com esta avaliacao feita podemos agora
analisar o nosso software de acordo com as tarefas impostas
• owner: Dono do recado. e conclus˜ es tomadas, e assim melhorar o usabilidade do
o
software, para melhor atender os membros da comunidade.
• section: Secao a que pertence o recado.
¸˜
¸˜
Ainda, podemos integrar o quadro de avisos em outra aplicacao
¸˜
TEORIA DA ACAO que estamos desenvolvendo, o AlunoGUIDE de modo que
Postar um aviso no quadro de avisos os professores possam postar recados para uma determinada
¸˜
Golfo de Execucao: ¸˜
turma. Essa nova aplicacao fornecer´ ter´ o prop´ sito de
a a o
atender as necessidades dos alunos e professores da UFOP
• Formulacao da Intencao: Quero postar um aviso no quadro
¸˜ ¸˜ com data de lancamento prevista para o segundo trimestre de
¸
de avisos. 2011.
5

6. ¸˜
Avaliacao de Comunicabilidade
¸˜
Com a avaliacao de acessibilidade, procuramos entender como
os usu´ rios interagem com a interface do nosso aplicativo.
a
Atrav´ s da an´ lise dos resultados obtidos, ser˜ o descober-
e a a
tos poss´veis problemas com o aplicativo e ser´ montado um
ı a
perfil semi´ tico do mesmo, segundo os usu´ rios. Assim o
o a
sistema poder´ ser aperfeicoado para nosso p´ blico alvo.
a ¸ u
¸˜
Avaliacao de Acessibilidade
¸˜
Para melhor atender ao usu´ rio, levando em consideracao as
a
¸˜
limitacoes de pessoas com idade maior do que 60 anos, a
¸˜
aplicacao implementa alguns recursos voltados para a aces-
sibilidade. S˜ o eles: Reconhecimento de Voz, S´ntese de
a ı
¸˜
Voz e Opcoes de Tamanho da Fonte.
Vale lembrar que utilizando esses m´ todos eliminamos al-
e (a) Owner
guns dos problemas que as pessoas de 60 passam: Deficiˆ ncia
e
de Vis˜ o e at´ mesmo motora. Sendo que o recurso:
a e
´
• Reconhecimento de Voz: E aplicado como solucao para o
¸˜
¸˜
problema de coordenacao motora.
• S´ntese de Voz: Aplicado como solucao para o problema
ı ¸˜
de vis˜ o.
a
• Opcoes de Tamanho da Fonte: Tamb´ m aplicado como
¸˜ e
¸˜
solucao para o problema de vis˜ o.
a
ˆ
REFERENCIAS (b) Board
¸˜
1. Elton Silva Interacao Humano Computador: Slides da aula,
visitado em 03/07/2011
¸˜
2. Elton Silva Interacao Humano Computador: Cap´tulos da
ı
aula, visitado em 03/07/2011
3. Facebook: grupo UFOP-IHC, visitado em 03/07/2011
(c) Board User
(d) Notice
Figure 9. Tipos dos Atributos
6

7. (a) Reconhecimento de Voz
(b) S´ntese de Voz
ı
Figure 10. Reconhecimento de S´ntese de Voz
ı
¸˜
Figure 11. Opcoes de Tamanho da Fonte Ajustado a 35
7