Criar Disposições de Telas para Diferentes Tamanhos de Ecrã

Pode criar disposições de telas para dar resposta a dispositivos de diferentes tamanhos, otimizando o conteúdo para se ajustar ao browser para cada tamanho de ecrã.

Tópicos:

Acerca da Criação de Disposições de Telas para Apresentação em Dispositivos com Diferentes Tamanhos de Ecrã

Pode criar disposições de telas para se ajustarem a dispositivos de diferentes tamanhos, otimizando o conteúdo no browser, por exemplo, num telemóvel, num tablet ou num portátil.

Otimizar disposições de telas para diferentes tamanhos de ecrã

Quando abre um livro em dispositivos de tamanhos diferentes, o tamanho do ecrã da tela é redimensionado para o tamanho do ecrã do browser utilizando os valores por omissão do browser. Redimensionar o browser ao diminuir o respetivo tamanho pode afetar a sua capacidade de ver os detalhes nas visualizações. Por exemplo, os dados num gráfico de dispersão, num mapa cromático ou a maioria dos dados de medidas numa visualização de mosaico podem tornar-se difíceis de ler, impossibilitando a visualização de informações cruciais.

Quando reduz o tamanho da tela num browser, as visualizações podem tornar-se demasiado pequenas para apresentar os dados corretamente.
Esta imagem mostra um tamanho de ecrã da tela reduzido visualizado num browser onde algumas visualizações se tornaram demasiado pequenas para ver os dados corretamente.

Como autor, pode criar pontos de quebra da tela para que, quando o tamanho do ecrã da tela for reduzido, a renderização das visualizações seja alterada para se ajustar ao novo tamanho de ecrã. Por exemplo, se o tamanho de ecrã disponível for demasiado pequeno para apresentar uma visualização completa, pode reorganizar ou ocultar a visualização para funcionar melhor com o tamanho de ecrã mais pequeno. Especifique diferentes tamanhos de ecrã e disposições da tela utilizando pontos de quebra da tela, em que cada ponto de quebra representa uma organização diferente das visualizações apresentadas para cada tamanho de ecrã.

Uma tela otimizada para um ponto de quebra de tamanho de ecrã mais pequeno contém visualizações que são reorganizadas para facilitar a visualização no dispositivo mais pequeno.
Esta imagem mostra uma visualização otimizada criada utilizando um ponto de quebra para um dispositivo com um tamanho de ecrã mais pequeno.

Utilize um slider para definir tamanhos de ecrã para quando os utilizadores consumidores apresentarem as telas em dispositivos de diferentes tamanhos. Por exemplo, pode alterar o modo como as visualizações são apresentadas reorganizando a respetiva localização, tamanho ou visibilidade na tela.

Quando acrescenta um ponto de quebra a uma tela, o tamanho de ecrã do ponto de quebra determina o modo como as visualizações são apresentadas quando visualizadas nesse tamanho de ecrã. Pode reposicionar, redimensionar ou retirar visualizações de um ponto de quebra da tela para otimizar o modo como os utilizadores veem as visualizações. Pode especificar diferentes configurações de visualização para cada ponto de quebra. As diferenças para cada ponto de quebra só são apresentadas ao utilizador consumidor quando a resolução do tamanho de ecrã do browser corresponde ao tamanho de ecrã do ponto de quebra para o qual as alterações são efetuadas.

Criar Disposições de Telas para Visualização em Diferentes Dispositivos

Pode criar pontos de quebra da tela para determinar o modo como as visualizações são apresentadas aos utilizadores consumidores em dispositivos com diferentes tamanhos de ecrã. Por exemplo, pode definir diferentes pontos de quebra para otimizar a visualização num browser de dispositivo móvel, num tablet ou num portátil.

ícone Guia Prático Guia Prático

  1. Na Página Principal, coloque o cursor sobre um livro, clique em Ações e, em seguida, selecione Abrir.
  2. Clique em Editar para apresentar o livro para edição.
  3. Expanda a tela para o tamanho máximo e, em Propriedades da Tela, defina a Disposição como Ajuste Automático e clique em OK.
  4. No rodapé, clique em Editor de Tela Responsiva para abrir o editor, onde pode definir pontos de quebra para visualizar a tela em diferentes dispositivos.
    Editor de Tela Responsiva

  5. Defina um ponto de quebra da tela:
    • Acrescentar um ponto de quebra na posição atual do slider - Clique e arraste o slider para o valor em píxeis do tamanho de ecrã que pretende utilizar para este ponto de quebra,
      Arraste o slider para a largura requerida mostrada em píxeis.

      em seguida, clique em Acrescentar Ponto de Quebra Clique no ícone Acrescentar Ponto de Quebra para acrescentar um ponto de quebra no local onde o slider se encontrapara acrescentar o ponto de quebra na localização atual do slider.
    • Introduzir manualmente um valor para um ponto de quebra - Clique em Abrir o Menu do Editor de Tela Responsiva, clique em Acrescentar Ponto de Quebra e introduza um número no campo Posição relativo ao local onde pretende este ponto de quebra.
      Introduza uma posição manualmente para acrescentar um ponto de quebra

  6. Repita o passo anterior para definir pontos de quebra da tela adicionais.
  7. Inclua ou exclua visualizações para cada ponto de quebra da tela:
    • Clique com o botão direito do rato no ponto de quebra da tela que pretende gerir (Um ponto de quebra da tela e o respetivo marcador) e clique em Gerir Ponto de Quebra.
      Utilize a caixa de diálogo Gerir Ponto de Quebra para incluir ou excluir visualizações deste ponto de quebra da tela.

    • Clique numa visualização da lista para excluir ou incluir na tela para este ponto de quebra da tela e, em seguida, clique em OK.
      Utilize a caixa de diálogo Gerir Ponto de Quebra para excluir ou incluir visualizações e filtros do dashboard na tela para este ponto de quebra.

  8. Opcional: Crie uma visualização e acrescente-a a um ponto de quebra selecionando dados no painel Dados e acrescentando-os à tela.
    A nova visualização é acrescentada apenas ao ponto de quebra atual; no entanto, pode acrescentar a visualização a outros pontos de quebra na tela selecionando a visualização a partir da lista na caixa de diálogo Gerir Ponto de Quebra para esse ponto de quebra.
  9. Opcional: Otimize a apresentação das visualizações para um ponto de quebra da tela.
    Poderá querer otimizar o conteúdo para ser apresentado num dispositivo mais pequeno, como um telemóvel.
    • Reorganizar visualizações - Clique e arraste as visualizações para uma nova posição.
    • Otimizar visualizações - Utilize o painel Propriedades para ocultar conteúdo desnecessário, como o título ou a legenda.
    Quando otimiza as visualizações para um ponto de quebra, essas alterações não se aplicam aos outros pontos de quebra na tela.
  10. Clique em Gravar.