Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.


Na tela inicial de Pages são apresentadas todas as possibilidades de gerenciamento das páginas. As páginas presentes nessa tela são centralizadas por empresa e ficam disponíveis em um único ponto do aplicativo.

São separadas entre três listas:

  • Últimos editados
  • Em edição 
  • Publicados

Abaixo estão listadas as ações disponíveis no Pages:

Índice
exclude.*ndice



Adicionar página


01. Na tela inicial de Pages, acionar Nova página.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Será aberta uma pop-up com as opções de templates, e o usuário deve optar por configurar sua página a partir de um template ou de uma página em branco.

02. Selecionar a opção desejada e acionar Continuar.

03. Preencher as informações da pop-up Configurações da página.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Na sessão Informações. As informações solicitadas são:

Nome da página
Título que será apresentado na página e na aba do browser.

Código da página
Endereço URL para acessar a página em questão. Ao escrever o título, esse campo já é automaticamente preenchido, mas pode ser alterado conforme desejado.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<style type="text/css">
    .lms * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .lms-text-center {
      text-align: center;
    }

    .lms-full-height {
      height: 100%;
    }

    /* Component LMS Callout */

    .lms-callout {
      border: none;
      padding: 0px;

      display: -moz-box;
      -moz-flex-flow: row wrap;
      -moz-justify-content: center;
      -moz-align-items: center;

      display: -ms-flexbox;
      -ms-flex-flow: row wrap;
      -ms-justify-content: center;
      -ms-align-items: center;
      
      display: -webkit-flex;
      display: -webkit-box;
      -webkit-flex-flow: row wrap;
      -webkit-justify-content: center;
      -webkit-align-items: center;

      display: flex;
      flex-flow: row wrap;      
      justify-content: center;
      align-items: center;
    }
  
    .lms-callout .lms-callout-image {
      width: 24px;
    }

    .lms-callout .lms-callout-body {
      width: calc(100% - 24px);
      padding-left: 20px;
    }

	.lms-callout .lms-callout-citacao {
      border: 0px solid;
      border-left-width: 3px;
      border-left-color: #f36f21;
	  margin: 4px;
	  margin-left: 25px;
	  padding-left: 8px;
      font-size: 13px;
	}

    .lms-callout .lms-callout-thumb {
      width: 24px;
      height: 24px;
    }

    .lms-callout .lms-callout-text {
      color: #58595b;
      line-height: 1.75;
      margin: 0;
    }
</style>
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICAS!</b><br>  • Forneça uma URL que seja facilmente interpretável pelo usuário, utilizando palavras chaves. Por exemplo: guia-da-marca.<br>  • Complemente as URLs com títulos para incentivar o usuário a clicar neles.<br>  • Utilize palavras curtas, porém superiores a três caracteres. Evite utilizar caracteres especiais (com exceção de hífen para separar as palavras). </p>
		</div>
	</div>
</div>

Ícone
Ícone que será apresentado na aba do browser, quando a página for visualizada ou estiver sendo editada. Deve ser uma imagem com o formato ICO, com tamanho de 48x48 px. Caso não seja definido um ícone, será apresentado por padrão o logo do Pages.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Muitos usuários navegam com várias guias abertas, então sua página precisa se diferenciar! Utilize um logo personalizado para o seu site.</p>
		</div>
	</div>
</div>

04. Acionar Avançar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Após a inclusão da página, você precisa editá-la utilizando o Editor de páginas e então publicá-la, para que ela possa ser acessada. Caso você tenha criado a página a partir de um template, os componentes referentes a esse template já serão disponibilizados no momento da edição.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Na sessão Templates escolher o template a ser utilizado. Os templates disponíveis são:

  • Página em branco
  • Varejo
  • Educacional
  • Construções e projetos
  • Saúde
  • Logística

05. Acionar Avançar.


Na sessão Colaboradores inserir as informações solicitadas:

06. Selecionar o colaborador que terá permissão na página inserindo a inicial do nome e clicando sobre o usuário que deseja. 

07. Definir o tipo de permissão que este usuário terá sobre a página. As permissões disponíveis são:

Editar: o usuário poderá apenas editar a página;

Gerenciar: o usuário poderá editar e excluir a página;

Visualizar: o usuário poderá apenas visualizar a página.

Também é possível excluir o colaborador da página por meio do íconelocalizado ao lado do nome do colaborador definido. 

08. Acionar Concluir após todas as configurações.


Editar página


01. Na tela inicial de Pages, localizar a página a ser alterada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Editar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Será aberta uma nova guia para alteração da página. As instruções para edição da página estão localizadas no help Editor de páginas.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Você pode usar um atalho para o Editor de páginas, basta clicar em qualquer área do quadro referente à página.</p>
		</div>
	</div>
</div>


Publicar página


01. Na tela inicial de Pages, localizar a página a ser publicada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Editar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Com isso, será aberta uma nova guia com o Editor de páginas.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Você pode usar um atalho para o Editor de páginas, basta clicar em qualquer área do quadro referente à página.</p>
		</div>
	</div>
</div>

03. Na guia aberta, acionar a opção Publicar, localizada no canto superior direito da tela.

04. Na pop-up de confirmação, acionar Publicar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Após a publicação da página, ela estará disponível para ser acessada publicamente, ou seja, com o link informado, sem a necessidade de autenticação. Para saber como obter o link de acesso, consulte o item Compartilhar.



Visualizar página


Essa opção é disponibilizada apenas para páginas já publicadas.


01. Na tela inicial de Pages, localizar a página a ser visualizada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Visualizar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Será aberta uma nova guia para visualização da página. Ela só poderá ser visualizada se já tiver sido publicada.


Configurar página


01. Na tela inicial de Pages, localizar a página a ser configurada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Configurar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Será aberta a pop-up de Configuração da página, com as mesmas informações solicitadas na ação de Adicionar página. Contudo, uma vez gerado o link da página pública na inclusão da página, esse link não pode mais ser alterado.


Compartilhar página 
Âncora
compartilhar
compartilhar


Essa opção é disponibilizada apenas para páginas já publicadas.


 Veja a imagem

01. Na tela inicial de Pages, localizar a página a ser compartilhada.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Compartilhar URL.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Ao acionar essa opção, será aberta uma pop-up para apresentar a URL configurada para a página pública.

03. Acionar a opção Copiar link para copiar a URL para a área de transferência.

Painel
borderColor#e8f6f0
bgColor#e8f6f0
HTML
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>DICA!</b><br>Lembrando que as páginas criadas no aplicativo Pages são <b>responsivas</b>, ou seja, se adaptam para trazer a melhor visualização independentemente do dispositivo de acesso.</p>
		</div>
	</div>
</div>


Remover página


01. Na tela inicial de Pages, localizar a página a ser removida.

02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Excluir.

03. Na pop-up de confirmação de exclusão, selecionar Excluir.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

A página será removida. Com isso, não poderá mais ser acessada por nenhum usuário.


Visualizar rascunho


01. Na tela inicial de Pages, localizar a página para a visualização do rascunho.

02. Acionar o ícone  referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Visualizar rascunho.

03. Uma nova guia será aberta apresentado a página em modo de rascunho.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Uma nota ao topo da página indica que a mesma está sendo é apresentada no modo rascunho. O link Editar página abre novamente o editor de páginas.