UMA PROPOSTA DE MODELO DE INTERFACE INTEROPERÁVEL PARA WEB, TV DIGITAL E DISPOSITIVOS MÓVEIS Maria Lúcia Kroeff Barbosa; PGIE, UFRGS; malukroeff@yahoo.com.br Valter Roesler; Instituto de Informática, UFRGS; roesler@inf.ufrgs.br Eliseo Reategui; PGIE, UFRGS; eliseoreategui@gmail.com
INTRODUÇÃO Tecnologia Mundo Globalizado Educação 2
81,59% (celulares) 98% (TV) 18% (internet em casa) Objetivo Propor diretrizes para a concepção de interfaces educacionais de maneira que possam ser replicadas de forma adequada em cada uma das plataformas. http://www.teleco.com.br/ncel.asp http://www.nic.br/imprensa/releases/2009/rl-2009-05.pdf 3
Diretrizes Recomendações de Interoperabilidade Teoria da Carga Cognitiva Leis da Gestalt Imagens e Animações Texto / Cores Orientação / Navegação Estética e Afetividade Interação 4
VALIDAÇÃO DA INTERFACE Curso VIVA SAUDÁVEL VEL OA sobre a melhoria da qualidade de vida através da alimentação saudável e da prática regular de atividade física. Pensado para jovens entre 12 e 15 anos (sem censura); Módulo 1 (motivar os alunos à reflexão sobre seus hábitos alimentares e importância do exercício físico); Atividades como QUIZ, vídeo e testes para verificação do índice de massa corporal. 5
Avaliação Preliminar Implementação: Texto: combinação de XHTML com folhas de estilo.css Imagens: JPEG Vídeo: H.264 AVC (web e TV Digital) e 3GP com compressão H.263 (celulares) Áudio: geração e armazenamento em formato AAC (W3C, 2008) (BBC, 2005) (ABNT, 2008) (3GPP, 2007) 6
Cores 1. Fundo de tela: padrão de tonalidades similar para as três plataformas, prevalecendo a cor preta para TV Digital e tonalidades um pouco mais claras (cor cinza) para Web e celulares. 2. Cores de fonte: o amarelo âmbar, com alternância de palavras em branco ou vermelho para destaque. 3. A cor do índice foi escolhida por questões estéticas e pelas sensações que tal cor transmite, pois verde é a cor da natureza, do frescor e da vida, além de representar a esperança. 7
ÍNDICE Web Celular 8
Módulo 1 (1ª tela) Celular Web 9
Cores 4. Para navegação ão, optou-se por setas de voltar e avançar ar e botões coloridos vermelho, verde, amarelo e azul. 5. Opção de deixar cor e texto foi para acessibilidade a pessoas daltônicas e que, porventura, poderiam ter alguma dificuldade de reconhecer as cores dos botões. 10
Módulo 1 (Para( Fazer) Celular ( Na Família lia ) 11
Módulo 1 (Para( Fazer) TV Digital ( Na Lanchonete ) 12
Módulo 1 (Sobre( o IMC) TV Digital Web 13
Módulo 1 (Sobre( o IMC) Web Celular 14
Layout 1. Espaços em branco separam grupos de informações relacionadas. 2. Poucos elementos em cada tela, evitando sobrecarga de informação. 3. Utilização de princípios da Gestalt, na qual vê-se o botão vermelho e parte do texto escrito em vermelho, trazendo a percepção de unidade ao conjunto botão-rótulo. 3. 3. 1. 1. Web Celular TV Digital 15
Módulo 1 (Vídeo( deo) Celular Clique na imagem 16
Orientação e Navegação Manter aparentes somente as setas ou botões que o aluno pode usar, além de encontrá-los sempre no mesmo lugar e com as mesmas cores. Um diferencial quanto ao posicionamento da barra de navegação é encontrado em motivo das recomendações para cada plataforma (BBC, 2005) (W3C, 2008). 17
Orientação e Navegação Barra de Navegação na Web (superior) Barra de Navegação no Celular (opção superior e inferior) Barra de Navegação na TVD (inferior) (BBC, 2005) (W3C, 2008) 18
Afetividade e Estética tica Vivita e Betinho interface afetiva (Web) Vivita tristinha, com má-digestão (celular) Betinho dando orientações e despedindo-se (TV Digital) 19
CONSIDERAÇÕES FINAIS 1. Principal contribuição deste artigo foi o desenvolvimento e a implementação de um modelo de interface para objetos de aprendizagem que visa manter as mesmas características visuais e interativas independente da plataforma que forem acessados, no caso, Web, TV Digital e dispositivos móveis. 20
CONSIDERAÇÕES FINAIS 2. Benefícios de uma interface interoperável: facilidade de manutenção (visto que o conteúdo é único), e otimização de armazenamento (visto que o mesmo conteúdo é reutilizado para todas as plataformas). 21
Algum comentário ou pergunta? Foi muito legaaaaaaaal Tchau, tchau! 22