UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB

Tamanho: px
Começar a partir da página:

Download "UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB"

Transcrição

1 UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB Padrões de Projeto de Interface para Aplicativos Android para o Google TV Nelson Antonio Barbosa Prof. Me. Munif Gebara Júnior Orientador Maringá - Paraná 2013

2 1 UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB Nelson Antonio Barbosa Padrões de Projeto de Interface para Aplicativos Android para o Google TV Trabalho submetido à Universidade Estadual de Maringá como requisito para obtenção do título de Especialista em Desenvolvimento de Sistemas para Web.

3 2 UNIVERSIDADE ESTADUAL DE MARINGÁ CENTRO DE TECNOLOGIA - DEPARTAMENTO DE INFORMÁTICA ESPECIALIZAÇÃO EM DESENVOLVIMENTO DE SISTEMAS PARA WEB Nelson Antonio Barbosa Padrões de Projeto de Interface para Aplicativos Android para o Google TV Prof o. Me. Munif Gebara Júnior (Orientador) Prof o. Dr. Yandre Maldonado e Gomes da Costa Prof o. Me. Flávio Rogério Uber Ass.: Ass.: Ass.: Maringá - Paraná 2013

4 Dedico este trabalho à minha esposa, Teresa Kazuko Teruya e, à minha filha Vanessa Retrovato Barbosa. 3

5 4 Agradecimentos Ao meu Orientador Professor Me. Munif Gebara Júnior, pelo apoio e confiança; Aos Professores Dr. Yandre Maldonado e Gomes da Costa e Me. Flávio Rogério Uber, pela aceitação em participar da banca de defesa desta monografia; Ao Coordenador do curso Professor Dr. Wesley Romão; Aos professores do DIN - Departamento de Informática da UEM que compartilharam seus conhecimentos; Aos colegas da turma, pela amizade e compartilhamento de conhecimentos.

6 5 Lista de Figuras Figura 1 estatística da evolução dos celulures no mundo 11 Figura 2 layout otimizado para TV 35 Figura 3 resoluções e dimensões 37 Figura 4 seleção e foco 43 Figura 5 padrão de grade para navegação UI 44 Figura 6 alinhamento de rolagem e layout de grade 45 Figura 7 tamanha de telas comparativas 46 Figura 8 zonas de aplicação 47 Figura 9 exemplo de aplicação 48 Figura 10 zonas do aplicativo de exemplo 49 Figura 11 zonas de TV 50 Figura 12 padrões de TV 50 Figura 13 zona Tablet 51 Figura 14 patterns Tablet 51 Figura 15 zonas de telefone 52 Figura 16 padrões de telefonia 52 Figura 17 padrões e zonas 53 Figura 18 padrão prateleira de conteúdo 54 Figura 19 padrão grade de conteúdo 54 Figura 20 padrão lista de conteúdo 55 Figura 21 padrão lista de conteúdo em cascata 55 Figura 22 padrão detalhe restante 56 Figura 23 padrões de guias de subseção 56 Figura 24 tipo de padrão de filtro 57 Figura 25 tipo de padrão de filtro ampliado 58 Figura 26 várias listas de opções, minimizada 58 Figura 27 várias listas de opções, expandida 59 Figura 28 a zona de organização de padrão desejável 60 Figura 29 zona indesejável e padrão de layout 61

7 6 Lista de Tabelas Tabela 1 categoria dos padrões projetos (GOF) 17 Tabela 2 padrões projetos criacionais 17 Tabela 3 padrões projetos estruturais 18 Tabela 4 padrões projetos comportamentais 18 Tabela 5 padrões de navegação primários e secundários 19 Tabela 6 Outras categorias de padrões e antipadrões de interface 20 Tabela 7 padrões de projeto para o Android 21 Tabela 8 antipadrões de projeto para o Android 29 Tabela 9 padrões de Java JEE 30 Tabela 10 configurações do Android para Google TV 34

8 7 Sumário 1 Considerações Iniciais Introdução Objetivo Geral Objetivo Específico Definição do Problema Justificativa Motivação Metodologia 14 2 Fundamentação Teórica 15 3 Definição e Contextualização Designers Patterns Google TV The 10ft Environment (Meio Ambiente 10 pés) TVs Displays (Displays de TV) Sound and the UI (O som e a interface do usuário) Navigation Design (Projeto de Navegação) User Interface Desing (Projetos de interface do usuário) UI Zones and Patterns (zonas de interface do usuário e padrões) UI Performace (Desempenhos UI) Additional Tips (Dicas adicionais) 62 4 Resultado da pesquisa 64 5 Considerações finais 66 Referência bibliográfica 68

9 8 Resumo Este estudo apresenta uma pesquisa bibliográfica sobre os padrões de projetos existentes e utilizados no desenvolvimento de aplicativos em Android. O objetivo é investigar os padrões de projetos de interface existente e utilizados no desenvolvimento de aplicativos para plataforma Android Google TV. Descreve a existência de vários padrões de projetos utilizados no desenvolvimento de projeto de software, nas diversas linguagens de programação disponíveis no mercado. Aponta um conjunto de recomendações sobre padrões de projetos de interface aplicados no desenvolvimento de aplicação para o Google TV. Palavras-chaves: Padrões de projetos; Aplicativo; Android; Plataforma; Desenvolvimento.

10 9 Abstract This paper presents a bibliography research about project patterns developed for use in Android applications. The main purpose of this study is to investigate the interface patterns used in platform for building Android Google TV applications. It describes the existence of many project patterns used in the building of software project and in the variety of programming languages available in the market. It indicates an entirety of recommendations about interface Android project patterns for use in the building of Google TV. Keywords: Project patterns; application; Android; Platform; Building.

11 10 1 Considerações Iniciais 1.1 Introdução O mercado para aplicativos móvel tem crescido nos últimos tempos, uma tendência que despertou o interesse das maiores empresas e de profissionais de desenvolvimento de software que tem como objetivo criar aplicações para comercializá-las. A gama de opções atualmente em um dispositivo móvel é imensamente superior alguns anos atrás (MORAIS, 2012, p. 1) com mais recursos do que antes. Segundo Lecheta (2012, p.16) a disputa no mercado de mobilidade está extremamente acirrada, com diversas inovações e lançamentos acontecendo em todos os lugares, e mesmo os especialistas sentem dificuldade em acompanhar tamanha evolução. A figura 1 ilustra um gráfico com a evolução dos celulares no mundo. Figura 1 estatística da evolução dos celulures no mundo (Teleco Inteligência em Telecomunicações. Estatísticas de Celular no Mundo, 2013). O desenvolvimento de aplicativos móveis para ios (sistema operacional) da Apple, Android do Google, e também para plataforma do Google TV É um mercado grande, que acena com oportunidades a quem se interessar por ele (Aplicativos para celular, Vida Digital, 03/06/2011).

12 11 Para efetuar a publicação de aplicativos no Google Play é preciso criar uma conta com o perfil de desenvolvedor, também é necessário concordar com o contrato de distribuição do desenvolvedor e pagar um taxa de registro com cartão de crédito no Google Checkout. Se não possuir uma conta no Google Checkout, é preciso configurar uma durante o processo de registro. Para vender aplicativos no Google Play precisa configurar uma conta para cobrança de cartão de crédito no Google Checkout. (DEITEL, 2012, p ). Na Apple existem três modalidades de licenciamentos: licença Simples não comercial; licença Standart e licença Enterprise. O processo de aquisição das licenças é todo realizado no site ios Developer Center. O processo todo pode levar alguns dias, pois depende da análise e aprovação da Apple. (MILANI, 2012, p.17-18). O crescente desenvolvimento de aplicações móveis e a competição no mercado surgiram à necessidade de aumentar a qualidade, manutenibilidade e a clareza do código desenvolvido, dessa forma é preciso aplicar padrões de projetos para programação de aplicativos para esses dispositivos, seja eles: Symbian, ios (sistema operacional da Apple), Android ou Windows Fone. Segundo Nudelman (2012, p.18), o conceito de padrão de projeto (no original, em inglês, design pattern) é uma solução replicável que resolve um problema particular dentro de um contexto específico. [...] O que torna os padrões de projeto singularmente eficazes é a forma pela qual eles transmitem boas práticas, ao mesmo tempo em que tratam as complexidades existentes em problemas reais de projetos. O design patterns são utilizados por muitas empresas que buscam a implementação de novos projetos de softwares ou melhorarem os antigos. Teve início com Cristopher Alexander, um professor de arquitetura em Berkeley (FREEMAN, 2009, p.452), que desenvolveu uma técnica de solução de problemas relacionados à engenharia civil. O ambiente dos dispositivos móveis é limitado, especialmente pelo tamanho dos dispositivos. Portando, surge a necessidade de aplicar padrões de interface gráfica. Dentre esses padrões, existem os de navegações que são classificados em: padrões primários [...] e padrões secundários [...] (NEIL, 2012, p.17).

13 12 Este estudo foi baseado nas pesquisas sobre o sistema operacional Android no desenvolvimento de aplicativos para a plataforma do Google TV. Foram pesquisados os padrões de projetos para as interfaces gráficas existentes utilizadas no desenvolvimento de aplicativos em Android para a plataforma Google TV. Existem vários sistemas operacionais para dispositivos móveis no mercado, por exemplo: o ios que é o sistema operacional da Apple; o Android do Google e o Windows Fone da Microsoft. Diante disso, este trabalho focou nas pesquisas sobre a utilização dos padrões de projetos para desenvolvimento de aplicativos destinados a esses sistemas operacionais. 1.2 Objetivo Geral - investigar quais os padrões de projetos de interface existente e utilizados no desenvolvimento de aplicativos para plataforma Android Google TV. 1.3 Objetivos Específicos - pesquisar os padrões de projetos utilizados no desenvolvimento de aplicativos para o sistema operacional Android. - investigar exclusivamente a existência dos padrões ou recomendações para a plataforma Android do Google TV.

14 Definição do Problema O problema é: Quais os padrões de projeto de interface gráfica que poderá ser utilizado no desenvolvimento de aplicativos para plataforma Android da Google TV. Existe ou não padrão específico, e será possível ou não a sua aplicação? 1.5 Justificativa Esta pesquisa justifica-se pela necessidade de investigar a existência de padrões de projetos específicos e sua aplicabilidade no desenvolvimento de aplicativos em Android para o Google TV. O sistema operacional Android tem a vantagem sobre outras plataformas, que é o desenvolvimento em linguagem de programação Java. Esta é uma das linguagens de programação mais utilizada no mundo. Existem vários padrões de projetos que são utilizados no desenvolvimento de projeto de software, nas diversas linguagens de programação disponíveis no mercado. Dentre esses padrões, têm-se o Designer Patterns Gang of Four ou GoF, que conta com 23 padrões aplicados no desenvolvimento de produto de software. Na programação em Java existem os padrões Java EE. O catálogo atual (setembro/2003) define 21 padrões [...] (ROCHA, 2003, p. 30) dividido em 3 camadas, sendo: 8 na camada de apresentação; 9 na camada de negócios e 4 na camada de integração. No desenvolvimento para aplicações para o Android há 58 padrões de projeto de interação essenciais, que lidam com os principais aspectos na construção de aplicativos (NUDELMAN, 2012, p.18). Além dos 58 padrões, há 12 antipadrões que descrevem os erros mais comuns a serem evitados (NUDELMAN, 2012, p.19) nas aplicações para o Android. Além dos padrões já mencionados, existem ainda 10 padrões de navegação de interface gráfica utilizado no desenvolvimento de aplicativos para plataforma móveis, os quais classificam em padrões primários de navegação [...] e padrões secundários de navegação [...] (NEIL, 2012, p.17).

15 Motivação Embora, os padrões de projetos estejam muitos difundidos nas aplicações convencionais, como aplicativos desktop, web e alguns desses padrões podem ser utilizados em aplicativos móveis, como Android por exemplo. Portanto, qual padrão de design de interface poderá ser utilizado no desenvolvimento de aplicativos para o sistema operacional Android para o Google TV. 1.7 Metodologia Com base na pesquisa bibliográfica, foram analisados os padrões de projeto de interface que poderão ser aplicados no desenvolvimento de aplicativos para plataforma Google TV, focando no padrão de projeto de interface gráfica. O estudo realizado focou no desenvolvimento de aplicativo para essa plataforma, visando à facilidade de navegação pelo usuário.

16 15 2 Fundamentação Teórica Segundo Milani (2012, p.14) o mercado de aplicações para dispositivos móveis está em altíssimo crescimento. O mercado é muito grande e segue com uma taxa muito alta de crescimento (MILANI, 2012, p.15). Diante disso, nota-se a evolução do mercado de dispositivos móveis. A gama de opções atualmente em um dispositivo móvel é imensamente superior alguns anos atrás (MORAIS, 2012, p. 1). Com esta evolução contínua, hoje tem muito mais recursos. Um smartphone é um telefone inteligente (MORAIS, 2012, p. 1), com muito mais recursos do que antes. Não é apenas um telefone com as funções restritas: ligar, desligar, agenda, calculadora, mas possui recursos de um computador portátil, como: acessar internet, editar documentos, tirar fotos, ouvir música, assistir vídeos, jogar, entre outras funcionalidades. Para que esta evolução ocorra, precisa de uma plataforma (sistema operacional), um software sobre o qual as aplicações do aparelho são construídas. A plataforma faz a comunicação entre as aplicações e o hardware. Existem mais de uma plataforma, com fabricantes diferentes. As principais plataformas existentes hoje para dispositivos móveis são: Symbian OS da Nokia Atualmente a plataforma mais utilizada no mundo, mas está perdendo espaço para as novas plataformas que estão surgindo; Windows Fones da Microsoft Plataforma baseada em Windows para dispositivos móveis; ios da Apple Plataforma da Apple para iphone e ipad; Android do Google Plataforma gratuita e de código aberto criada pela Open Handset Alliance, com iniciativa da Google. Além dos aplicativos móveis, surgiram também, os aplicativos para o Google TV que utiliza a plataforma Android para seus aplicativos. A primeira geração de telefones Android foi lançada em outubro de De acordo com a Gartner, as vendas de telefones baseados em Android nos Estados Unidos aumentaram 707% no primeiro trimestre de 2010, em relação ao ano anterior (DEITEL, 2013, p. 4). Diante da necessidade de desenvolver produto de software de qualidade, surge a implementação dos Padrões de Projetos com o livro Design Patterns Elements of Reusable Object-Oriented Software em 1995 por Eric Gamma, Richard Helm, Ralph Johnson e John Vlissides, também conhecido como a Gangue dos Quatro (Gang of Four, ou GoF) (FREEMAN, 2009, p. 451), que descreveu 23 padrões de

17 16 implementações baseadas em suas experiências. Os padrões não começaram com a GoF, eles começaram com Cristopher Alexandre, um professor de arquitetura em Berkeley (FREEMAN, 2009, p. 452). O design patterns é utilizado por muitas empresas que buscam implementar novos projetos de software ou melhorar os antigos. Teve início com Cristopher Alexander, um professor de arquitetura em Berkeley (FREEMAN, 2009, p. 452), que desenvolveu uma técnica de solução de problemas relacionados à engenharia civil. A técnica foi migrada para engenharia de software podendo ser trabalhada em RUP ou UML. A implementação de Design Patterns não é muito simples, pois não existe um modelo definido. No mundo do software, um padrão é uma manifestação tangível da memória tribal de uma organização (ZANDTRA, 2009, p.117). O design pattern apresenta muitas vezes uma solução comum para determinado problema, a solução é descrita e feita de uma forma abstrata, permitindo ao engenheiro determinar detalhes e algumas especificações de um design patterns. Portanto, um estudo sobre padrões de projeto pode oferecer mais de uma solução específica num contexto. (ZANDTRA, 2009, p. 123). Os padrões de projetos ou design patterns foram criados para facilitar e diminuir a complexidade da implementação de sistemas, dessa forma, as empresas não poderiam deixar de utilizar em suas plataformas e disponibilizar em seus SDKs componentes e estruturas que fizessem uso de tais padrões. Os padrões de projeto demonstram e aplicam princípios de projeto orientado a objeto (ZANDTRA, 2009, p. 123). A força crescente no desenvolvimento de aplicações móveis e a competição no mercado surgiram à necessidade de aumentar a qualidade, manutenibilidade e clareza do código desenvolvido, dessa forma é preciso aplicar padrões de projeto para programação de aplicativos para esses dispositivos, seja eles: Symbian, ios (sistema operacional da Apple), Android ou Windows Fone. Diante desse mercado de dispositivos móveis em expansão e a necessidade de desenvolver aplicativos de qualidade para essas plataformas. Dessa forma, é

18 17 recomendado no desenvolvimento de aplicações para essas plataformas, o uso de padrões de projeto para interfaces gráficas. Estes padrões é um conjunto de práticas amplamente aplicadas que aprimora a experiência do usuário. Seguir padrões de design garantirá o melhor aproveitamento dos valiosos recursos do aplicativo. O ambiente de dispositivos móveis difere dos de aplicações convencionais desktop ou web. Eles são limitados, especialmente pelo tamanho do dispositivo, a velocidade do processador, tamanho da memória, e também pela capacidade da bateria. Em virtude dessas limitações, o desenvolvimento tradicional de software precisa ser adaptado para dispositivos móveis. A programação para dispositivos móveis deve levar isso em consideração, e a programação deve adaptar-se às propriedades do dispositivo. Segundo Freeman (2009, p. 444), os padrões de projetos (Gang of Four ou GoF) dividem em três categorias distintas com base na sua finalidade: criacionais, estruturais e comportamentais, conforme tabela 1. Categorias Criacionais Estruturais Comportamentais Descrição Envolvem a criação de instâncias de objetos; todos fornecem alguma maneira de desconectar o cliente dos objetos a partir dos quais serão geradas instâncias. Permitem que organize classes ou objetos em estruturas maiores. Preocupam-se com a forma como as classes e objetos interagem e com a distribuição de responsabilidades. Tabela 1 categoria dos padrões projeto (GOF). Os padrões de projetos de criação são os seguintes, conforme tabela 2. Criacional Buider Prototype Singleton Factory Method Separar a construção de objeto complexo da representação para criar representações diferentes com mesmo processo. Especificar tipos a criar usando uma instância como protótipo e criar novos objetos ao copiar este protótipo. Garantir que uma classe só tenha uma única instância, e prover um ponto de acesso global a ela. Definir uma interface para criar um objeto, mas deixar que subclasses decidam que classe instanciar. Abstract Method Prover interface para criar famílias de objetos relacionados ou dependentes sem especificar suas classes concretas. Tabela 2 Padrões de projetos criacionais.

19 18 Os padrões estruturais são os seguintes, conforme tabela 3. Estrutural Adapter Bridge Converter a interface de uma classe em outra interface esperada pelos clientes. Desacoplar uma abstração de sua implementação para que os dois possam variar independentemente. Composite Permitir o tratamento de objetos individuais e composições desses objetos de maneira uniforme. Decorator Anexar responsabilidades adicionais a um objeto dinamicamente. Facade Flyweight Proxy Oferecer uma interface única (e simples) de nível mais elevado para um conjunto de interfaces de um subsistema. Usar compartilhamento para suportar eficientemente grandes quantidades de objetos complexos. Prover um substituto ou ponto através do qual um objeto possa controlar o acesso a outro. Tabela 3 Padrões de projetos estruturais. Os padrões comportamentais são os seguintes, conforme tabela 4. Comportamental Interpreter Dada uma linguagem, definir uma representação para sua gramática por meio de um interpretador. Template Method Definir o esqueleto de um algoritmo dentro de uma operação, deixando alguns passos ser preenchidos pelas subclasses. Chain of Responsibility Compor objetos em cascata para, através dela, delegar uma requisição até que um objeto a sirva. Command Encapsular requisição como objeto, para clientes parametrizarem diferentes requisições. Iterator Prover uma maneira de acessar elementos de um objeto agregado seqüencialmente sem expor sua representação interna. Mediator Definir um objeto que encapsula a forma como um conjunto de objetos interagem. Memento Armazenar o estado interno de um objeto para que ele possa ter seu estado restaurado posteriormente (undo). Observer State Definir uma dependência um para muitos entre objetos para que quando um objeto mudar de estado, os seus dependentes sejam notificados e atualizados automaticamente. Permitir a um objeto alterar o seu comportamento quanto o seu estado interno mudar.

20 19 Strategy Visitor Definir uma família de algoritmos, encapsularem cada um e fazê-los intercambiáveis. Representar uma operação a ser realizada sobre os elementos de uma estrutura de objetos. Permite definir uma nova operação sem mudar as classes dos elementos nos quais opera. Tabela 4 Padrões de projetos comportamentais. Segundo Neil (2012, p. 17), os padrões de navegação de interface gráfica para aplicativos móveis são classificados em: padrões primários de navegação e padrões secundários de navegação. Além desses, classifica ainda nas seguintes categorias de padrões: formulários; tabelas e listas; busca ordenação e filtragem; ferramentas; gráficos; convites; feedback e affordance; ajuda e antipadrões [...]. A tabela 5 descreve os padrões de navegações primários e secundários. Padrões primários de navegações Springboard Caracteriza-se por uma página inicial de opções de menu que agem como um ponto de partida para o aplicativo. Menu de listas Caracteriza-se na forma de lista, pode ser simples, agrupadas e avançadas com recursos adicionais para busca, navegação ou filtragem. Cada item da lista é um ponto de partida para o aplicativo. Menu de abas Caracteriza-se pelo seu design na forma de abas, que pode ser superior ou inferior. Galeria Caracteriza-se pela exibição na forma de itens de conteúdo que podem ser organizados em um carrossel, uma grade ou em slide show. Dashboard Caracteriza-se pela forma de painéis de instrumento que fornece resumo de indicadores principais de desempenho (Key Perfomance Indicators KPIs). Metáfora Caracteriza-se por uma pagina inicial modelada para refletir a metáfora do aplicativo. Pode ser utilizado para ajudar a catalogar e categorizar itens em um aplicativo. Megamenu Padrões secundários de navegações Carrossel de páginas Caracteriza-se por um grande painel sobreposto com formatação e agrupamento personalizados das opções de menu. Caracteriza-se pelo gesto de arrastar os dedos para navegar rapidamente em um conjunto de páginas.

21 20 Carrossel de imagens Lista expandida Caracteriza-se pelo uso em dimensões 2D ou coverflow (uma interface tridimensional para navegação em biblioteca). Caracteriza-se pela permissão de que em uma única tela seja acessada para revelar mais informações. Tabela 5 padrões de navegação primários e secundários. Além dos padrões de interface de navegação primários e secundários, a tabela 6 descreve outras categorias de padrões e antipadrões. Padrão Formulários Classificação Login, checkout, formulário de busca, multipassos, formulário longo. Tabelas e listas Tabela básica, tabela sem cabeçalhos, linhas agrupadas, coluna fixa, listas em cascata, tabela editável, tabela com indicadores visuais, visão geral e dados. Busca, ordenação e filtragem Ferramentas Gráficos Convites Feedback & Affordance Ajuda Busca explícita, autocompletar, busca dirigida, salvos e recentes, critérios de busca, resultados de busca, ordenação na tela, seletor de ordem, formulário de ordenação, filtro na tela, gaveta de filtragem, diálogo de filtragem, formulário de filtragem. Barras de ferramentas, menu de opões, ferramentas contextuais, ações contextuais, botão de chamada de ação, botão de múltiplos estados, ações em lote. Gráfico com filtros, visão geral de dados, janela de visualização, detalhes do ponto de dados, expansão, zoom, tabela dinâmica, sparklines. Diálogo, dica, tour, demo, transparência, primeira vez, persistente, detectável. Padrões de feedback: erros, confirmação, status do sistema. Padrões de affordance: toque, deslizar, arrastar. Como fazer, folha de notas, tour. Antipadrões Idéia inovadora, discrepância de metáfora, discrepância de controle, discrepância de ícone, discrepância de modelo mental, caixa idiota, lixo de gráfico, oceanos de botões. Tabela 6 Outras categorias de padrões e antipadrões de interface. Segundo Nudelman (2013, p ), há 58 padrões de projetos de interação essenciais, que lidam com os principais aspectos na construção de aplicativos para o Android, como experiência de boas-vindas, tela principal, navegação, busca, ordenação e filtragem, entrada de dados e formulários. Além dos 58 padrões, há 12 antipadrões que

22 21 descrevem os erros mais comuns a serem evitados. A tabela 7 descreve estes 58 padrões. Classificação/Padrão Experiência de boas vindas Animação de boas-vindas Tutorial Tela principal Lista de links Painel Descrição É um pequeno clip de animação dando boasvindas quando o aplicativo é aberto pela primeira vez e apresentando a marca. Não deve ser longa, recomenda-se uma duração entre 3 e 5 segundos. A ajuda integrada diretamente ao uso do aplicativo de forma simples e fácil utilização. A tela principal funciona como um concentrador, que apresenta muitos links ou ícones de funções primárias ou visualizações que podem ser obtidas com o aplicativo. Ao abrir o aplicativo visualiza o estado atual como um painel mostrando uma visão geral na forma de gráfico ou tabelas. Atualizações Sempre que tiver uma regularidade de informações personalizada de interesse do usuário, utilize esse padrão na tela principal do aplicativo. Deve mostrar uma ou mais mensagens a partir do fluxo de atualizações. Navegação (Browse) Mapa Histórico Busca Busca por voz Autocompletar e autossugerir Devem ser utilizado quando a tela principal é carregada exibindo alguns itens e categorias de itens que são de fato, de interesse do usuário. Quando a tela principal é carregada, mostrando um mapa das redondezas de onde o usuário se encontra, apontando itens de interesse. Deve ser utilizado sempre que informações geocêntricas forem interessantes e puderem ser exibidas em um mapa. A tela principal mostra uma lista de links ou itens que representam buscas prévias recentes, com a mais recente lista em primeiro lugar. Usar quando o aplicativo estender por múltiplas sessões. Uma pergunta por voz, feita por meio de um microfone embutido, é usada como entrada para a busca. A digitação no telefone é difícil e sujeita a erros. Isso torna a entrada de áudio uma excelente alternativa ao texto. A maioria dos aplicativos que possuem uma caixa de busca pode, também, usar esse padrão. Quando o usuário digita um ou mais caracteres no campo de busca, o sistema mostra uma

23 22 Toque preditivo Puxe para atualizar Busca a partir do menu Busca a partir da barra de ações Busca dedicada Busca na página de conteúdo Ordenação e filtragem Página de refinamento Barra de filtragem camada de sugestões adicional, contendo uma ou mais combinações possíveis de palavras que, de alguma forma, correspondem ao que digitou. A qualquer momento o usuário tem a opção de seguir digitando ou selecionar umas das sugestões oferecidas pelo sistema. O toque preditivo implementa a autossugestão palavra por palavra, através de um refinamento passo a passo, criando uma espécie de navegação em palavras-chave. Os resultados de busca são atualizados quando o usuário desliza para baixo a tela com os resultados. É um ótimo padrão para recarregar resultados que são atualizados com freqüência. È uma opção que pode ser acessada a partir do menu da barra de navegação. O usuário deve tocar o botão correspondente ao menu da navegação onde estão os botões Voltar, Home e Recente e, então selecionar a opção de busca. O usuário pode acessar a busca através de um botão dedicado na barra de ações do aplicativo. O botão de busca é mostrado na barra de ações superior ou inferior. Depois que tocar na busca, a página de resultados mostra uma ou mais opções. Buscas salvas, refinamento de opções de busca, buscas populares, locais próximos e assim por diante. A caixa de busca é colocada no topo dos resultados de busca e não rola junto com eles. A caixa de busca fica fixa no topo dos resultados da buscas, o que permite aos usuários a rápida edição e ajuste no texto de pesquisa. A caixa de busca está no topo dos resultados de busca e é parte da página de conteúdo; assim ela rola juntamente com o restante do conteúdo. A premissa básica desse padrão é que a caixa de busca é parte integral da página de conteúdo. Os resultados de busca permitem o acesso a opções de ordenação e filtragem em uma página separada ou lightbox. Quando o usuário quer refinar sua busca, pode acessar uma página dedicada com opções de filtragem e ordenação, acompanhada por algum tipo de botão, como: Ir, Buscar, Seguir. É uma pequena seção horizontal da tela, mostrando a pesquisa por palavra-chave e os filtros aplicados a ela. Depois que a pesquisa é efetuada, todo o seu conteúdo é exibido ao usuário em uma fina barra de filtragem.

24 23 Arquitetura paralela Abas Evitando resultados nulos ou indesejados Você quis dizer? Correspondência parcial Resultados locais Entrada de dados Controle deslizante (Slider) Controle de passo (Stepper) Calendário com rolagem (Scrolling Calendar) As telas de buscas básicas e avançadas formam duas trilhas paralelas para os resultados de pesquisas. Os resultados podem ser acessados de duas maneiras: por meio de uma busca simples ou avançada, com mais opções. São abas no topo da página que permitem aos usuários trocarem as visualizações ou aplicarem opções populares de ordenação e filtragem. Quando os resultados de busca são exibidos ao usuário, eles são segregados em duas ou mais visualizações mostradas como abas no topo da página. Quando o usuário digita uma palavra-chave que não é reconhecida pelo sistema, ele recebe um conjunto de substituições vindas de um vocabulário controlado, baseado no soletramento criativo da pesquisa original do usuário. O padrão utilizado pelo Google para recuperação de resultados nulos é o Você quis dizer? É usado para a recuperação a partir de resultados nulos, que permite a busca de novos resultados ao omitir alguns termos de busca na pesquisa. A Correspondência parcial reexecuta a pesquisa, mas utilizando menos palavras-chave que as digitadas, isto é, o sistema remove uma ou mais palavras-chave. É utilizado na recuperação de resultados nulos aproveitando o inventário local de resultados que podem ser obtidos com o uso do GPS embutido. Quando ocorre uma condição de resultados nulos, o sistema oferece alguns resultados locais com base em uma pesquisa de correspondência parcial ou fornecendo um conjunto de resultados locais em destaque. É o ajuste de parâmetro em um intervalo de valores pré-definidos quando o usuário move o marcador. Controles deslizantes podem ser usados em conjunto com rótulo para mostrar os valores ajustados. Este padrão apresenta-se de duas maneiras: simples e duplos. Utilizado quando a tarefa exige a entrada de um número inteiro pequeno, de 0 a 5. O controle de passo é nativo do Android, que consiste em um estreito campo de texto ladeado por botões com sinais de mais e menos. É usado quando é necessário fornecer uma data. O controle do calendário é uma faixa de rolagem contínua, com as datas em colunas fixa

25 24 Roleta de data e horário Listagem suspensa (Drop Down) Seleção múltipla Entrada de texto livre Caixa de texto com máscara de entrada Caixa de texto com entidades atômicas Formulários Mensagem de erro em linha Alerta torradeira (Toast alert) ordenadas pelo o dia da semana e os meses separados por uma linha mais grossa. Utiliza-se este padrão quando precisar selecionar uma data. O usuário toca no campo de data e tempo é exibido um lightbox com todos os componentes da data em um formato vertical para a escolha. É uma lista suspensa de valores possíveis. Quando o usuário toca no valor do controle, uma caixa sobreposta é exibida, com todos os valores possíveis para a seleção, que substitui o valor padrão pelo novo valor. O toque em uma região externa sobreposta cancela a ação de seleção. O controle de seleção múltipla permite ao usuário a escolha de um ou mais grupos da lista. É usado quando uma seleção única a partir de uma lista suspensa não é o suficiente em uma tarefa que exige que o usuário escolha múltiplos valores a partir de uma lista. O usuário toca no campo de texto e o teclado virtual surge a partir da parte inferior da tela, enquanto o foco é colocado no campo de texto. Esse padrão é o controle tradicional para a entrada de texto por meio do teclado no Android. É utilizado quando um campo aceita apenas dados específicos, como um , número de telefone, CPF, CEP, o sistema pode oferecer o tipo correto de teclado para facilitar a entrada de dados. São caixas de texto usadas como um tipo de busca para a localização e inserção de objetos discretos e indivisíveis, chamados de entidades atômicas. O usuário começa a dizer alguns caracteres que identificam a entidade atômica e o sistema realiza uma pesquisa dinâmica, retornando as autossugestões, usualmente na forma de uma lista suspensa abaixo da caixa de texto. É usado para correção de erro durante o preenchimento do formulário. Quando ocorre um erro de entrada, o sistema notifica o usuário sobre os campos a serem corrigidos. Geralmente, pode recorrer a dois componentes de mensagem de erro de linha: um indicador de erro relativo ao campo e uma mensagem geral de erro (normalmente no topo da tela). A camada de alerta rola para cima a partir da parte inferior da tela, como um pedaço de pão saltando de uma torradeira. Quando a condição

26 25 Alerta sobreposto (Pop-up) Validação de retorno (Callback validation) Cancel/OK Alinhamento superior de legendas Obtendo informações do ambiente Aceleradores de entrada que gera o alerta é correspondida, a tela exibe uma pequena camada sobreposta com uma mensagem específica, um ícone ou ambos. Depois de um período de tempo determinado (alguns segundos), a janela alerta desaparece. Utiliza esse padrão quando ocorre uma condição de alerta, o sistema exibe uma lightbox, frequentemente escurecendo o plano de fundo com a tarefa em execução. A mensagem sobreposta exige que o usuário escolha uma das ações exibidas, apresentando até três botões na parte inferior da janela. Este padrão é equivalente a uma chamada Ajax que permite o acesso assíncrono ao servidor para validações mais sofisticadas e dinâmicas, por meio de bases de dados. É usado quando os dados inseridos pelo usuário necessitam ser validado no servidor, o sistema detecta quando a entrada de dados está completa e envia uma chamada assíncrona ao servidor para que ele valide os dados, retornando um entre dois estados: OK ou Falha(Fail). Esse padrão descreve como posicionar os botões de ação: OK/Cancel ou Cancel/OK. Os botões são posicionados como Cancel/OK na parte superior ou inferior do formulário. Esse é um padrão tradicional que deve ser usado para todos os formulários do aplicativo. Esse padrão descreve que as legendas do formulário apresentadas ao usuário devem aparecer acima dos campos. Sempre que apresentar ao usuário um formulário para dispositivos móveis, utilizar o alinhamento superior de legendas. É a utilização dos dados lidos a partir de seus sensores embarcados (voz, gestos, acelerômetro, localização, imagens, vídeos e luz ambiente) como entradas para o formulário. Sempre que tiver que preencher um formulário, deve imediatamente perguntar: que tipo de informação pode obter do ambiente? Usar gestos, localização, imagens em vez do teclado e outros controles nativos de entrada? Descreve a forma de reter dados entre visitas e apresentar esses dados entre visitas e apresentar em pontos estratégicos do fluxo de trabalho. Usa quando o usuário executa tarefas longas e complexas de entrada de dados, como a digitação de datas e endereços, o sistema lembra-se do que já foi digitado e apresenta essa informação no

27 26 momento apropriado. Serviços bancários para dispositivos móveis Acelador de login Este padrão permite maior velocidade de entrada do usuário no aplicativo móvel através do uso de um código curto, ou um reconhecimento facial ou de voz, enquanto fornece um nível de segurança aceitável. Algumas instituições financeiras oferecem aos seus usuários a opção de adicionar seus aparelhos a uma lista de dispositivos aprovados, instalando um código especial no dispositivo, de um jeito similar à instalação de um cookie em um navegador. Página dedicada de seleção È usado para fazer uma seleção a partir de uma lista. Quando o usuário precisa selecionar um valor a partir de uma lista longa, ele toca no controle seletor e uma página dedicada de valores se abre. Depois de selecionar um valor na página dedicada de seleção, a página se fecha e o sistema exibe novamente o formulário com a seleção mostrada no controle de seleção. Primeiro o formulário (Form first) É a copia do formato utilizado em aplicativos web para desktop para preencher formulário longo. Ocorre quando um usuário precisa inserir alguns dados, primeiro é mostrado a ele um formulário. Todas as telas de inserção de dados subseqüentes retornam o usuário ao primeiro formulário antes de ir para a próxima inserção de dados. Páginas dedicadas com assistente de Este padrão é complemento otimizado para uma fluxo tela pequena. O formulário inteiro nunca é mostrado aos usuários. Em vez disso, eles vêem uma série de páginas otimizadas para o tamanho de um dispositivo móvel, com controles apropriados de inserção de dados. Normalmente, ao final são apresentadas ao usuário a página de verificação e a página de confirmação. Assistente de fluxo com formulário Este padrão é usado quando o fluxo inclui uma ou mais páginas dedicadas de seleção. Elas são primeiramente apresentadas como um assistente. Depois de o usuário ter feito suas escolhas necessárias para as páginas dedicadas de seleção. É apresentado a ele um formulário que contém os elementos que faltam. É o padrão ideal para o uso com o padrão de páginas dedicadas de seleção. Verificação-Confirmação É usado quando tiver um formulário com uma carga transacional complexa ou emocional, é necessária uma verificação e uma confirmação da ação. Funciona quando o formulário estiver completo e pronto para submissão, o sistema

28 27 Comunicação por proximidade (Near field communication, NFC) Nvegação Carrossel Menu sobreposto Marca d água Navegação canivete suíço (Swiss- Army-Knife Navigation) apresenta uma última tela para que os usuários verifiquem a informação antes de enviar. Após isso, o sistema apresenta a página de confirmação, mostrando os detalhes da transação. Este padrão utiliza uma tecnologia de conexão em curta distância. Conectar-se utilizando esse padrão (NFC) geralmente inicia aplicativos ou outros sistemas dentro do dispositivo. Essa tecnologia permite fácil acesso a esses aplicativos, apenas encostando dois dispositivos equipados com NFC um no outro ou encostando um dispositivo com qualquer leito NFC a uma tag NFC. O usuário vê várias imagens de produtos ao longo de uma linha. Para explorar mais produtos, o usuário pode deslizar pela linha para navegar horizontalmente para o próximo conjunto de produtos. Uma seta indicando a direção do movimento do carrossel é geralmente fornecida como uma dica para a interação necessária. O padrão carrossel pode ser usado toda vez que tiver um pequeno conjunto de 8 a 20 produtos ou itens que são facilmente reconhecíveis por sua imagem. Neste padrão quando o usuário toca no elemento representando ações, ou flecha, o menu sobreposto de ações é aberto, revelando mais escolhas em um elemento sobreposto no topo do conteúdo existente. Usar sempre que necessitar de mais ações disponíveis ao usuário do que as permitidas pelo espaço confinado do dispositivo móvel. O padrão marca d água fornece dica essencial que permite a seus usuários a descoberta de gestos multitoque e ações do acelerômetro, que podem ser usados para a navegação. Quando há gestos multitoque e movimentos de acelerômetro no sistema, a tela exibe uma marca d água semitransparente. O seu uso pode ser a qualquer momento em que utilizar gestos além do simples toque. Esse padrão ajuda os usuários a descobrirem e lembrarem os gestos e evitarem confusões. Esse padrão dedica-se a explorar as tendências experimentais que fazem com que a navegação fique em segundo plano, permitindo total destaque ao conteúdo. Usar sempre que precisar dedicar mais espaço de tela ao conteúdo e promover um estado de fluidez nas atividades

29 28 Integração: A fronteira final Padrões para tablets Fragmentos Visualização composta Conteúdo com navegação/gestos multitoque dos usuários. O uso desse padrão é quando as necessidades do usuário excedem as capacidades do aplicativo, sendo preciso navegar para um aplicativo diferente, que continue a tarefa para o usuário. Usar esse padrão sempre que o aplicativo precisar fornecer serviços que já são bem desenvolvidos em diferentes aplicativos com os quais o usuário está familiarizado. Os fragmentos formam o principal padrão Android puro para projeto da Interface do usuário (UI). O conteúdo da tela é quebrado em retângulos (tiles), chamados de fragmentos. Cada fragmento é posicionado com base no tamanho e na orientação do dispositivo, de modo que ocupe da melhor forma, o espaço disponível. A rolagem de cada pedaço individual é limitada, de forma que os elementos essenciais, tais como os botões de ação, não rolem para fora da tela. Sempre que o tablet estiver na orientação horizontal, existe a possibilidade de apresentar a lista juntamente com a visualização dos detalhes. Esse formato é chamado de visualização composta. Usa-se geralmente em dispositivos menores, a visualização da lista é apresentada primeira e, após isso, o usuário pode se aprofundar na visão dos detalhes. Para retornar à visão da lista deve pressionar o botão voltar. O uso desse padrão para tablets é necessário utilizar sempre que possível o conteúdo em si como elemento de navegação, evitando pequenos botões que precisam ser pressionados cuidadosamente. Cada elemento do conteúdo é, também, um elemento navegável, que pode ser acessado através de diversos gestos multitoque. 2-D Mais itens similares O 2-D Mais itens similares é um padrão simples, porém poderoso, de navegação no conteúdo. Os resultados de pesquisa são posicionados em um formato de galeria por meio de várias linhas, com cada linha representando uma subdivisão particular do conjunto de resultados. As linhas podem ser criadas a partir de qualquer divisão que faça sentido, assim como as subcategorias, marcas, data ou faixa de preço. Cada linha é equipada com um controle carrossel. Padrão experimental Navegação lateral A navegação lateral coloca a funcionalidade principal na orientação acima/abaixo ao longo do lado esquerdo e direito do dispositivo, onde ela

30 29 Deslizamento em C ( C-Swipe) fica fácil e ergonomicamente acessível. Para usar esse padrão deve considerar a ergonomia cuidadosamente, especialmente em tablets grandes. O deslizamento em C é um padrão futurista e experimental que forma uma base para um esquema de navegação alternativo. Pode ser usado para trazer à tona um menu contextual, em qualquer lugar da tela sensível, utilizando um arco semicircular natural, descrito pelo polegar do humano ao longo da superfície da tela plana sensível ao toque. Esse gesto é parecido com o formato de uma letra C. O deslizar do polegar proporciona a exibição de um menu semicircular contextual. Ao clicar na função que deseja e o menu desaparece, mais uma vez, quando a ação é executada. Tabela 7 Padrões de projeto para o Android. Os 12 antipadrões de projetos que descrevem os erros mais comuns a serem evitados estão descritos na tabela 8. Antipadrão Experiência de boas-vindas Licenças de uso para usuário final Impedimentos de contato Registro/Entrada(Sign up/sign In) Busca Busca e refinamento separados Descrição É o requerimento de concordância de licença tipo EULA quando o aplicativo é aberto pela primeira vez. São dificuldades de acesso ao suporte técnico. Exemplo formulário de contato longo, exigindo tempo e esforço do usuário. São extenso formulário de registro de entrada no sistema antes do usuário decidir usar ou não o aplicativo. São situações que acontece quando a caixa de busca por palavra-chave está separada por dois ou mais toques dos outros refinamentos de busca. Ordenação e filtragem Refinamento aleijado É a limitação das opções de refinamento de pesquisa em um único passo comprometendo o fluxo da experiência de busca, o qual deveria ser meio de

31 30 Evitando resultados nulos ou indesejados Ignorar a visibilidade do estado do sistema Falta de eficiência de interface Controles inúteis Navegação Vai e vem (Pogosticking) Múltiplas áreas em destaque múltiplos passos de refinamento. Ocorre quando o sistema toma alguma ação significativa sem informar isso ao usuário. Ocorre quando uma condição de resultado nulo e é mostrado como um estado de erro oficial do Android exigindo um toque extra do usuário para prosseguir. Ocorre em páginas com resultados nulos que são tratadas da mesma maneira que páginas que apresentam resultados. É quando há uma visualização em lista conectada a uma visão mais detalhada com informação adicional. Surge sempre que há mais de um tipo de resultado em destaque. Tabela 8 Antipadrões de projeto para o Android. O autor menciona a existência de 12 Antipadrões, porém foram descritos somente 10, conforme listados na tabela 8. Segundo Rocha (2013, p ), existem 21 padrões Java EE dividido em camadas, conforme tabela 9. Padrão Camada de Apresentação Intercepting Filter Front Controller Context Object Application Controller View Helper Composite View Service to Worker Dispatcher View Camada de Negócio Business Delegate Service Locator Session Façade Descrição Viabiliza pré- e pós-processamento de requisições. Oferece um controlador centralizado para gerenciar o processamento de uma requisição. Encapsula estado de forma independente de protocolo para compartilhamento pela aplicação. Centraliza e modulariza o gerenciamento de Views e de ações. Encapsula lógica não-relacionada à formatação. Cria uma View composta de componentes menores. Combinam Front Controller com um Dispatcher e Helpers. Concentra mais tarefas antes de despachar a requisição. Combinam Front Controller com um Dispatcher e Helpers. Realiza mais processamento depois de despachar a requisição. Desacopla camadas de apresentação e de serviços. Encapsula lógica de consulta e criação de objetos de serviço. Oculta complexidade de objetos de negócio e centraliza controle.

32 31 Application Service Business Object Composite Entity Transfer Object Value List Handler Transfer Object Assembler Camada de Integração Data Access Object Service Activator Domain Store Web Service Broker Centraliza e agrega comportamento para oferecer uma camada de serviços uniforme. Separa dados de negócios e lógica usando modelo de objetos. Implementa Business Objects persistentes combinando Entity beans locais e POJOs (Plain Old Java Objects). Antigamente chamado de Value Object ou DTO. Reduz tráfego e facilita transferência de dados entre camadas. Lida com execução de queries, caching de resultados. Antigamente chamado de Value Object Assembler. Constrói um Value Object composto de múltiplas fontes. Abstrai fontes de dados e oferece acesso transparente aos dados. Facilita o processamento assíncrono para componentes EJB. Oferece um mecanismo transparente de persistência para objetos de negócio. Expõe um ou mais serviços usando XML e protocolos Web. Tabela 9 Padrões de Java JEE.

33 32 3 Definição e Contextualização Diante do crescente mercado de dispositivos móveis, surge a necessidade de desenvolver aplicativos de qualidade para essas plataformas. Para isso, uma prática recomendada é o uso de padrões de projeto para interfaces gráficas. Estes padrões se referem a um conjunto de práticas já conhecidas e amplamente aplicadas que visam aprimorar a experiência do usuário. 3.1 Designers Patterns Google TV As aplicações para Android não se limitam mais a celulares ou tablets, mas também para o Google TV. Os seus aplicativos para essa nova plataforma é construída sobre as ferramentas de desenvolvimento para Android. Os aplicativos para o Google TV são baseados no Android, mas possui algumas características diferentes dos aplicativos para celulares e tablets. Os dispositivos do Google TV, não suportam alguns recursos que podem estar disponíveis em outros dispositivos. Além das diferenças internas entre uma aplicação Android para um telefone e uma para o Google TV, há diferenças na interface do usuário. O Google dispõe de um guia contendo um conjunto de recomendações sobre padrões de desenvolvimento de projeto de aplicativos para o Google TV. Essas recomendações são as seguintes: The 10ft Environment (Meio Ambiente 10 pés); TV Displays (Displays de TV); Sound and the UI (O som e a interface do usuário); Navigation Design (Projeto de navegação); User Interface Design (Projeto de interface do usuário); UI Zones and Patterns (As zonas de interface do usuário e padrões); UI Performance (Desempenho UI); Additional Tips (Dicas adicionais).

34 The 10ft Environment (Meio Ambiente 10 pés) É uma interface de usuário (GUI) projetado para exibição em uma tela grande de uma televisão ou similar. Os elementos exibidos na interface, como menus, botões, texto, assim por diante, são teoricamente ergonomicamente grande o suficiente para ler facilmente a uma distância de 10 pés (3 metros) a partir do visor, uma televisão por exemplo. Segundo o Google, o ambiente de visualização de televisão é normalmente referido como o ambiente de dez pés e a tela de televisão, como a interface 10 pés. Quando cria aplicativos do Android para o meio ambiente 10 pés, é preciso ter em mente, alguns conceitos básicos que diferencia o ambiente a partir de computadores ou dispositivos móveis. A televisão tem sido tradicionalmente um veículo passivo, somente com o objetivo de enviar informações para as pessoas. O Google TV muda esse conceito a partir de uma transmissão para um sistema interativo de duas vias. Mudança assim pode trazer dificuldades para alguns e facilidades para outros telespectadores. Para melhorar a interatividade é preciso observar os seguintes conceitos: O ambiente de 10 pés é tradicionalmente para consumir conteúdo. É um ambiente divertido e não de trabalho que geralmente e geralmente é social, e não único do usuário; A experiência de visualização para uma UI 10 pés é uma mistura de computador e TV. As telas da TV e do computador, apresentam características distintas; TVs têm som de alta qualidade. Os televisores possuem sistema de som de melhor qualidade do que os computadores; A UI 10 pés requer sistema de navegação simples e visível. O progresso deve ser configurado da esquerda para direita e de cima para baixo. É preciso limitar a necessidade de um mouse e fornecer feedback visual ao usuário; A UI 10 pés funciona melhor com os padrões de interface do usuário bem estabelecidas com base em zonas de conteúdo.

35 TV Displays (Displays de TV) Quando projetar para uma TV é preciso lembrar que a exibição Google TV é fundamentalmente diferente da de um computador ou dispositivo móvel. Apesar de seu tamanho, ele exibe menos informações em geral do que um computador ou UI móvel. É preciso fornecer menos UI e automatizar algumas tarefas em vez de pedir interação com o usuário. Abaixo algumas diretrizes para a interface do usuário: Usar um telefone celular como o modelo para a interface do usuário. O tamanho de uma TV moderna é enganoso. Apesar das TVs serem geralmente maiores do que 40 na diagonal, a percepção do espectador é que a TV é menor que um monitor. Para simular esta experiência, usar um celular como modelo quando criar a interface do usuário; Para evitar uma aparência desordenada na tela, fornecer mais espaço em branco entre os elementos da página. Para fazer isso, usar uma combinação de margens maiores; TVs estão sempre em paisagem. Em uma TV, o espaço disponível é executado da esquerda para a direita e não de cima para baixo. Colocar os controles de navegação na tela do lado esquerdo ou direito e economizar espaço vertical para o conteúdo. Resoluções de tela: as TVs (mesmo os mais modernos) têm uma resolução de tela com base em linhas de varredura. O Google TV disponibiliza três valores de linha de digitalização: 720p, 1080i e 1080p, que representam 720 linhas progressive scan, 1080 linhas de varredura entrelaçado e 1080 linhas progressivas (os dois últimos são equivalentes no Android). O valor de 720 significa que a TV pode tratar de 720 linhas distintas a partir da parte superior para a parte inferior do ecrã, 1080 significa que a TV se dirige 1080 linhas de cima para baixo. As configurações usadas pelo Android para o Google TV estão listadas na tabela 10. Definiçao Resolução (px) Identicador Densidade 720p 1280x720px tvdpi 1080p 1920x1080px xhdpi Tabela 10 configurações do Android para Google TV (Google Developers. Padrões de Projeto Google TV).

36 35 O tamanho da tela de um dispositivo Google TV é classificada como grande e não como um xlarge. Se o aplicativo fornece vários diretórios de recursos para diferentes tamanhos de tela, o Google TV atribuirá automaticamente como grande. Um dispositivo Google TV com uma tela de TV 1080p a densidade da tela é classificada com o xhdpi. Em uma tela de TV 720p, a densidade é classificada com o tvdpi. Se o aplicativo fornecer vários diretórios de recursos para diferentes densidades, o Google TV vai carregar os recursos com base na densidade da tela. Projeto Layouts Paisagem: as telas de TV é sempre na orientação paisagem, o ambiente referido é de 10 pés (3 metros). Para construir e otimizar layouts em paisagens e fornecer aos usuários uma experiência útil e agradável, recomenda-se: Fornecer recursos adequados para o modo paisagem; Garantir que o texto e os controles são grandes o suficiente para ser visível à distância; Fornecer bitmaps de alta resolução e ícones para telas de TV em HD; Os controles de navegação devem estar do lado esquerdo ou direito da tela; Dividir as interfaces em seções usando fragmentos e grupos GridWiew em vez de ListView para melhor utilização do espaço de tela horizontal; Usar grupos de exibição, como RelativeLayout ou LinearLayout para organizar pontos de vista. Isso permite que o sistema Android ajuste a posição vistas para o tamanho, alinhamento, formato e densidade de pixels da tela da TV; Adicionar margens suficientes entre controles de layout para evitar uma UI desordenado. A figura 2 ilustra exemplo de um layout otimizado para TV. Figura 2 - layout otimizado para TV (Fonte: Google Developers. Otimizando Layouts para TV).

37 36 No layout na figura 2 acima, os controles estão no lado esquerdo. A interface do usuário é exibido dentro de um GridView, que é bem adequada para a orientação paisagem. Neste esquema, tanto GridView quanto o Fragment têm a largura e altura do conjunto de forma dinâmica, para que possam ajustar-se à resolução da tela. Os controles são adicionados ao fragmento ao lado esquerdo programaticamente em tempo de execução. O quadro 1contêm exemplo de código do layout mostrado na figura 2. Quadro 1 exemplo de código do layout da figura 2 (Google Developers. Otimizando Layouts para TV). <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" > <fragment android:layout_width="0dip" android:layout_marginleft="5dip" android:layout_height="match_parent" /> <GridView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> Overscan: são as margens que o fabricante coloca ao lado exterior do tamanho da tela normal da TV, são para configurar itens da barra de ação no lado esquerdo da tela, também pode incluir a biblioteca na barra esquerda de navegação do aplicativo para criar itens de ação no lado esquerdo da tela, em vez de criar um fragmento para adicionar controles endereçáveis pelo circuito, e não são usados para exibir à imagem. Estas margens são a área de overscan. Aplicativos em Android não pode exibir no overscan. A quantidade de overscan varia conforme o fabricante, desse modo a margem em torno da UI também varia. Para projetar a interface do usuário para a TV que tem overscan significativo, poderá usar inadevertidamente o overscan como uma margem entre a interface do usuário e a moldura da TV. Se executar o aplicativo em uma TV com quase nenhum overscan, a interface terá quase nenhuma margem, assim os elementos podem serem difíceis de ler.

38 37 Para resolver o problema de overscan, é preciso proporcionar uma margem extra de 10% para a interface do usuário, e usar um layout que não usa posicionamento absoluto. O diagrama da figura 3 ilustra isso. Figura 3 - resoluções e dimensões (Google Developers. Padrões de Projeto Google TV).

39 38 Cores: a tela de TV tem contraste e níveis de saturação maiores do que monitores de computadores. Recomenda-se seguir as diretrizes abaixo ao trabalhar com cores sólidas: Usar branco puro (# FFFFFF) com moderação, pois causa vibração ou imagem fantasma em telas de TV; Evitar os brancos brilhantes, vermelhos e laranjas, pois eles causam distorção; É preciso ciência dos vários modos de exibição que as TVs podem ter, incluindo Standard, Vivo, Cinema / Teatro, Jogo, e assim por diante. É preciso testar a aplicação em todos estes modos; Evitar o uso de gradientes, eles podem resultar em faixas; É importante testar o aplicativo em telas de qualidade inferior, que podem ter baixa gama de configurações de cores. Textos: o desenvolvimento de aplicativo para TV recomenda-se o uso da fonte sansserif e utilização de anti-aliasing para aumentar a legibilidade. Evitar fontes leves ou que tenham ambos os cursos muito estreita ou muito amplo. Atualmente, o Google TV suporta apenas as Droid ou Droid da família Sans Serif, mas pode usar a incorporação de fontes para criar uma aparência mais personalizada. No entanto, a incorporação de fontes diminui o desempenho do sistema. Abaixo algumas recomendações para melhorar a legibilidade do texto: Limitar o parágrafo no máximo até 90 palavras; Quebrar o texto em partes pequenas para que os usuários possam digitalizar rapidamente; Manter o comprimento da linha entre 5 a 7 palavras. Nunca menor que 3 ou maior que 12 palavras por linha; Cor do texto claro sobre um fundo escuro é mais fácil de ler em uma TV, em comparação com o texto escuro sobre um fundo claro; Usar o tamanho da fonte padrão do Android. Por exemplo, o padrão de tamanho pequeno da fonte é 14sp, o que resulta em 28, o texto ponto na tela 1080p; Utilizar espaçamento maior na vertical mais à esquerda.

40 39 Por fim certificar-se que todos os widgets são grandes o suficiente para ser claramente visível para alguém sentado 10 pés (3 metros) de distância da tela (esta distância é maior para as telas muito grandes). A melhor maneira de fazer isso é usar o layout, dimensionamento relativo ao invés de absoluto, e as unidades de densidade de pixels independentes em vez de unidades de pixel absolutas. Por exemplo, para definir a largura de um widget, use wrap_content em vez de uma medida de pixel, conforme o exemplo no código do quadro 2. Quadro 2 - exemplo no código de definição de largura de um widget (Google Developers. Otimizando Layouts para TV). <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:singleline="true" android:textappearance="? android:attr/textappearancemedium" /> Sound and the UI (O som e a interface do usuário) O uso de som no aplicativo Google TV recomenda o seguinte: Usar sons que são apropriados para um ambiente de sala de estar; Padrão para um volume baixo; Fornecer opções simples para silenciar a aplicação; O Android tem o conceito de foco de áudio, que permite aos aplicativos solicitar acesso exclusivo para a reprodução de áudio. Então, se a aplicação depende de áudio, deve solicitar foco exclusivo de áudio.

41 Navigation Design (Projeto de Navegação) Os dispositivos do Google TV, inclui um teclado e um dispositivo indicador que controla o cursor. Os dois podem ser combinados num único dispositivo físico, e este dispositivo pode também incluir um controlador de mouse. Os usuários de computadores podem não ter muita prática com um D-pad ou cursor, mesmo os mais experientes, irão achar que usar um mouse em uma TV é difícil. Abaixo algumas diretrizes para a concepção da interface de navegação para aplicativos Android no Google TV: Utilizar D-pad em vez de mouse para a navegação. Os usuários estão mais familiarizados com a navegação por D-pad, que faz parte do controle remoto de TV; Na navegação por mouse, é preciso criar botões clicáveis grandes, de modo a facilitar o posicionamento do ponteiro do mouse sobre eles; Evitar a navegação complexa ou que precisa de mouse. Não use drag-and-drop ou menus drop-down. Estes são difíceis de controlar no ambiente de televisão; É recomendável fornecer feedback UI para navegação. Destacar a área selecionada ao receber o foco. É preciso usar transições e movimentos que fornecem opções visuais para avançar ou voltar, por exemplo, avançar para uma página à direita, podem ser compreendida intuitivamente que pressionando o D-pad da esquerda irá retornar à página anterior. O televisor não é um computador, nem um dispositivo móvel, a tela não é sensível ao toque, e o mouse (caso tem) é de difícil controle. Portanto, é preciso fornecer um esquema de navegação fácil no qual o usuário poderá aprender rapidamente navegar no aplicativo. Navegações D-pad: o controlador D-pad limita o movimento para cima, para baixo, esquerda e direita. A ação sob o cursor é acionado por um botão Enter ou OK no centro do D-pad. Portanto, a interação do usuário precisa ser fácil e rápida, visto que, o usuário navega a distância. Para criar navegação para D-pad, segue as orientações:

42 41 Certificar-se de que as teclas de seta podem navegar para todos os controles visíveis na tela; Para teclas de seta para rolar uma lista, é necessário certificar-se que os usuários podem selecionar um elemento na lista e que a lista ainda rola quando um elemento é selecionado; Se houver vários itens a serem selecionados na aplicação é preciso verificar-se qual o item está selecionado; Verificar-se que todos os itens que foram selecionados e focados na UI da aplicação serão navegáveis por D-pad. Navegações por mouse: em uma tela de TV, a seta do ponteiro do mouse é pequena e distante. O seu controle é difícil, porque geralmente não é o controle tradicional, em forma de disco. Para ajudar os usuários com o mouse é preciso seguir as recomendações seguinte: Ampliar a visão de cada controle de interface de usuário que é um alvo onde o ponteiro do mouse está posicionado, como um link ou botão, por exemplo; Adicionar mudança na aparência do objeto quando o controle do mouse está sobre ele; Usar indicador de seta para informar aos usuários que o conteúdo está disponível off-screen. Assistências à navegação: a navegação em um ambiente de 10 pés poderá ser nova para o usuário. Portanto, é preciso fornecer por escrito suporte de ajuda ao usuário. Isso deve ser feito adicionando um botão de ajuda ou ícone da barra de ferramenta. Alguns tópicos recomendado são: As teclas de seta D-pad: será que se move entre as páginas? Podem abrir contexto ou menus de navegação? O botão voltar: será que retorna a uma página anterior? Ele pode desfazer uma ação? Fechar um pop-up, por exemplo?

43 42 Teclas de mídia: O que significa play / pause e o que faz? O avançar e retroceder o que faz? Outras teclas: cancelar ou para fechar um pop-up? Por exemplo, o ESC para fechar uma janela pop-up? O diálogo de ajuda pode ser exibido automaticamente quando o usuário iniciar o aplicativo pela primeira vez. Rolagens verticais: a rolagem da página na vertical é fundamental em um navegador desktop, porém não será tão atraente em uma TV. A rolagem vertical pode ser irregular e lenta, e as informações importantes podem ser escondidas fora da tela. Recomenda-se usar layouts horizontais, e proporcionar transições visuais entre as páginas. Para usar a rolagem vertical, é preciso limitar a área de detalhes no centro da página, deixando a barra de navegação à esquerda fixa. Além de manter um contexto compreensível, terá melhor desempenho na navegação. Navegações da categoria: para as categorias (itens menu ou abas), recomenda-se usar o lado esquerdo da tela (menu a esquerda). A tela de TV tem espaço abundante nas laterais, mas o espaço vertical é precioso. É importante manter a seleção de categoria na tela em todos os momentos. Para isso, pode ter que reduzir o número de categorias. Para migrar de um aplicativo móvel existente para TV, considerar a necessidade de refazer ou pelo menos testar adequadamente a navegação que usa muitas subcategorias. Seleção: na TV, o posicionando do cursor para a seleção pode ser inexata. Para ajudar o usuário nas seleções, observar estas orientações: Destacar o objeto selecionado quando o ponteiro do controle está sobre ele em estado suspenso; Criar controles de seleção grande com um espaço extra ao redor do rótulo do texto; Não usar inerentemente pequenos controles, como fechar as caixas em um canto da janela. Eles não são visíveis ou difíceis de escolherem; Evitar o uso de cliques do mouse para fechar os diálogos pop-up. Pois esse tipo de controle não é evidente no ambiente 10pés. Em vez disso, utilizar-se

44 43 controle explícito para fechar o diálogo e garantir que a navegação D-pad pode acessá-lo; Não exigir que o usuário selecione o controle principal para torná-lo ativo. Portanto, é importante deixar o controle primário ativo ou default destacado para assim o indicar; Recomenda-se que seja permitido o deslocamento de uma parte da janela ou caixa de diálogo, quando necessário, sem ter foco. Exigir que o usuário clique em um elemento antes da rolagem é intrusivo. Contextos, seleção e foco: o estado atual de um aplicativo inclui um contexto, uma seleção, e um foco. O contexto é geralmente um conjunto de categorias, enquanto a seleção é a categoria que o usuário tenha selecionado. O foco é o controle ou elemento do ponteiro. Cada um deles deve ter seu próprio destaque distinto, e o esquema destacado deve permanecer coerente em toda a aplicação. Por exemplo, se o usuário está olhando para uma tela cheia de filmes, o aplicativo pode fornecer uma linha de guias contextuais que oferecem diferentes categorias, tais como "Todos os filmes", "Novos Lançamentos", "popular", "Escolhas do Editor", e assim por diante. Se o usuário selecionar uma das guias, o estado selecionado da guia deve permanecer visualmente distinta do estado do foco em movimento que indica a posição da tela atual para a navegação, como demonstrado na figura 4. Figura 4 - seleção e foco (Google Developers. Developing Google TV User Interface).

45 44 Nas aplicações Google TV, o foco do D-pad é equivalente ao estado do hover do mouse. É a principal forma dos usuários visualizarem o estado do aplicativo, e ajuda os usuários a prever como eles devem mover o foco ou fazer uma seleção. A distinção entre elementos focados e aqueles que não podem obter o foco é uma maneira que pode ajudar o usuário a entender a UI. Outra forma é alinhar os elementos em uma grade, conforme a figura 5. Figura 5 - padrão de grade para navegação UI (Google Developers. Developing Google TV User Interface). A grade é o mapeamento mais óbvio para controles Up-Down-esquerda-direita de um D-pad. Se não usar uma grade, em seguida, os elementos podem alinhar na diagonal ou em diferentes linhas de base ou em diferentes centros verticais. Isso força o usuário a mudar várias vezes de cima para baixo da esquerda para a direita, ou deixa o usuário confuso sobre a decisão correta a tomar.

46 45 Alguns elementos como listas de rolagem pode trazer dificuldade ao exato alinhamento da grade, conforme demonstrado na figura 6. Neste caso, deve colocar o foco o mais próximo possível da grade. Figura 6 - alinhamento de rolagem e layout de grade (Google Developers. Developing Google TV User Interface). Os indicadores visuais: é boa prática adicionar indicadores ou destaques para os itens selecionáveis e navegáveis na UI. Estes são chamados de affordance. Espera-se que os usuários explorem a interface para descobrir o que é e não é selecionável. Transição: as transições nos aplicativos podem ajudar ou confundir o usuário. Diante disso, Algumas orientações: Evite recarregar a página inteira, porque faz com que aumente a latência percebida; Para qualquer ação que afeta apenas um fragmento, a transição deve ser mantida inteiramente dentro do fragmento; Criar barra de progresso específico animadas indicando o andamento da operação;

47 46 Não mostrar animação de carregamento para cada elemento em uma grade. Uma barra de progresso com muitos elementos na mesma grade resulta em uma interface confusa e difícil de assistir User Interface Design (Projetos de interface do usuário) Para criar a interface do usuário, observar as seguintes diretrizes: Manter o design consistente; Manter comportamento de elemento consistente; No ambiente de 10 pés é necessário manter todos os elementos, ações e opções importantes visíveis, incluindo busca, configurações, e assim por diante. UIs através de dispositivos: para migrar de um aplicativo móvel de um pé, por exemplo, para um ambiente de UI 10 pés. É importante lembrar que o maior nem sempre é melhor. A figura 7 ilustra os tamanhos comparativos de telas. Figura 7 - tamanha de telas comparativas (Google Developers. Padrões de Projeto Google TV).

48 47 Uma tela 42 parece ter maior capacidade, mas este não é o caso. Um telefone inteligente geralmente tem mais poder de processamento do que a TV. O vídeo HD e o áudio de uma TV são pré-processados, pois tudo o que precisa é uma ligação de banda larga para transmissão. Em outras palavras, a maioria do processamento para a TV normal é feito pelo emissor, não pelo aparelho de TV. Para melhorar isso, desenvolver aplicações que minimizam interação do usuário. Quanto mais o aplicativo fazer para o usuário, é melhor UI Zones and Patterns (As zonas de interface do usuário e padrões) A maneira mais fácil de fazer uma boa UI TV é usar uma estrutura de zonas e padrões. Juntos, eles enfatizam uma experiência limpa e concisa, construído a partir de um vocabulário visual dos elementos de interface do usuário. As zonas são uma parte fundamental de uma TV UI Google para navegar em conteúdo. Cada zona corresponde a um componente da atividade do Android. Para o Google TV, usar uma hierarquia da esquerda para a direita em vez da hierarquia topo e rodapé (topto-bottom) de telefone e computador. Isso reflete ao aspecto de tela horizontal de uma TV, bem como, a necessidade de uma navegação simples, conforme ilustra a figura 8. Figura 8 - Zonas de aplicação (Google Developers. Padrões de Projeto Google TV).

49 48 Uma tela de TV contém três zonas (figura 8) da esquerda para a direita. O seu tamanho pode ser ajustado para atender às suas necessidades da aplicação, ou poderá usar o tamanho padrão. Zonas globais: a região global persiste durante todo ciclo de vida da aplicação, dessa forma não deve ocupar muito espaço na tela. Em contrapartida, a zona de detalhes contém o material que os usuários querem ver, então esse espaço na tela deve ser ampliado, tanto quanto possível. A figura 9 é um exemplo de uma interface baseada em zonas. Figura 9 - exemplo de aplicação (Google Developers. Padrões de Projeto Google TV).

50 49 A região global (zona 1 na figura 10) é a mais à esquerda da tela. Esta zona contém todos os itens de nível superior global na hierarquia da aplicação. Ele fornece acesso rápido às operações que os usuários podem querer usar a partir de qualquer lugar da aplicação. Ele também contém todas as categorias para a aplicação. Figura 10 - zonas do aplicativo de exemplo (Google Developers. Padrões de Projeto Google TV). Zonas Contextuais: a zona contextual (área 2 na figura 10) do lado direito da região global nos casos de adicionar detalhes ou opções baseadas em contexto. Além dos detalhes que identificam contexto, a zona contextual pode conter sub-padrões, como paginação, menus, filtros. Esta zona é opcional. Zonas de Detalhe: o detalhe da zona (zona 3 na figura 10) é mais à direita. Geralmente é a maior zona, e exibe o conteúdo do aplicativo. Como a zona contextual, a zona de detalhe pode conter diferentes sub-padrões, incluindo prateleiras conteúdo, navegadores episódio, listas e assim por diante. As imagens a seguir mostram exemplos de zonas e padrões para interface de TVs, tablets e telefones.

51 50 A figura 11 mostra exemplo de zonas de tela de TV. Figura 11 - Zonas de TV (Google Developers. Padrões de Projeto Google TV). A figura 12 mostra um exemplo de padrão de interface para TV. Figura 12 - Padrões de TV (Google Developers. Padrões de Projeto Google TV).

52 51 A figura 13 mostra exemplo de zonas de tela para tablet. Figura 13 Zona Tablet (Google Developers. Padrões de Projeto Google TV). A figura 14 ilustra o padrão de interface para tablet. Figura 14 Patterns Tablet (Google Developers. Padrões de Projeto Google TV).

53 52 A figura 15 mostra exemplo de zonas de tela de telefone. Figura 15 - Zonas de telefone (Google Developers. Padrões de Projeto Google TV). A figura 16 ilustra padrão de interface para telefone. Figura 16 - Padrões de telefonia (Google Developers. Padrões de Projeto Google TV).

54 53 Padrões (Fragmentos): os padrões são subestruturas de zonas que contém controles de interface do usuário e displays. Normalmente, é implementação de padrão individual, como um fragmento no Android. O Android fornece layouts de interface do usuário e widgets que ajudam a implementar muitas das necessidades básicas de aplicações. A figura 17 mostra alguns padrões dentro do sistema de zona do Google TV. Figura 17 - Padrões e zonas (Google Developers. Padrões de Projeto Google TV). Os modelos padrão fornecidos pelo Android incluem guias esquerda, menus, listas, filtros, paginação e assim por diante. Padrões de TV do Google correspondem diretamente aos padrões familiares em outros dispositivos, para que possa reutilizá-los. Por exemplo, uma lista em um aplicativo de telefone, pode colocar a mesma lista em uma zona apropriada na UI do Google TV. Isso simplifica e acelera a portabilidade das aplicações. Padrões básicos: os padrões básicos de interface para aplicativos Android do Google TV, são estes: prateleira de conteúdo; grade de conteúdo; lista de conteúdo; lista de conteúdo em cascata; detalhes restantes; guias de subseção. As figuras 18 a 23 ilustram esses padrões.

55 54 A figura 18 ilustra um exemplo de padrão prateleira de conteúdo. Figura 18 padrão prateleira de conteúdo (Google Developers. Padrões de Projeto Google TV). A figura 19 mostra exemplo de padrão grade de conteúdo. Figura 19 padrão grade de conteúdo (Google Developers. Padrões de Projeto Google TV).

56 55 A figura 20 ilustra um exemplo de padrão lista de conteúdo. Figura 20 padrão lista de conteúdo (Google Developers. Padrões de Projeto Google TV). A figura 21 mostra exemplo de padrão lista de conteúdo em cascata. Figura 21 padrão lista de conteúdo em cascata conteúdo (Google Developers. Padrões de Projeto Google TV).

57 56 A figura 22 ilustra exemplo de padrão grade detalhe restante. Figura 22 padrão detalhe restante conteúdo (Google Developers. Padrões de Projeto Google TV). A figura 23 demonstra exemplo de padrão de guias de subseção. Figura 23 padrões de guias de subseção conteúdo (Google Developers. Padrões de Projeto Google TV).

58 57 Classificando e filtrando: para fornecer meios para que os usuários classifiquem os dados através de filtros e listas na UI. Em uma tela de computador ou de toque, normalmente estas opções são fornecida por meio de menu drop-down na parte superior da lista do lado esquerdo da tela. No entanto, é preciso lembrar as limitações de navegação D-pad. Diante disso, é importante rever algumas forma de implementar a interface no ambiente de 10 pés. Na figura 24, a área de laranja marca o padrão que controla a classificação e filtragem da lista. Figura 24 - Tipo de padrão de filtro conteúdo (Google Developers. Padrões de Projeto Google TV).

59 58 Quando mover a área, o filtro se expande (figura 25) para expor todas as opções disponíveis, e também apresenta a opção que está selecionada no momento. Figura 25 - Tipo de padrão de filtro ampliado conteúdo (Google Developers. Padrões de Projeto Google TV). Pode precisar mais do que uma lista de opções para os estados minimizados e expandidos. A figura 26 mostra a versão do tipo de padrão de filtro, em seu estado minimizado. Figura 26 - Várias listas de opções, minimizada conteúdo (Google Developers. Padrões de Projeto Google TV).

60 59 A figura 27 mostra um exemplo da versão do tipo e padrão de filtro no estado expandido com várias listas de opções. Figura 27 - Várias listas de opções, expandida conteúdo (Google Developers. Padrões de Projeto Google TV). Nota-se que a visão ampliada demonstra várias maneiras de fazer seleções e destacá-los. As opções ficam em negrito quando são selecionadas. Sob B, mostra exibe todas as opções quando selecionadas. C usa caixas de seleção para indicar quais opções estão selecionadas. D mostra o resultado, se nenhuma opção for selecionada. Deve se possível, atualizar a lista para o usuário ao selecionar as opções. Isso fornece informações úteis para o usuário, e faz com que o aplicativo parece mais ágil. Ele também elimina a necessidade de um botão específico Aplicar Filtros e de atualização de tela cheia. É importante lembrar-se que como o usuário navega para trás, para a esquerda ou para a barra de navegação da lista, deve minimizar as opções uma vez, e exibir as opções escolhidas no momento. D-pad armadilhas da interação: a interação da navegação D-pad com esses padrões de interface enfatiza ainda mais o benefício de uma hierarquia da esquerda para a direita. No exemplo em verde na figura 28, as três zonas fornecem lista e contexto de confirmação. À medida que o usuário diminua a seleção da categoria de item para a confirmação, eles se movem da esquerda para a direita. Qualquer navegação inter-zona

61 60 se limita para cima e para baixo. Isto torna mais fácil para selecionar um item de uma longa lista e, em seguida, confirmar a seleção. Figura 28 - A zona de organização de padrão desejável conteúdo (Google Developers. Padrões de Projeto Google TV). No exemplo em vermelho indesejável (figura 29), a hierarquia é a mesma, mas é colocado para fora na vertical. Os usuários podem navegar para cima e para baixo para mover de zona. A navegação intra-zona é inconsistente, na parte superior e inferior da navegação. Dentro da zona a navegação é da esquerda para a direita, mas no centro é para cima e para baixo. Em um dispositivo touchscreen, este esquema é relativamente fácil de manusear, pois os usuários podem pular as zonas, já que podem tocar em qualquer área da UI. No entanto, em um dispositivo D-pad, os usuários não podem pular zonas. Para deslocar de uma região global no topo para os botões de confirmação no fundo, devem percorrer todos os itens na lista, na zona centro. Isso é difícil se a lista é grande, contendo 50 itens ou mais por exemplo. Usando hierarquia da esquerda para direita impede essa armadilha.

62 61 Figura 29 - Zona indesejável e padrão de layout conteúdo (Google Developers. Padrões de Projeto Google TV) UI Performance (Desempenhos UI) Estudos mostram que os usuários preferem aplicações rápidas, por isso deve equilibrar o visual com desempenho rápido. Além disso, dispositivos de TV variam consideravelmente, eles não podem tornar tão rápido quanto um computador. Antes de usar um grande número de animações complexas na aplicação, é preciso analisar e testar o impacto na satisfação do usuário. À medida que desenvolvem o aplicativo, tentar medir o desempenho do aplicativo em termos de quanto tempo certo as operações têm ou quantas instâncias de objetos são criadas usando as ferramentas de teste do Android. No entanto, esses indicadores não são importantes para os usuários finais. O caminho para alcançar o melhor desempenho nem sempre é o mesmo para obter o melhor desempenho absoluto mais rápido. Verificar se o aplicativo não executa código tanto que o tempo de execução não é capaz de atualizar freqüentemente a tela e recolher a entrada do usuário. Em alguns casos, a realização deste equilíbrio envolve a divisão de

Padrões GoF. Leonardo Gresta Paulino Murta leomurta@ic.uff.br

Padrões GoF. Leonardo Gresta Paulino Murta leomurta@ic.uff.br Padrões GoF Leonardo Gresta Paulino Murta leomurta@ic.uff.br Agenda Introdução Padrões de Criação Padrões de Estrutura Padrões de comportamento Leonardo Murta Padrões GoF 2 Introdução Os padrões GoF (Gamma

Leia mais

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br Manual do Usuário Versão 1.0.0 Copyright Vivo 2013 http://vivosync.com.br 1 1 Índice 1 Índice... 2 2 Vivo Sync... 5 3 Vivo Sync Web... 6 3.1 Página Inicial... 6 3.1.1 Novo Contato... 7 3.1.2 Editar Contato...

Leia mais

Programação Avançada. Padrões de Projeto de Software. Fonte: Oswaldo B. Peres e K19 Treinamentos

Programação Avançada. Padrões de Projeto de Software. Fonte: Oswaldo B. Peres e K19 Treinamentos Programação Avançada Padrões de Projeto de Software 1 Fonte: Oswaldo B. Peres e K19 Treinamentos Introdução Projetar software OO reusável e de boa qualidade é uma tarefa difícil; Para realizar essa tarefa

Leia mais

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br

Manual Vivo Sync. Manual do Usuário. Versão 1.0.0. Copyright Vivo 2013. http://vivosync.com.br Manual do Usuário Versão 1.0.0 Copyright Vivo 2013 http://vivosync.com.br 1 1 Índice 1 Índice... 2 2 Vivo Sync... 4 3 Vivo Sync Web... 5 3.1 Página Inicial... 5 3.1.1 Novo Contato... 6 3.1.2 Editar Contato...

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft PowerPoint 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Encontre o que você precisa Clique

Leia mais

Manual do Usuário Android Neocontrol

Manual do Usuário Android Neocontrol Manual do Usuário Android Neocontrol Sumário 1.Licença e Direitos Autorais...3 2.Sobre o produto...4 3. Instalando, Atualizando e executando o Android Neocontrol em seu aparelho...5 3.1. Instalando o aplicativo...5

Leia mais

Guia do usuário do PrintMe Mobile 3.0

Guia do usuário do PrintMe Mobile 3.0 Guia do usuário do PrintMe Mobile 3.0 Visão geral do conteúdo Sobre o PrintMe Mobile Requisitos do sistema Impressão Solução de problemas Sobre o PrintMe Mobile O PrintMe Mobile é uma solução empresarial

Leia mais

Novell Vibe 4.0. Março de 2015. Inicialização Rápida. Iniciando o Novell Vibe. Conhecendo a interface do Novell Vibe e seus recursos

Novell Vibe 4.0. Março de 2015. Inicialização Rápida. Iniciando o Novell Vibe. Conhecendo a interface do Novell Vibe e seus recursos Novell Vibe 4.0 Março de 2015 Inicialização Rápida Quando você começa a usar o Novell Vibe, a primeira coisa a se fazer é configurar sua área de trabalho pessoal e criar uma área de trabalho de equipe.

Leia mais

Manual do Usuário Nextel Cloud. Manual do Usuário. Versão 1.0.0. Copyright Nextel 2014. http://nextelcloud.nextel.com.br

Manual do Usuário Nextel Cloud. Manual do Usuário. Versão 1.0.0. Copyright Nextel 2014. http://nextelcloud.nextel.com.br Manual do Usuário Versão 1.0.0 Copyright Nextel 2014 http://nextelcloud.nextel.com.br 1 Nextel Cloud... 4 2 Nextel Cloud Web... 5 2.1 Página Inicial... 6 2.1.1 Meu Perfil... 7 2.1.2 Meu Dispositivo...

Leia mais

Informática básica: Sistema operacional Microsoft Windows XP

Informática básica: Sistema operacional Microsoft Windows XP Informática básica: Sistema operacional Microsoft Windows XP...1 Informática básica: Sistema operacional Microsoft Windows XP...1 Iniciando o Windows XP...2 Desligar o computador...3 Área de trabalho...3

Leia mais

Argo Navis J931 - Padrões de Design J2EE. Introdução. Objetivos de aprender padrões J2EE. Conhecer padrões para uso na plataforma J2EE

Argo Navis J931 - Padrões de Design J2EE. Introdução. Objetivos de aprender padrões J2EE. Conhecer padrões para uso na plataforma J2EE Padrões de Projeto J2EE J931 Introdução Helder da Rocha (helder@acm.org) argonavis.com.br Objetivos de aprender padrões J2EE Conhecer padrões para uso na plataforma J2EE Padrões permitem maior reuso, menos

Leia mais

Padrões de Projeto. Prof. Jefersson Alex dos Santos (jefersson@dcc.ufmg.br) http://www.dcc.ufmg.br/~jefersson

Padrões de Projeto. Prof. Jefersson Alex dos Santos (jefersson@dcc.ufmg.br) http://www.dcc.ufmg.br/~jefersson Padrões de Projeto Prof. Jefersson Alex dos Santos (jefersson@dcc.ufmg.br) http://www.dcc.ufmg.br/~jefersson Apresentação Conceitos Definição Ponto de vista prático História Padrões de Projeto Conhecidos

Leia mais

Curso - Padrões de Projeto Módulo 1: Introdução

Curso - Padrões de Projeto Módulo 1: Introdução Curso - Padrões de Projeto Módulo 1: Introdução Vítor E. Silva Souza vitorsouza@gmail.com http://www.javablogs.com.br/page/engenho http://esjug.dev.java.net Sobre o Instrutor Formação: Java: Graduação

Leia mais

O computador organiza os programas, documentos, músicas, fotos, imagens em Pastas com nomes, tudo separado.

O computador organiza os programas, documentos, músicas, fotos, imagens em Pastas com nomes, tudo separado. 1 Área de trabalho O Windows XP é um software da Microsoft (programa principal que faz o Computador funcionar), classificado como Sistema Operacional. Abra o Bloco de Notas para digitar e participar da

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido Microsoft PowerPoint 2013 apresenta uma aparência diferente das versões anteriores; desse modo, criamos este guia para ajudá-lo a minimizar a curva de aprendizado. Encontre o que

Leia mais

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Introdução ao Microsoft Windows 7 O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Visualmente o Windows 7 possui uma interface muito intuitiva, facilitando a experiência individual do

Leia mais

Guia do Usuário. Avigilon Control Center Móvel Versão 2.0 para Android

Guia do Usuário. Avigilon Control Center Móvel Versão 2.0 para Android Guia do Usuário Avigilon Control Center Móvel Versão 2.0 para Android 2011-2015 Avigilon Corporation. Todos os direitos reservados. AVIGILON é marca comercial registrada e/ou não registrada da Avigilon

Leia mais

Novell Vibe 3.4. Novell. 1º de julho de 2013. Inicialização Rápida. Iniciando o Novell Vibe. Conhecendo a interface do Novell Vibe e seus recursos

Novell Vibe 3.4. Novell. 1º de julho de 2013. Inicialização Rápida. Iniciando o Novell Vibe. Conhecendo a interface do Novell Vibe e seus recursos Novell Vibe 3.4 1º de julho de 2013 Novell Inicialização Rápida Quando você começa a usar o Novell Vibe, a primeira coisa a se fazer é configurar sua área de trabalho pessoal e criar uma área de trabalho

Leia mais

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano Informática Aplicada Aula 2 Windows Vista Professora: Cintia Caetano AMBIENTE WINDOWS O Microsoft Windows é um sistema operacional que possui aparência e apresentação aperfeiçoadas para que o trabalho

Leia mais

Inicialização Rápida do Novell Vibe Mobile

Inicialização Rápida do Novell Vibe Mobile Inicialização Rápida do Novell Vibe Mobile Março de 2015 Introdução O acesso móvel ao site do Novell Vibe pode ser desativado por seu administrador do Vibe. Se não conseguir acessar a interface móvel do

Leia mais

Qlik Sense Cloud. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados.

Qlik Sense Cloud. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Qlik Sense Cloud Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Qlik, QlikTech,

Leia mais

Novell. Novell Teaming 1.0. novdocx (pt-br) 6 April 2007 EXPLORAR O PORTLET BEM-VINDO DESCUBRA SEU CAMINHO USANDO O NOVELL TEAMING NAVIGATOR

Novell. Novell Teaming 1.0. novdocx (pt-br) 6 April 2007 EXPLORAR O PORTLET BEM-VINDO DESCUBRA SEU CAMINHO USANDO O NOVELL TEAMING NAVIGATOR Novell Teaming - Guia de início rápido Novell Teaming 1.0 Julho de 2007 INTRODUÇÃO RÁPIDA www.novell.com Novell Teaming O termo Novell Teaming neste documento se aplica a todas as versões do Novell Teaming,

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido

Leia mais

Manual. V e r s ã o i P a d

Manual. V e r s ã o i P a d Manual V e r s ã o i P a d índice I. Introdução II. Procedimentos básicos III. A agenda IV. Clientes V. Prontuário VI. Configurações VII. Medicamentos VIII. Tags IX. Receitas X. Contato I Introdução O

Leia mais

O conjunto é composto por duas seções: o App Inventor Designer e o App Inventor Blocks Editor, cada uma com uma função específica.

O conjunto é composto por duas seções: o App Inventor Designer e o App Inventor Blocks Editor, cada uma com uma função específica. Google App Inventor: o criador de apps para Android para quem não sabe programar Por Alexandre Guiss Fonte: www.tecmundo.com.br/11458-google-app-inventor-o-criador-de-apps-para-android-para-quem-naosabe-programar.htm

Leia mais

Unidade 1: O Painel de Controle do Excel *

Unidade 1: O Painel de Controle do Excel * Unidade 1: O Painel de Controle do Excel * material do 2010* 1.0 Introdução O Excel nos ajuda a compreender melhor os dados graças à sua organização em células (organizadas em linhas e colunas) e ao uso

Leia mais

Usar o Office 365 no iphone ou ipad

Usar o Office 365 no iphone ou ipad Usar o Office 365 no iphone ou ipad Guia de Início Rápido Verificar o email Configure o seu iphone ou ipad para enviar e receber emails de sua conta do Office 365. Verificar o seu calendário onde quer

Leia mais

Informática Aplicada

Informática Aplicada Informática Aplicada SO Windows Aula 3 Prof. Walteno Martins Parreira Jr www.waltenomartins.com.br waltenomartins@yahoo.com 2014 APRESENTAÇÃO Todo computador precisa de um sistema operacional. O Windows

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Manual de Utilização Google Grupos Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução... 3 Página

Leia mais

Inicialização Rápida do Novell Messenger 3.0.1 Móvel

Inicialização Rápida do Novell Messenger 3.0.1 Móvel Inicialização Rápida do Novell Messenger 3.0.1 Móvel Maio de 2015 O Novell Messenger 3.0.1 e posterior está disponível para seu dispositivo móvel ios, Android BlackBerry suportado. Como é possível efetuar

Leia mais

Manual do Aplicativo - Rastreamento Veicular

Manual do Aplicativo - Rastreamento Veicular Manual do Aplicativo - Rastreamento Veicular Sumário Apresentação... 2 Instalação do Aplicativo... 2 Localizando o aplicativo no smartphone... 5 Inserindo o link da aplicação... 6 Acessando o sistema...

Leia mais

Migrando para o Outlook 2010

Migrando para o Outlook 2010 Neste guia Microsoft O Microsoft Outlook 2010 está com visual bem diferente, por isso, criamos este guia para ajudar você a minimizar a curva de aprendizado. Leia-o para saber mais sobre as principais

Leia mais

Manual de Configuração e Utilização TabFisc Versão Mobile 09/2013 Pag. 1 MANUAL DE UTILIZAÇÃO TABLET VERSÃO MOBILE

Manual de Configuração e Utilização TabFisc Versão Mobile 09/2013 Pag. 1 MANUAL DE UTILIZAÇÃO TABLET VERSÃO MOBILE Pag. 1 MANUAL DE UTILIZAÇÃO TABLET VERSÃO MOBILE Pag. 2 INTRODUÇÃO Esse documento contém as instruções básicas para a utilização do TabFisc Versão Mobile (que permite ao fiscal a realização do seu trabalho

Leia mais

Manual Easy Chat Data de atualização: 20/12/2010 16:09 Versão atualizada do manual disponível na área de download do software.

Manual Easy Chat Data de atualização: 20/12/2010 16:09 Versão atualizada do manual disponível na área de download do software. 1 - Sumário 1 - Sumário... 2 2 O Easy Chat... 3 3 Conceitos... 3 3.1 Perfil... 3 3.2 Categoria... 4 3.3 Ícone Específico... 4 3.4 Janela Específica... 4 3.5 Ícone Geral... 4 3.6 Janela Geral... 4 4 Instalação...

Leia mais

Como configurar e-mails nos celulares. Ebook. Como configurar e-mails no seu celular. W3alpha - Desenvolvimento e hospedagem na internet

Como configurar e-mails nos celulares. Ebook. Como configurar e-mails no seu celular. W3alpha - Desenvolvimento e hospedagem na internet Ebook Como configurar e-mails no seu celular Este e-book irá mostrar como configurar e-mails, no seu celular. Sistemas operacionais: Android, Apple, BlackBerry, Nokia e Windows Phone Há muitos modelos

Leia mais

Migrando para o Word 2010

Migrando para o Word 2010 Neste guia O Microsoft Word 2010 está com visual bem diferente, por isso, criamos este guia para ajudar você a minimizar a curva de aprendizado. Leia-o para saber as partes principais da nova interface,

Leia mais

Índice. Para encerrar um atendimento (suporte)... 17. Conversa... 17. Adicionar Pessoa (na mesma conversa)... 20

Índice. Para encerrar um atendimento (suporte)... 17. Conversa... 17. Adicionar Pessoa (na mesma conversa)... 20 Guia de utilização Índice Introdução... 3 O que é o sistema BlueTalk... 3 Quem vai utilizar?... 3 A utilização do BlueTalk pelo estagiário do Programa Acessa Escola... 5 A arquitetura do sistema BlueTalk...

Leia mais

BlackBerry Mobile Voice System

BlackBerry Mobile Voice System BlackBerry Mobile Voice System Versão: 5.0 Service pack: 2 Testes de verificação SWD-980801-0125102730-012 Conteúdo 1 Visão geral... 4 2 Tipos de telefones e contas de usuário... 5 3 Verificando a instalação

Leia mais

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART

Continuação. 32. Inserir uma imagem da GALERIA CLIP-ART Continuação 32. Inserir uma imagem da GALERIA CLIP-ART a) Vá para o primeiro slide da apresentação salva no item 31. b) Na guia PÁGINA INICIAL, clique no botão LAYOUT e selecione (clique) na opção TÍTULO

Leia mais

ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007

ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007 ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007 CURITIBA 2015 2 SUMÁRIO INTRODUÇÃO AO MICROSOFT POWERPOINT 2007... 3 JANELA PRINCIPAL... 3 1 - BOTÃO OFFICE... 4 2 - FERRAMENTAS DE ACESSO

Leia mais

Como funciona a MEO Cloud?

Como funciona a MEO Cloud? Boas-vindas O que é a MEO Cloud? A MEO Cloud é um serviço da Portugal Telecom, lançado a 10 de Dezembro de 2012, de alojamento e sincronização de ficheiros. Ao criar uma conta na MEO Cloud fica com 16

Leia mais

Manual do Painel Administrativo

Manual do Painel Administrativo Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...

Leia mais

OneDrive: saiba como usar a nuvem da Microsoft

OneDrive: saiba como usar a nuvem da Microsoft OneDrive: saiba como usar a nuvem da Microsoft O OneDrive é um serviço de armazenamento na nuvem da Microsoft que oferece a opção de guardar até 7 GB de arquivos grátis na rede. Ou seja, o usuário pode

Leia mais

Anexo III Funcionamento detalhado do Sistema Montador de Autoria

Anexo III Funcionamento detalhado do Sistema Montador de Autoria 1 Sumário Anexo III Funcionamento detalhado do Sistema Montador de Autoria Anexo III Funcionamento detalhado do Sistema Montador de Autoria... 1 1 Sumário... 1 2 Lista de Figuras... 5 3 A Janela principal...

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Alterne entre a entrada por toque

Leia mais

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal.

A barra de menu a direita possibilita efetuar login/logout do sistema e também voltar para a página principal. MANUAL DO SISCOOP Sumário 1 Menu de Navegação... 3 2 Gerenciar País... 5 3- Gerenciamento de Registro... 8 3.1 Adicionar um registro... 8 3.2 Editar um registro... 10 3.3 Excluir um registro... 11 3.4

Leia mais

Manual TIM PROTECT BACKUP. Manual do Usuário. Versão 1.0.0. Copyright TIM PROTECT BACKUP 2013. http://timprotect.com.br/

Manual TIM PROTECT BACKUP. Manual do Usuário. Versão 1.0.0. Copyright TIM PROTECT BACKUP 2013. http://timprotect.com.br/ Manual do Usuário Versão 1.0.0 Copyright TIM PROTECT BACKUP 2013 http://timprotect.com.br/ 1 1 Índice 1 Índice... 2 2 TIM PROTECT BACKUP...Erro! Indicador não definido. 3 TIM PROTECT BACKUP Web... 6 3.1

Leia mais

Introdução a Computação Móvel

Introdução a Computação Móvel Introdução a Computação Móvel Computação Móvel Prof. Me. Adauto Mendes adauto.inatel@gmail.com Histórico Em 1947 alguns engenheiros resolveram mudar o rumo da história da telefonia. Pensando em uma maneira

Leia mais

Portal AEPQ Manual do utilizador

Portal AEPQ Manual do utilizador Pedro Gonçalves Luís Vieira Portal AEPQ Manual do utilizador Setembro 2008 Engenharia Informática - Portal AEPQ Manual do utilizador - ii - Conteúdo 1 Introdução... 1 1.1 Estrutura do manual... 3 1.2 Requisitos...

Leia mais

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania

Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Sumário Objetivos do Blog... 2 Log-in... 3 Esqueci minha senha... 4 Utilizando o Blog... 5 Encontrando seu Blog... 5 Conhecendo o

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

Mozart de Melo Alves Júnior

Mozart de Melo Alves Júnior Mozart de Melo Alves Júnior WORD 2000 INTRODUÇÃO: O Word é um processador de texto com recursos de acentuação, formatação de parágrafo, estilo de letras diferentes, criação de tabelas, corretor ortográfico,

Leia mais

Manual do usuário. Intelbras isic5 Tablet - Android

Manual do usuário. Intelbras isic5 Tablet - Android Manual do usuário Intelbras isic5 Tablet - Android Intelbras isic5 Tablet - Android Parabéns, você acaba de adquirir um produto com a qualidade e segurança Intelbras. Este manual irá auxiliá-lo na instalação

Leia mais

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0 Ajuda ao Usuário A S S I S T E N T E P I M A C O + 2.2.0 Ajuda ao usuário Índice 1. BÁSICO 1 1. INICIANDO O APLICATIVO 2 2. O AMBIENTE DE

Leia mais

Digitalização. Copiadora e Impressora WorkCentre C2424

Digitalização. Copiadora e Impressora WorkCentre C2424 Digitalização Este capítulo inclui: Digitalização básica na página 4-2 Instalando o driver de digitalização na página 4-4 Ajustando as opções de digitalização na página 4-5 Recuperando imagens na página

Leia mais

Modelo: H.264 Câmera IP (1.0 Megapixels) guia de instalação rápida

Modelo: H.264 Câmera IP (1.0 Megapixels) guia de instalação rápida 1 Modelo: H.264 Câmera IP (1.0 Megapixels) guia de instalação rápida 1. Colocado diretamente no desktop Colocou a câmera IP na posição adequada 2 2. Montagem na parede O suporte com o parafuso de bloqueio

Leia mais

RELATÓRIO DO GOMOMETER

RELATÓRIO DO GOMOMETER RELATÓRIO DO GOMOMETER Análise e conselhos personalizados para criar sites mais otimizados para celular Inclui: Como os clientes de celular veem seu site atual Verificação da velocidade de carregamento

Leia mais

Lync Acessando o Lync Web App

Lync Acessando o Lync Web App Lync Acessando o Lync Web App Saiba como ingressar em uma reunião, quais são os recursos disponíveis, as configurações e conheça o layout do Lync Web App. Sumário Lync Web App... 1 Ingressar em uma Reunião

Leia mais

PORTAL DE COMPRAS SÃO JOSÉ DO RIO PRETO

PORTAL DE COMPRAS SÃO JOSÉ DO RIO PRETO Compra Direta - Guia do Fornecedor PORTAL DE COMPRAS SÃO JOSÉ DO RIO PRETO Página As informações contidas neste documento, incluindo quaisquer URLs e outras possíveis referências a web sites, estão sujeitas

Leia mais

think with técnicas infalíveis para ter o melhor 25site mobile

think with técnicas infalíveis para ter o melhor 25site mobile think with técnicas infalíveis para ter o melhor 25site mobile A internet no celular é uma realidade gigantesca no Brasil. Basta dizer que 72% dos usuários de smartphones acessam a web todos os dias em

Leia mais

ROBERTO OLIVEIRA CUNHA

ROBERTO OLIVEIRA CUNHA LEIAME APRESENTAÇÃO Nenhuma informação do TUTORIAL DO MICRO- SOFT OFFICE WORD 2003 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha. Programador:

Leia mais

Manual de Utilização do Sistema GRServer Cam on-line (Gerenciamento de Câmeras On-line)

Manual de Utilização do Sistema GRServer Cam on-line (Gerenciamento de Câmeras On-line) Manual de Utilização do Sistema GRServer Cam on-line (Gerenciamento de Câmeras On-line) Criamos, desenvolvemos e aperfeiçoamos ferramentas que tragam a nossos parceiros e clientes grandes oportunidades

Leia mais

Manual Backup Online. Manual do Usuário. Versão 1.0.1. Copyright Backup Online 2014. https://backuponlinegvt.com.br

Manual Backup Online. Manual do Usuário. Versão 1.0.1. Copyright Backup Online 2014. https://backuponlinegvt.com.br Manual Backup Online Manual do Usuário Versão 1.0.1 Copyright Backup Online 2014 https://backuponlinegvt.com.br 1 Manual Backup Online 1 Índice 1 Índice... 2 2 Backup Online...Erro! Indicador não definido.

Leia mais

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de

Leia mais

Lidar com números e estatísticas não é fácil. Reunir esses números numa apresentação pode ser ainda mais complicado.

Lidar com números e estatísticas não é fácil. Reunir esses números numa apresentação pode ser ainda mais complicado. , ()! $ Lidar com números e estatísticas não é fácil. Reunir esses números numa apresentação pode ser ainda mais complicado. Uma estratégia muito utilizada para organizar visualmente informações numéricas

Leia mais

Universidade Federal de Santa Catarina CAPÍTULO 6 GRÁFICOS NO EXCEL.

Universidade Federal de Santa Catarina CAPÍTULO 6 GRÁFICOS NO EXCEL. CAPÍTULO 6 GRÁFICOS NO EXCEL. Um gráfico no Excel é uma representação gráfica dos números de sua planilha - números transformados em imagens. O Excel examina um grupo de células que tenham sido selecionadas.

Leia mais

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Introdução ao Microsoft Windows 7 O Windows 7 é um sistema operacional desenvolvido pela Microsoft. Visualmente o Windows 7 possui uma interface muito intuitiva, facilitando a experiência individual do

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 4

ÍNDICE... 2 INTRODUÇÃO... 4 Mic crosoft Excel 201 0 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 4 Interface... 4 Guias de Planilha... 5 Movimentação na planilha... 6 Entrada de textos e números... 7 Congelando painéis... 8 Comentários nas Células...

Leia mais

Google Drive. Passos. Configurando o Google Drive

Google Drive. Passos. Configurando o Google Drive Google Drive um sistema de armazenagem de arquivos ligado à sua conta Google e acessível via Internet, desta forma você pode acessar seus arquivos a partir de qualquer dispositivo que tenha acesso à Internet.

Leia mais

Novell Teaming 2.0. Novell. 29 de julho de 2009. Início Rápido. Iniciando o Novell Teaming. Conhecendo a interface do Novell Teaming e seus recursos

Novell Teaming 2.0. Novell. 29 de julho de 2009. Início Rápido. Iniciando o Novell Teaming. Conhecendo a interface do Novell Teaming e seus recursos Novell Teaming 2.0 29 de julho de 2009 Novell Início Rápido Quando você começa a usar o Novell Teaming, a primeira coisa a se fazer é configurar sua área de trabalho pessoal e criar uma área de trabalho

Leia mais

Manual do usuário. isic 5 - Android

Manual do usuário. isic 5 - Android Manual do usuário isic 5 - Android isic 5 - Android Parabéns, você acaba de adquirir um produto com a qualidade e segurança Intelbras. O novo aplicativo Intelbras isic 5 possui tecnologia capaz de visualizar

Leia mais

INTRODUÇÃO. A Claireconference agradece pela escolha!

INTRODUÇÃO. A Claireconference agradece pela escolha! 1 ÍNDICE 1. IMPLEMENTAÇÃO 4 1.1 PAINEL DE CONTROLE 4 1.1.1 SENHA 4 1.1.2 CRIAÇÃO DE USUÁRIOS DO LYNC 5 1.1.3 REDEFINIR SENHA 7 1.1.4 COMPRAR COMPLEMENTOS 9 1.1.5 UPGRADE E DOWNGRADE 10 1.1.5.1 UPGRADE

Leia mais

parte I Apostila Esquematizada de Informática Sumário Navegadores e Mecanismos de Pesquisas na web Unidade 1 Navegadores (browser)

parte I Apostila Esquematizada de Informática Sumário Navegadores e Mecanismos de Pesquisas na web Unidade 1 Navegadores (browser) Apostila Esquematizada de Informática parte I Navegadores e Mecanismos de Pesquisas na web Sumário Unidade 1 Navegadores (browser) Unidade 2 Internet Explorer Explorando a interface e suas funções Unidade

Leia mais

1Introdução Helder da Rocha (helder@acm.org)

1Introdução Helder da Rocha (helder@acm.org) J930 Padrões Projeto de 1Introdução Helder da Rocha (helder@acm.org) argonavis.com.br O que é um padrão? Maneira testada ou documentada de alcançar um objetivo qualquer Padrões são comuns em várias áreas

Leia mais

Seu manual do usuário HP SLATE 10 HD 3500EF SILVER http://pt.yourpdfguides.com/dref/5512768

Seu manual do usuário HP SLATE 10 HD 3500EF SILVER http://pt.yourpdfguides.com/dref/5512768 Você pode ler as recomendações contidas no guia do usuário, no guia de técnico ou no guia de instalação para HP SLATE 10 HD 3500EF SILVER. Você vai encontrar as respostas a todas suas perguntas sobre a

Leia mais

Banco de Dados Microsoft Access: Criar tabelas

Banco de Dados Microsoft Access: Criar tabelas Banco de Dados Microsoft Access: Criar s Vitor Valerio de Souza Campos Objetivos do curso 1. Criar uma no modo de exibição Folha de Dados. 2. Definir tipos de dados para os campos na. 3. Criar uma no modo

Leia mais

Tecnologias Web. Padrões de Projeto - Camada de Apresentação

Tecnologias Web. Padrões de Projeto - Camada de Apresentação Tecnologias Web Padrões de Projeto - Camada de Apresentação Cristiano Lehrer, M.Sc. Padrões da Camada de Apresentação (1/2) Intercepting Filter Viabiliza pré e pós processamento de requisições. Front Controller

Leia mais

CERTIDÕES UNIFICADAS

CERTIDÕES UNIFICADAS CERTIDÕES UNIFICADAS Manual de operação Perfil Cartório CERTUNI Versão 1.0.0 MINISTÉRIO DA JUSTIÇA Departamento de Inovação Tecnológica Divisão de Tecnologia da Informação Sumário LISTA DE FIGURAS... 2

Leia mais

Usar o Office 365 em seu telefone Android

Usar o Office 365 em seu telefone Android Usar o Office 365 em seu telefone Android Guia de Início Rápido Verificar o email Configure o seu telefone Android para enviar e receber emails de sua conta do Office 365. Verificar o seu calendário onde

Leia mais

Capitulo 11 Multimídias

Capitulo 11 Multimídias Capitulo 11 Multimídias Neste capítulo são exploradas as ferramentas multimídias presentes no SO Android customizadas para o Smartphone utilizado neste manual. É inegável o massivo uso destas ferramentas,

Leia mais

Introdução à Padrões de Projeto. Glauber Magalhães Pires

Introdução à Padrões de Projeto. Glauber Magalhães Pires Introdução à Padrões de Projeto Glauber Magalhães Pires Agenda O que são padrões de projeto? Para que servem e por que utilizá-los? Elementos constituintes Como escolher o padrão a ser usado? Como são

Leia mais

Como Criar uma Aula? Na página inicial do Portal do Professor, acesse ESPAÇO DA AULA: Ao entrar no ESPAÇO DA AULA, clique no ícone Criar Aula :

Como Criar uma Aula? Na página inicial do Portal do Professor, acesse ESPAÇO DA AULA: Ao entrar no ESPAÇO DA AULA, clique no ícone Criar Aula : Como Criar uma Aula? Para criar uma sugestão de aula é necessário que você já tenha se cadastrado no Portal do Professor. Para se cadastrar clique em Inscreva-se, localizado na primeira página do Portal.

Leia mais

1. Introdução a Microsoft Excel

1. Introdução a Microsoft Excel Introdução a Microsoft Excel 1. Introdução a Microsoft Excel 1.1. O que é Microsoft Excel Microsoft Excel é um software de planilha eletrônica produzido pela Microsoft Corporation, para o sistema operacional

Leia mais

Banco de Dados Microsoft Access: Criar tabelas. Vitor Valerio de Souza Campos

Banco de Dados Microsoft Access: Criar tabelas. Vitor Valerio de Souza Campos Banco de Dados Microsoft Access: Criar tabelas Vitor Valerio de Souza Campos Objetivos do curso 1. Criar uma tabela no modo de exibição Folha de Dados. 2. Definir tipos de dados para os campos na tabela.

Leia mais

ÍNDICE. Sobre o SabeTelemarketing 03. Contato. Ícones comuns à várias telas de gerenciamento. Verificar registros 09. Tela de relatórios 09

ÍNDICE. Sobre o SabeTelemarketing 03. Contato. Ícones comuns à várias telas de gerenciamento. Verificar registros 09. Tela de relatórios 09 ÍNDICE Sobre o SabeTelemarketing 03 Ícones comuns à várias telas de gerenciamento Contato Verificar registros 09 Telas de cadastro e consultas 03 Menu Atalho Nova pessoa Incluir um novo cliente 06 Novo

Leia mais

Recursos do Outlook Web Access

Recursos do Outlook Web Access Recursos do Outlook Web Access Este material foi criado pela Secretaria de Tecnologia de Informação e Comunicação (SETIC) do Tribunal Regional do Trabalho da 17ª Região. Seu intuito é apresentar algumas

Leia mais

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010. 1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.

Leia mais

SSE 3.0. Guia Rápido. Módulo Secretaria. Nesta Edição

SSE 3.0. Guia Rápido. Módulo Secretaria. Nesta Edição SSE 3.0 Guia Rápido Módulo Secretaria Nesta Edição 1 Acessando o Módulo Secretaria 2 Cadastros Auxiliares 3 Criação de Modelos Definindo o Layout do Modelo Alterando o Layout do Cabeçalho 4 Parametrização

Leia mais

QUESTÕES SOBRE WINDOWS 7

QUESTÕES SOBRE WINDOWS 7 Informática Windows 7 QUESTÕES SOBRE WINDOWS 7 1) Considerando a figura exibida acima, ao repousar o ponteiro do mouse sobre o ícone doword, aparecerão três miniaturas, representando arquivos desse programa

Leia mais

J930. Padrões. Projeto. Introdução. argonavis.com.br. Helder da Rocha (helder@acm.org)

J930. Padrões. Projeto. Introdução. argonavis.com.br. Helder da Rocha (helder@acm.org) Padrões de J930 Projeto Introdução Helder da Rocha (helder@acm.org) argonavis.com.br O que é um padrão? Maneira testada ou documentada de alcançar um objetivo qualquer Padrões são comuns em várias áreas

Leia mais

Microsoft Office PowerPoint 2007

Microsoft Office PowerPoint 2007 INTRODUÇÃO AO MICROSOFT POWERPOINT 2007 O Microsoft Office PowerPoint 2007 é um programa destinado à criação de apresentação através de Slides. A apresentação é um conjunto de Sides que são exibidos em

Leia mais

Manual do Portal do Usuário 4.8

Manual do Portal do Usuário 4.8 Manual do Portal do Usuário 4.8 Este Manual MobiDM descreve as operações básicas do portal ao nível de acesso do usuário Versão: x.x Manual do Usuário MOBIDM Página 1 Índice Introdução 2 Arquivos de ajuda

Leia mais

7 Utilização do Mobile Social Gateway

7 Utilização do Mobile Social Gateway 7 Utilização do Mobile Social Gateway Existem três atores envolvidos na arquitetura do Mobile Social Gateway: desenvolvedor do framework MoSoGw: é o responsável pelo desenvolvimento de novas features,

Leia mais

O MESMO EXCELENTE CONTEÚDO. UMA MELHOR EXPERIÊNCIA DE USUÁRIO.

O MESMO EXCELENTE CONTEÚDO. UMA MELHOR EXPERIÊNCIA DE USUÁRIO. O MESMO EXCELENTE CONTEÚDO. UMA MELHOR EXPERIÊNCIA DE USUÁRIO. Bem-vindo à nova interface do Catálogo de Vídeos da CNN Newsource. Elaborada pela BitCentral, esta nova interface proporciona o mesmo conteúdo

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft OneNote 2013 apresenta uma aparência diferente das versões anteriores; desse modo, criamos este guia para ajudá-lo a minimizar a curva de aprendizado. Alternar entre o

Leia mais

Manual do Usuário Nextel Cloud. Manual do Usuário. Versão 1.0.1. Copyright Nextel 2014. http://nextelcloud.nextel.com.br

Manual do Usuário Nextel Cloud. Manual do Usuário. Versão 1.0.1. Copyright Nextel 2014. http://nextelcloud.nextel.com.br Manual do Usuário Nextel Cloud Manual do Usuário Versão 1.0.1 Copyright Nextel 2014 http://nextelcloud.nextel.com.br 1 Manual do Usuário Nextel Cloud 1 Índice 1 Índice... 2 2 Nextel Cloud... 3 3 Instalação

Leia mais

Ferramenta: Spider-CL. Manual do Usuário. Versão da Ferramenta: 1.1. www.ufpa.br/spider

Ferramenta: Spider-CL. Manual do Usuário. Versão da Ferramenta: 1.1. www.ufpa.br/spider Ferramenta: Spider-CL Manual do Usuário Versão da Ferramenta: 1.1 www.ufpa.br/spider Histórico de Revisões Data Versão Descrição Autor 14/07/2009 1.0 15/07/2009 1.1 16/07/2009 1.2 20/05/2010 1.3 Preenchimento

Leia mais

Conhecendo seu telefone

Conhecendo seu telefone Conhecendo seu telefone Fone de ouvido Tecla de navegação S Lentes da câmera Tecla virtual esquerda Teclas de volume Tecla Enviar N Tecla virtual direita Tecla Menu M Tecla Finalizar O Porta da bateria

Leia mais

AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II)

AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II) AULA 3 FERRAMENTAS E APLICATIVOS DE NAVEGAÇÃO, DE CORREIO ELETRÔNICO, DE GRUPOS DE DISCUSSÃO, DE BUSCA E PESQUISA (PARTE II) A seguir vamos ao estudo das ferramentas e aplicativos para utilização do correio

Leia mais

Office 365 Manual Outlook 365 Web Application

Office 365 Manual Outlook 365 Web Application Office 365 Manual Outlook 365 Web Application Requisitos para usar o Office 365: Ter instalado pelo menos a versão 7 do Internet Explorer, Mozilla Firefox 15, Google Chrome 21 ou Safari no Mac. O que é

Leia mais