27/07/2027 - Notas da versão do portal integrado do Apigee Edge

Esta é a documentação do Apigee Edge.
Acesse Documentação da Apigee X. informações

Na segunda-feira, 27 de julho, vamos lançar uma nova versão do portal integrado do Apigee Edge.

Novos recursos e melhorias

Esta seção descreve os novos recursos e melhorias desta versão.

Melhorias de acessibilidade e capacidade de resposta

A seguir, listamos as melhorias de acessibilidade e capacidade de resposta implementadas nesta versão.

• Navegação pelo teclado:agora é possível navegar pelas barras de navegação do cabeçalho e do rodapé, pela navegação lateral do SmartDocs, pela lista de apps, pela visualização de apps e pelos cards de API usando o teclado.
  
• Gerenciamento de foco : navegar com a barra de navegação do cabeçalho e a navegação lateral do SmartDocs move o foco para o primeiro <H1> na página após uma ação de navegação.
• Regiões ativas:as mudanças na lista de APIs resultantes da filtragem textual agora são informadas aos usuários que utilizam um leitor de tela.
• Uso semântico de cabeçalhos HTML:agora todo o texto está contido em tags HTML semanticamente adequadas. Uma estrutura de cabeçalhos hierárquica apropriada agora é usada em todo o portal.
• Uso único de <H1>: cada página agora tem apenas um único <H1> para que os leitores de tela possam identificar facilmente a descrição mais informativa do conteúdo da página.
• Letras maiúsculas estilísticas:agora o uso de letras maiúsculas como um destaque visual é aplicado exclusivamente com CSS, e não no texto.
• Ordem lógica do DOM: os botões de ação nas páginas "Criar e editar o aplicativo" foram movidos para baixo dos elementos de formulário no DOM para que possam ser ativados em ordem lógica, na conclusão da interação com o formulário.
• Descrições textuais de elementos visuais:há um uso aprimorado de rótulos, texto alternativo e texto de botão, que melhoram a navegação com um leitor de tela.
• Contraste de cor:o contraste de cor foi aumentado para atender aos requisitos de contraste AA das WCAG em muitos lugares do produto. Os títulos da API na lista de APIs foram movidos para baixo da imagem para evitar um possível contraste de cor insuficiente.
• Validação de formulário:nas páginas "Criar e editar app", os botões de envio de formulário não estão mais desativados e podem ser ativados para validar o formulário. Os campos de formulário validados nas páginas Criar e Editar aplicativo agora incluem descrições textuais do erro de validação.
• Receptividade:agora há uma largura máxima que se aplica a todas as páginas, exceto ao SmartDocs. A navegação do SmartDocs agora funciona em telas estreitas do tamanho de um smartphone. As páginas "Criar e editar um app" agora são mais responsivas a telas estreitas.

Alterações do DOM que podem afetar seu portal

Considere principalmente se:

• As barras de navegação (cabeçalho e rodapé) e os cabeçalhos das páginas foram estilizados (ou ocultos) com modificações de CSS: agora existe uma largura máxima para o conteúdo da página. Para estender as barras de navegação e os cabeçalhos de página até a borda da janela do navegador, a Apigee estilizou o pseudoelemento :before. Para mais informações, consulte Substituir cores primárias de barras de navegação e cabeçalhos de página.
• Há elementos de página com planos de fundo que se estendem até a borda da janela do navegador (exceto a imagem de plano de fundo em tela cheia): a largura máxima do conteúdo da página foi limitada para melhorar a capacidade de resposta, o que pode restringir os painéis anteriores de largura total nas páginas personalizadas. Saiba mais sobre como usar as novas configurações de largura máxima em Criar um painel de largura total em uma página de portal.
• Níveis de cabeçalho HTML específicos foram segmentados com seletores de CSS para modificar estilos de texto:o nível de título aplicado a determinado conteúdo mudou. Por exemplo: <H1> → <H2> Analise a lista de alterações detalhada desta versão para entender exatamente qual conteúdo será afetado.
• Uma cor branca ou muito clara é selecionada como a "cor secundária" No editor de temas do portal:a cor secundária é usada para elementos de navegação difíceis de enxergar em um plano de fundo branco. Recomendamos escolher uma cor secundária acessível e, em seguida, substituí-la, se necessário, por um CSS personalizado em situações específicas.
• O estilo dos links no texto foi alterado:agora o estilo dos links está mais acessível. Confira as mudanças abaixo para entender como ele pode interagir com o estilo atual.
• A borda inferior de 2 px na área de conteúdo dos cards de visualização da página inicial foi estilizado ou ocultada com substituições de CSS: esta borda foi movida de <mat-card-content> para uma borda superior em <mat-card-actions>.

Resumo das mudanças detalhadas

As seções a seguir resumem por categoria as mudanças detalhadas que foram implementadas nesta versão.

Mudanças em todo o portal

As mudanças em todo o portal estão resumidas abaixo.

• As variáveis a seguir não estão mais em uso:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Há novas variáveis que oferecem controle sobre a largura máxima da área do conteúdo principal e o preenchimento horizontal mínimo para essa área:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Mudanças na barra de navegação principal

As mudanças na barra de navegação principal estão resumidas abaixo.

• O logotipo <img> agora está em um <a> nos tamanhos de tela de computadores e dispositivos móveis
• O botão suspenso do usuário agora é <button> em vez de <a>.

Mudanças no estilo dos links

Os links padrão <a> no texto agora têm um sublinhado por padrão e uma cor de plano de fundo (com base nas configurações do tema "cor secundária") ao passar o cursor

Alterações de página 404

As alterações na página 404 estão resumidas abaixo.

• "Faça login agora" agora é <H2> em vez de <H1>
• O texto de explicação agora é <H2> em vez de <H1>

Página "APIs"

As mudanças feitas na página de APIs estão resumidas abaixo por categoria.

• Card de entrada de filtro/pesquisa de API:
  • <mat-card-content class="mat-card-content"> agora envolve o cabeçalho e a entrada do card de APIs de pesquisa
  • O <H2> agora usa class="mat-subheading-1" em vez de class="api-doc-filter-title"
  • O <mat-form-field> agora usa appearance="outline"
  • Um ícone de pesquisa foi adicionado ao <mat-form-field> antes da entrada: "<mat-icon matPrefix>search</mat-icon>"
  • Rótulos Aria e referências de controle foram adicionados à entrada
• Mensagem de lista de APIs vazia:
  • "Nenhuma API encontrada" agora é <H2> em vez de <H1>
  • A explicação agora é <H3> em vez de <H2>.
• Lista de cards de API:

  "Nenhuma API corresponde à sua pesquisa" agora é <H2> em vez de <H1>

• Cartões de API:
  • A rede >div class="api-doc-card-content-image-gradient"></div> foi removida
  • O título da API foi removido da imagem que contém <div> para <div class="api-doc-card-content-title"></div> imediatamente após a imagem <div>
  • O título da API agora é <H2> em vez de <H1>.

Lista de apps:

• Estado vazio:
  • "Vamos começar" agora é <H2> em vez de <H1>
  • A orientação de estado vazio agora é <H3> em vez de <H2>.
• Lista:
  • "Meus apps" agora é <H2> em vez de <H1>
  • <mat-row> agora está distorcido em uma <a>

Criar e editar páginas de aplicativos

As mudanças nas páginas "Criar e editar um aplicativo" estão resumidas abaixo.

• <div class="app-buttons"> foi movido para o fim da tag <form> e substituído por <div class="form-buttons-sticky-container">
• Todo o uso da classe .app-layout-section foi alterado para .details-layout-section
• Todo o uso da classe .app-layout-section-title foi alterado para .details-layout-section-title
• Todos os títulos de seção agora estão em <H2> em vez de <div>.
• Todo o uso da classe .app-layout-section-content foi alterado para .details-layout-section-content
• A lista de APIs não é mais uma lista de cards de API com chaves de ativação (semelhante à lista de APIs). Em vez disso, é uma tabela de APIs
• A entrada do URL de callback foi movida para uma nova seção
• O botão "Salvar" agora usa o estilo de botão aberto em um tapete e a cor de fundo primária
• As tabelas agora são agrupadas em um <div> com a classe .app-table-wrapper
• Os cabeçalhos da tabela agora usam o wrapper <thead>
• Os corpos da tabela agora usam o wrapper <tbody>
• [style.width] não é mais usado para definir as larguras das colunas da tabela
• Todas as tags <a> na tabela agora usam <button

Lista de equipes

As mudanças na lista "Equipe" estão resumidas abaixo.

• Estado vazio:
  • "Comece já" agora é <H2> em vez de <H1>
  • "Crie uma equipe para gerenciar a propriedade compartilhada do app" agora é <H3> em vez de <H2>
• Lista:

  "Equipes" o título agora é <H2> em vez de <H1>.

Criar e editar páginas de equipes

As mudanças feitas nas páginas Criar e Editar equipe estão resumidas abaixo.

• Na <form>, a classe .teams-form foi substituída por .details-form.
• O campo <div class="teams-buttons"> foi movido para o fim da <form> e substituído por <div class="form-buttons-sticky-container">.
• Todo o uso da classe .teams-layout-section foi alterado para .details-layout-section
• Todo o uso da classe .teams-layout-section-title foi alterado para .details-layout-section-title
• Todo o uso da classe .teams-layout-section-content foi alterado para .details-layout-section-content
• O campo <div class="team-apps-container"> foi adicionado ao redor de <table class="team-apps">

SmartDocs

As mudanças na interface do SmartDocs estão resumidas abaixo.

• Navegação lateral:
  • A navegação lateral foi completamente reescrita com componentes de material angular
  • Os títulos de navegação lateral agora estão em <H2> em vez de <div>
  • Os itens de navegação agora usam a cor de texto padrão do portal em vez da "cor secundária" do editor de temas
  • Os itens selecionados, focados e passados para o cursor na navegação lateral agora usam variações claras e escuras do editor de temas do portal "cor secundária" para o texto e o plano de fundo, respectivamente
• Conteúdo:
  • Muitos subtítulos, como "Parâmetros de caminho" e "Parâmetros de cabeçalho" agora são <H2> em vez de <H3>
  • As entidades do esquema na página de visão geral agora são <H3>=> em vez de <H2>

Adicionar melhorias de acessibilidade a uma página inicial existente

Se você tiver um portal antigo, precisará editar a página inicial para aproveitar as novas melhorias de acessibilidade para cards navegáveis, conforme descrito abaixo:

1. Remova href="" do contêiner <mat-card>.
2. Use <H2> em vez de <H1> para o título do card em <mat-card-header>.
3. Dentro do título do card <h2>, una o texto em uma <a class="navigable-content" href="href-name"> e defina href-name como o valor adequado para a navegação do card.

Como alternativa, você pode usar o seguinte modelo de cartão:

<mat-card class="home-page-card quick-start">
  <mat-card-header class="home-page-card-header" color="primary">
    <mat-icon class="home-page-card-header-icon">
      check_circle
    </mat-icon>
    <h2 class="home-page-card-header-text">
      <a class="navigable-content" href="page-route">
        Card heading
      </a>
    </h2>
  </mat-card-header>
  <mat-card-content class="home-page-card-content">
    <p class="home-page-card-content-text">
      Extra content
    </p>
  </mat-card-content>
</mat-card>
</p>

Substituição de cores primárias por barras de navegação e cabeçalhos de páginas

Para estender as barras de navegação e os cabeçalhos de página na borda da janela do navegador, adicione um estilo personalizado para as barras de navegação e os cabeçalhos de página usando o editor avançado de temas, semelhante ao exemplo a seguir para a barra de navegação do cabeçalho:

// Override use of the primary color for header navigation bar background-color
.nav-header .mat-toolbar {
  color: #fff //  color for navigation text

  // Use the :before pseudo element to style the background of full-width bars
  // (header and footer navigation bars and page headers)
  &:before {
    background-color: #000; // background color for header navigation bar
  }
}

Como atualizar o procedimento para gerenciar APIs de um aplicativo

A interação do usuário para gerenciar as APIs em um aplicativo no portal integrado mudou. Mais especificamente, ao gerenciar um app, na seção "APIs", os usuários precisam clicar em ou (em vez de um botão de alternância) para ativar ou desativar o acesso a uma API do app, respectivamente.

Atualize todos os procedimentos no seu portal que descrevem como gerenciar APIs na página de apps, se aplicável. Para mais informações, consulte Como gerenciar as APIs no app.

Bugs corrigidos

Os bugs a seguir foram corrigidos nesta versão. Esta lista é principalmente para usuários que verificam se os tíquetes de suporte foram corrigidos. Ela não foi projetada para fornecer informações detalhadas a todos os usuários.

Problemas conhecidos

Para uma lista de problemas conhecidos com o portal integrado, consulte Problemas conhecidos com o portal integrado.