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

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

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

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

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

Conheça o seu telefone

Conheça o seu telefone Conheça o seu telefone O nome MOTOROLA e sua logomarca estilizada M estão registrados no Escritório de Marcas e Patentes dos EUA. Motorola, Inc. 2008 Algumas funções do telefone celular dependem da capacidade

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

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

Índice de ilustrações

Índice de ilustrações Sumário 1Dez novos recursos do windows 8...2 1.1Interface Metro...2 1.2Internet Explorer 10...4 1.3Gerenciador de Tarefas...5 1.4Painel de Controle...5 1.5Interface Ribbon...6 1.6Menu Iniciar...7 1.7Windows

Leia mais

Excel 2010 Modulo II

Excel 2010 Modulo II Excel 2010 Modulo II Sumário Nomeando intervalos de células... 1 Classificação e filtro de dados... 3 Subtotais... 6 Validação e auditoria de dados... 8 Validação e auditoria de dados... 9 Cenários...

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

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

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

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

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

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 Usuário Microsoft Apps for Symbian

Manual do Usuário Microsoft Apps for Symbian Manual do Usuário Microsoft Apps for Symbian Edição 1.0 2 Sobre os aplicativos da Microsoft Sobre os aplicativos da Microsoft Os aplicativos Microsoft oferecem aplicativos corporativos Microsoft para o

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

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

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

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

Guia de Utilização do Microsoft Dynamics CRM (Gestão de Relacionamento com Clientes)

Guia de Utilização do Microsoft Dynamics CRM (Gestão de Relacionamento com Clientes) Guia de Utilização do Microsoft Dynamics CRM (Gestão de Relacionamento com Clientes) 1. Sobre o Microsoft Dynamics CRM - O Microsoft Dynamics CRM permite criar e manter facilmente uma visão clara dos clientes,

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

Professor: Macêdo Firmino Introdução ao Windows 7

Professor: Macêdo Firmino Introdução ao Windows 7 Professor: Macêdo Firmino Introdução ao Windows 7 O hardware não consegue executar qualquer ação sem receber instrução. Essas instruções são chamadas de software ou programas de computador. O software

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

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

Brasil. Características da Look 312P. Instalação da Look 312P

Brasil. Características da Look 312P. Instalação da Look 312P Características da Look 312P 1 2 3 Lente Foco manual pelo ajuste da lente. Bolso Você pode colocar o cabo no bolso. Corpo dobrável Ajuste a Look 312P em diferentes posições. Instalação da Look 312P 1.

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

Solução de gerenciamento de sistemas Dell KACE K1000 Versão 5.5. Guia de gerenciamento de ativos. Julho de 2013

Solução de gerenciamento de sistemas Dell KACE K1000 Versão 5.5. Guia de gerenciamento de ativos. Julho de 2013 Solução de gerenciamento de sistemas Dell KACE K1000 Versão 5.5 Guia de gerenciamento de ativos Julho de 2013 2004-2013 Dell, Inc. Todos os direitos reservados. Qualquer forma de reprodução deste material

Leia mais

Manual do Teclado de Satisfação Local Versão 1.4.1

Manual do Teclado de Satisfação Local Versão 1.4.1 Manual do Teclado de Satisfação Local Versão 1.4.1 26 de agosto de 2015 Departamento de Engenharia de Produto (DENP) SEAT Sistemas Eletrônicos de Atendimento 1. Introdução O Teclado de Satisfação é uma

Leia mais

Manual do Teclado de Satisfação Local Versão 1.2.2

Manual do Teclado de Satisfação Local Versão 1.2.2 Manual do Teclado de Satisfação Local Versão 1.2.2 18 de fevereiro de 2015 Departamento de Engenharia de Produto (DENP) SEAT Sistemas Eletrônicos de Atendimento 1. Introdução O Teclado de Satisfação é

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

Manual do Usuário Microsoft Apps

Manual do Usuário Microsoft Apps Manual do Usuário Microsoft Apps Edição 1 2 Sobre os aplicativos da Microsoft Sobre os aplicativos da Microsoft Os aplicativos da Microsoft oferecem aplicativos para negócios para o seu telefone Nokia

Leia mais

Google Apps para o Office 365 para empresas

Google Apps para o Office 365 para empresas Google Apps para o Office 365 para empresas Faça a migração O Office 365 para empresas tem uma aparência diferente do Google Apps, de modo que, ao entrar, você poderá obter esta exibição para começar.

Leia mais

1. EXCEL 7 1.1. PLANILHAS ELETRÔNICAS 1.2. CARREGAMENTO DO EXCEL 7

1. EXCEL 7 1.1. PLANILHAS ELETRÔNICAS 1.2. CARREGAMENTO DO EXCEL 7 1. EXCEL 1.1. PLANILHAS ELETRÔNICAS As planilhas eletrônicas ficarão na história da computação como um dos maiores propulsores da microinformática. Elas são, por si sós, praticamente a causa da explosão

Leia mais

Padrões clássicos ou padrões GoF O livro "Design Patterns (1994) de Erich Gamma, John Vlissides, Ralph Jonhson e Richard Helm, descreve 23 padrões de

Padrões clássicos ou padrões GoF O livro Design Patterns (1994) de Erich Gamma, John Vlissides, Ralph Jonhson e Richard Helm, descreve 23 padrões de Padrões de Projeto Disciplina: Engenharia de Software - 2009.1 Professora: Rossana Maria de Castro Andrade Assistente da disciplina: Ricardo Fernandes de Almeida 1 O que é um Padrão? Um padrão descreve

Leia mais

Aviso. O conteúdo deste documento é de propriedade intelectual exclusiva da GVDASA Sistemas e está sujeito a alterações sem aviso prévio.

Aviso. O conteúdo deste documento é de propriedade intelectual exclusiva da GVDASA Sistemas e está sujeito a alterações sem aviso prévio. Guia de Utilização 2015 Aviso O conteúdo deste documento é de propriedade intelectual exclusiva da GVDASA Sistemas e está sujeito a alterações sem aviso prévio. Nenhuma parte desta publicação pode ser

Leia mais

MÓDULO - I Manual Prático Microsoft Excel 2007

MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I APRESENTAÇÃO... 1 AMBIENTE DE TRABALHO... 2 A folha de cálculo... 2 O ambiente de trabalho do Excel... 3 Faixas de Opções do Excel... 4 - Guia

Leia mais

BlackBerry Desktop Software. Versão: 7.1. Guia do usuário

BlackBerry Desktop Software. Versão: 7.1. Guia do usuário BlackBerry Desktop Software Versão: 7.1 Guia do usuário Publicado: 2012-06-05 SWD-20120605130141061 Conteúdo Aspectos básicos... 7 Sobre o BlackBerry Desktop Software... 7 Configurar seu smartphone com

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

Universidade Federal do Rio de Janeiro NCE/PGTIAE. Tutorial SweetHome3D

Universidade Federal do Rio de Janeiro NCE/PGTIAE. Tutorial SweetHome3D Universidade Federal do Rio de Janeiro NCE/PGTIAE Tutorial SweetHome3D Trabalho apresentado ao Prof. Carlo na Disciplina de Software Livre no curso Pós Graduação em Tecnologia da Informação Aplicada a

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. 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

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 03: Pacote Microsoft Office 2007 O Pacote Microsoft Office é um conjunto de aplicativos composto, principalmente, pelos

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

Moodlerooms Instructor Essentials

Moodlerooms Instructor Essentials Moodlerooms Instructor Essentials [Type the company address] 2015 Moodlerooms Índice VISÃO GERAL DO BOLETIM JOULE... 4 Benefícios do Boletim Joule... 4 Documentação do professor no Boletim Joule... 4 Acesso

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

UNIVERSIDADE FEDERAL DO PARÁ INSTITUTO DE CIÊNCIAS EXATAS E NATURAIS ESPECIALIZAÇÃO EM ESTATÍSTICAS EDUCACIONAIS. Prof. M.Sc.

UNIVERSIDADE FEDERAL DO PARÁ INSTITUTO DE CIÊNCIAS EXATAS E NATURAIS ESPECIALIZAÇÃO EM ESTATÍSTICAS EDUCACIONAIS. Prof. M.Sc. UNIVERSIDADE FEDERAL DO PARÁ INSTITUTO DE CIÊNCIAS EXATAS E NATURAIS ESPECIALIZAÇÃO EM ESTATÍSTICAS EDUCACIONAIS Microsoft Office PowerPoint 2007 Prof. M.Sc. Fábio Hipólito Julho / 2009 Visite o site:

Leia mais

Noções básicas. Índice analítico. Quick User Guide - Português (Brasil)

Noções básicas. Índice analítico. Quick User Guide - Português (Brasil) Noções básicas Este Guia Rápido do Usuário ajuda você a começar a usar o IRIScan TM Anywhere Wifi. Leia este guia antes de operar este scanner e seu software. Todas as informações estão sujeitas a alterações

Leia mais

Programação Orientada a Objetos. Padrões de Criação

Programação Orientada a Objetos. Padrões de Criação Programação Orientada a Objetos Padrões de Criação Cristiano Lehrer, M.Sc. Objetivos Apresentar cada um dos 23 padrões clássicos descrevendo: O problema que solucionam. A solução. Diagramas UML (Unified

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 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

Guia do Usuário ader OEC Tr Conta 18 de Junho de 2008

Guia do Usuário ader OEC Tr Conta 18 de Junho de 2008 Guia do Usuário OEC Trader Conta 18 de Junho de 2008 Página 2 18 de Junho de 2008 Tabela de Conteúdos POSIÇÕES MÉDIAS... 4 Exibir e reorganizar colunas... 6 Definições de Posições de cabeçalho na janela...

Leia mais

SENAI São Lourenço do Oeste. Introdução à Informática. Adinan Southier Soares

SENAI São Lourenço do Oeste. Introdução à Informática. Adinan Southier Soares SENAI São Lourenço do Oeste Introdução à Informática Adinan Southier Soares Informações Gerais Objetivos: Introduzir os conceitos básicos da Informática e instruir os alunos com ferramentas computacionais

Leia mais

Aula 1 - Introdução e configuração de ambiente de desenvolvimento

Aula 1 - Introdução e configuração de ambiente de desenvolvimento Aula 1 - Introdução e configuração de ambiente de desenvolvimento Olá, seja bem-vindo à primeira aula do curso para desenvolvedor de Android, neste curso você irá aprender a criar aplicativos para dispositivos

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

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

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

administração Guia de BlackBerry Internet Service Versão: 4.5.1

administração Guia de BlackBerry Internet Service Versão: 4.5.1 BlackBerry Internet Service Versão: 4.5.1 Guia de administração Publicado: 16/01/2014 SWD-20140116140606218 Conteúdo 1 Primeiros passos... 6 Disponibilidade de recursos administrativos... 6 Disponibilidade

Leia mais

Point of View ProTab 26 - Android 4.1 Tablet PC

Point of View ProTab 26 - Android 4.1 Tablet PC Point of View ProTab 26 - Android 4.1 Tablet PC Português Índice Índice... 1 Condições gerais de uso... 2 Avisos... 2 Conteúdo da Caixa... 2 1.0 Informações básicas do produto... 3 1.1 Botões e Conexões...

Leia mais

Noções de Informática

Noções de Informática Noções de Informática 2º Caderno Conteúdo Microsoft Excel 2010 - estrutura básica das planilhas; manipulação de células, linhas e colunas; elaboração de tabelas e gráficos; inserção de objetos; campos

Leia mais

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 2 Continuação do Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 3 Capítulo 2 - Site do Dreamweaver

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

DRIVE CONTÁBIL NASAJON

DRIVE CONTÁBIL NASAJON DRIVE CONTÁBIL NASAJON Módulo Gestão de Documentos Versão 1.0 Manual do Usuário 1 Sumário Os Módulos do Gerenciador de NFe: Informações Básicas Primeiro Acesso: Requisitos Acesso ao Drive Contábil Nasajon

Leia mais

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan

Microsoft Excel 2000. Alan Cleber Borim - alan.borim@poli.usp.br. http://www.pcs.usp.br/~alan Microsoft Excel 2000 Alan Cleber Borim - alan.borim@poli.usp.br http://www.pcs.usp.br/~alan Microsoft Índice 1.0 Microsoft Excel 2000 3 1.1 Acessando o Excel 3 1.2 Como sair do Excel 3 1.3 Elementos da

Leia mais

MICROSOFT WORD 2007. George Gomes Cabral

MICROSOFT WORD 2007. George Gomes Cabral MICROSOFT WORD 2007 George Gomes Cabral AMBIENTE DE TRABALHO 1. Barra de título 2. Aba (agrupa as antigas barras de menus e barra de ferramentas) 3. Botão do Office 4. Botão salvar 5. Botão de acesso à

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

Grifon Alerta. Manual do Usuário

Grifon Alerta. Manual do Usuário Grifon Alerta Manual do Usuário Sumário Sobre a Grifon Brasil... 4 Recortes eletrônicos... 4 Grifon Alerta Cliente... 4 Visão Geral... 4 Instalação... 5 Pré-requisitos... 5 Passo a passo para a instalação...

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

Microsoft Word INTRODUÇÃO

Microsoft Word INTRODUÇÃO INTRODUÇÃO O Word é uma ferramenta utilizada para o processamento e editoração eletrônica de textos. O processamento de textos consiste na possibilidade de executar e criar efeitos sobre um texto qualquer,

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

ROBERTO OLIVEIRA CUNHA

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

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

Montar planilhas de uma forma organizada e clara.

Montar planilhas de uma forma organizada e clara. 1 Treinamento do Office 2007 EXCEL Objetivos Após concluir este curso você poderá: Montar planilhas de uma forma organizada e clara. Layout da planilha Inserir gráficos Realizar operações matemáticas 2

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

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

10 DICAS PARA TURBINAR SEU PACOTE DE DADOS. 1 - Desative os Dados do Celular. 2 Remova as notificações e atualizações automáticas

10 DICAS PARA TURBINAR SEU PACOTE DE DADOS. 1 - Desative os Dados do Celular. 2 Remova as notificações e atualizações automáticas 10 DICAS PARA TURBINAR SEU PACOTE DE DADOS 1 - Desative os Dados do Celular Sempre que você não estiver usando a conexão, desligue a internet do seu aparelho. Mesmo em espera, os programas do celular ou

Leia mais

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Criação de Formulários no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Criação de Formulários no Google Drive Introdução...

Leia mais

8/9/2010 WINDOWS. Breve Histórico. Profa. Leda G. F. Bueno. Seu desenvolvimento iniciou-se em 1981

8/9/2010 WINDOWS. Breve Histórico. Profa. Leda G. F. Bueno. Seu desenvolvimento iniciou-se em 1981 Conceitos Básicos e Gerenciamento de Arquivos WINDOWS EXPLORER Profa. Leda G. F. Bueno WINDOWS Sistema operacional criado pela Microsoft Corporation Característica Principal características o uso de janelas

Leia mais

PROJETO INFORMÁTICA NA ESCOLA

PROJETO INFORMÁTICA NA ESCOLA EE Odilon Leite Ferraz PROJETO INFORMÁTICA NA ESCOLA AULA 1 APRESENTAÇÃO E INICIAÇÃO COM WINDOWS VISTA APRESENTAÇÃO E INICIAÇÃO COM WINDOWS VISTA Apresentação dos Estagiários Apresentação do Programa Acessa

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Padrões de Design para Aplicativos Móveis

Padrões de Design para Aplicativos Móveis Padrões de Design para Aplicativos Móveis capítulo 1 Navegação Padrões primários de navegação: Springboard, Menu de listas, Menu de abas, Galeria, Dashboard, Metáfora, Megamenu. Padrões secundários de

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

Bem-vindo ao melhor do entretenimento.

Bem-vindo ao melhor do entretenimento. Manual do usuário Bem-vindo ao melhor do entretenimento. Agora, com a Vivo TV, você tem alta qualidade de som e imagem para assistir a uma programação completa com canais infantis, seriados, programas

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... 3 2.1 Instalação do Vivo Sync... 4 3 Configuração e uso do Vivo Sync... 6 3.1 Tudo... 6

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

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

Windows Phone: Acesse Configurações > Rede celular + SIM > Ativada/Desativada. Android: Deslize a tela para baixo e desmarque a opção de dados.

Windows Phone: Acesse Configurações > Rede celular + SIM > Ativada/Desativada. Android: Deslize a tela para baixo e desmarque a opção de dados. Sempre que você não estiver usando a conexão, desligue a internet do seu aparelho. Mesmo em espera, os programas do celular ou tablet ficarão atualizando com redes sociais, e-mails, entre outros. Com isso

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

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

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

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

TRIBUNAL DE JUSTIÇA - SC. MICROSOFT OFFICE - EXCEL 2007 Pág.: 1

TRIBUNAL DE JUSTIÇA - SC. MICROSOFT OFFICE - EXCEL 2007 Pág.: 1 EXCEL 2007 O Excel 2007 faz parte do pacote de produtividade Microsoft Office System de 2007, que sucede ao Office 2003. Relativamente à versão anterior (Excel 2003), o novo programa introduz inúmeras

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

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Dicas iniciais O que é o Plone? 3 Formulário de Solicitação 6 Acesso ao Plone 6 Configurações do Site 14 Inserindo Conteúdo Inserir Pastas

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

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

Roxio Easy CD & DVD Burning

Roxio Easy CD & DVD Burning Roxio Easy CD & DVD Burning Guia de Introdução 2 Começando a usar o Easy CD & DVD Burning Neste guia Bem-vindo ao Roxio Easy CD & DVD Burning 3 Sobre este guia 3 Sobre o conjunto Easy CD & DVD Burning

Leia mais

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do

Leia mais