Quadro de Avisos - IHC

1.111 visualizações

Publicada em

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Quadro de Avisos - IHC

  1. 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.comABSTRACTDevelopment of an application for Android mobile with thehighest level of user interaction, so we offer to implementtechnologies such as voice recognition and synthesis, chang-ing the proportions of the elements on the screen in order tofacilitate the way you use a bulletin board .Author KeywordsAndroid, Quadro de avisos On-Line, Dispositivos M´ veis, o ¸˜Interacao, Reconhecimento e S´ntese de Voz ıACM Classification KeywordsH.5.2 Information Interfaces and Presentation: Miscellaneous—Optional sub-category Figure 1. Quadro de Avisos Improvisado no FacebookGeneral 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. aAo 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 adotouum improvisado quadro de avisos. Esse quadro consiste na • Acessibilidade: Devido ao fato de que o p´ blico alvo seja upostagem 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. ¸ ¸˜ aLogo, propomos um quadro de avisos na WEB para dispos- • Cores: As cores escolhias para compor todo o aplicativoitivos m´ veis que utilizam o Sistema Operacional Android o foram pensadas baseando-se em um quadro de avisos doe 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 eexemplo, 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] opersonal or classroom use is granted without fee provided that copies arenot made or distributed for profit or commercial advantage and that copies • EditText: Respons´ vel pela entrada de texto do usu´ rio. a abear 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 specificpermission 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. 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. aTela PrincipalQuando 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 acriado um novo usu´ rio, entrar com um usu´ rio cadastrado a a Tela Lista de Quadroscomo, 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. 3. (a) Antes (a) Antes (b) Depois Figure 4. Tela Lista de QuadrosTela Criar RecadoEssa tela comp˜ em os componentes necess´ rios para o cadas- o atro dos usu´ rio como, por exemplo, EditText, Button, TextView. aVide figura [5].Tela Lista de RecadosCont´ m uma ListView para listar todos os recados associados e (b) Depoisao quadro selecionado. Vide figura[6]. Figure 5. Tela Cria RecadoTela Exibir RecadoExibe 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. 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 BoardH(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 talque H(x) = h. • user id: Identificacao do usu´ rio. ¸˜ a 4
  5. 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.NoticeEssa tabela armazena os recados de cada quadro do aplica- ¸ ˜ AVALIACOEStivo. ¸˜ ¸˜ 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 quePostar 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. 6. ¸˜Avaliacao de Comunicabilidade ¸˜Com a avaliacao de acessibilidade, procuramos entender comoos usu´ rios interagem com a interface do nosso aplicativo. aAtrav´ s da an´ lise dos resultados obtidos, ser˜ o descober- e a atos poss´veis problemas com o aplicativo e ser´ montado um ı aperfil semi´ tico do mesmo, segundo os usu´ rios. Assim o o asistema 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) Ownerguns dos problemas que as pessoas de 60 passam: Deficiˆ ncia ede 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/20113. Facebook: grupo UFOP-IHC, visitado em 03/07/2011 (c) Board User (d) Notice Figure 9. Tipos dos Atributos 6
  7. 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

×