20.07.27: Notas de la versión del portal integrado de Apigee Edge

Estás viendo la documentación de Apigee Edge.
Ir a la documentación de Apigee X. info

El lunes 27 de julio, comenzaremos a lanzar una nueva versión del portal integrado de Apigee Edge.

Nuevas funciones y mejoras

En esta sección, se describen las nuevas funciones y mejoras de esta versión.

Mejoras en la accesibilidad y la capacidad de respuesta

En la siguiente lista, se indican las mejoras en la accesibilidad y la capacidad de respuesta que se implementaron para esta versión.

• Navegación con el teclado: Ahora es posible navegar por las barras de navegación del encabezado y el pie de página, la navegación lateral de SmartDocs, la lista de aplicaciones, la vista de la aplicación y las tarjetas de API con el teclado.
  
• Administración del enfoque: La navegación con la barra de navegación del encabezado y la navegación lateral de SmartDocs mueve el enfoque al primer <H1> de la página después de una acción de navegación.
• Regiones activas: Los cambios en la lista de APIs que resultan del filtrado textual ahora se informan a los usuarios que utilizan un lector de pantalla.
• Uso semántico de los encabezados HTML: Ahora, todo el texto se incluye en etiquetas HTML semánticamente apropiadas. Ahora se usa una estructura de encabezado jerárquica adecuada en todo el portal.
• Uso singular de <H1>: Cada página ahora tiene solo un <H1> para que los lectores de pantalla puedan identificar fácilmente la descripción más informativa del contenido de la página.
• Capitalización estilística: El uso de mayúsculas como acento visual ahora se aplica exclusivamente con CSS en lugar de en el texto real.
• Orden lógico del DOM: Los botones de acción en las páginas Crear y Editar aplicación se movieron debajo de los elementos del formulario en el DOM para que se puedan activar en orden lógico, al completar la interacción del formulario.
• Descripciones textuales de elementos visuales: Se mejoró el uso de etiquetas, texto alternativo y texto de botones, lo que mejora la navegación con un lector de pantalla.
• Contraste de color: Se aumentó el contraste de color para cumplir con los requisitos de contraste de WCAG AA en muchos lugares del producto. Los títulos de la API en la lista de APIs se movieron debajo de la imagen para evitar un posible contraste de color insuficiente.
• Validación de formularios: En las páginas Crear y Editar aplicación, los botones de envío de formularios ya no están inhabilitados y se pueden activar para validar el formulario. Los campos de formulario validados en las páginas Crear y Editar aplicación ahora incluyen descripciones textuales del error de validación.
• Capacidad de respuesta: Ahora hay un ancho máximo que se aplica a todas las páginas, excepto a SmartDocs. La navegación de SmartDocs ahora funciona en pantallas estrechas del tamaño de un teléfono. Las páginas Crear y Editar aplicación ahora responden mejor a las pantallas estrechas.

Cambios en el DOM que pueden afectar tu portal

En especial, considera lo siguiente:

• Las barras de navegación (encabezado y pie de página) y los encabezados de página se diseñaron (o se ocultaron) con anulaciones de CSS: Ahora hay un ancho máximo para el contenido de la página. Para extender las barras de navegación y los encabezados de página hasta el borde de la ventana del navegador, Apigee diseñó el seudoelemento :before. Para obtener más información, consulta Anula los colores primarios de las barras de navegación y los encabezados de página.
• Hay elementos de página con fondos que se extienden hasta el borde de la ventana del navegador (que no sean la imagen de fondo de pantalla completa): El ancho máximo del contenido de la página se limitó para mejorar la capacidad de respuesta, lo que puede limitar cualquier panel de ancho completo anterior en las páginas personalizadas. Para obtener más información sobre el uso de la nueva configuración de ancho máximo, consulta Crea un panel de ancho completo en la página de un portal.
• Se orientaron niveles de encabezado HTML específicos con selectores de CSS para modificar los estilos de texto: Cambió el nivel de encabezado aplicado a cierto contenido. Por ejemplo: <H1> → <H2> Revisa la lista de cambios detallada de esta versión para comprender exactamente qué contenido se ve afectado.
• Se selecciona un color blanco o muy claro como el "color secundario" en el editor de temas del portal: El color secundario se usa para los elementos de navegación que serán difíciles de ver sobre un fondo blanco. Te recomendamos que elijas un color secundario accesible y, luego, lo anules si es necesario con scss personalizado en situaciones específicas.
• Se diseñaron vínculos en el texto:El diseño de los vínculos ahora es más accesible. Consulta los cambios a continuación para comprender cómo puede interactuar con tu diseño existente.
• El borde inferior de 2 px en el área de contenido de las tarjetas de vista principal se diseñó o se ocultó con anulaciones de CSS: Este borde se movió de <mat-card-content> a un borde superior en <mat-card-actions>.

Resumen de los cambios detallados

En las siguientes secciones, se resumen los cambios detallados que se implementaron en esta versión, por categoría.

Cambios en todo el portal

A continuación, se resumen los cambios en todo el portal.

• Las siguientes variables ya no están en uso:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Hay variables nuevas que proporcionan control sobre el ancho máximo del área de contenido principal y el padding horizontal mínimo para el área de contenido principal:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Cambios en la barra de navegación principal

A continuación, se resumen los cambios en la barra de navegación principal.

• El logotipo <img> ahora está incluido en un <a> para tamaños de pantalla de computadoras y dispositivos móviles.
• El botón desplegable del usuario ahora es un <button> en lugar de un <a>

Cambios en el estilo de los vínculos

Los vínculos estándar <a> dentro del texto ahora tienen un subrayado de forma predeterminada y un color de fondo (según la configuración del tema "color secundario") cuando se coloca el cursor sobre ellos.

Cambios en la página 404

A continuación, se resumen los cambios en la página 404.

• "Acceder ahora" ahora es <H2> en lugar de <H1>
• El texto de explicación ahora es <H2> en lugar de <H1>

Página de las API

A continuación, se resumen los cambios en la página de APIs, por categoría.

• Tarjeta de entrada de búsqueda o filtro de API:
  • <mat-card-content class="mat-card-content"> ahora incluye el encabezado y la entrada de la tarjeta de APIs de búsqueda.
  • El <H2> ahora usa class="mat-subheading-1" en lugar de class="api-doc-filter-title".
  • El<mat-form-field> ahora usa appearance="outline".
  • Se agregó un ícono de búsqueda al <mat-form-field> antes de la entrada: "<mat-icon matPrefix>search</mat-icon>"
  • Se agregaron etiquetas aria y referencias de control a la entrada.
• Mensaje de lista de APIs vacía:
  • "No se encontraron APIs" ahora es <H2> en lugar de <H1>
  • La explicación ahora es <H3> en lugar de <H2>
• Lista de tarjetas de API:

  "No hay APIs que coincidan con tu búsqueda" ahora es <H2> en lugar de <H1>

• Tarjetas de API:
  • Se quitó >div class="api-doc-card-content-image-gradient"></div>.
  • El título de la API se movió fuera de la imagen que contiene <div> y a <div class="api-doc-card-content-title"></div> inmediatamente después de la imagen <div>.
  • Los títulos de la API ahora son <H2> en lugar de <H1>.

Lista de aplicaciones:

• Estado vacío:
  • "Comenzar" ahora es <H2> en lugar de <H1>
  • La guía de estado vacío ahora es <H3> en lugar de <H2>.
• Lista:
  • "Mis aplicaciones" ahora es <H2> en lugar de <H1>
  • <mat-row> ahora está incluido en un <a>.

Páginas Crear y Editar aplicación

A continuación, se resumen los cambios en las páginas Crear y Editar aplicación.

• <div class="app-buttons"> se movió al final del <form> y se reemplazó por <div class="form-buttons-sticky-container">.
• Todo el uso de la clase .app-layout-section cambió a .details-layout-section.
• Todo el uso de la clase .app-layout-section-title cambió a .details-layout-section-title.
• Todos los encabezados de sección ahora son <H2> en lugar de <div>.
• Todo el uso de la clase .app-layout-section-content cambió a .details-layout-section-content.
• La lista de APIs ya no es una lista de tarjetas de API con interruptores (similar a la lista de APIs). En cambio, es una tabla de APIs.
• La entrada de la URL de devolución de llamada se movió a una sección nueva.
• El botón Guardar ahora usa el estilo mat-raised-button y el fondo de color primario.
• Las tablas ahora están incluidas en un <div> con la clase .app-table-wrapper.
• Los encabezados de tabla ahora usan el <thead> wrapper.
• Los cuerpos de tabla ahora usan el <tbody> wrapper.
• Ya no se usa [style.width] para establecer los anchos de las columnas de la tabla.
• Todas las etiquetas <a> dentro de la tabla ahora usan <button en su lugar.

Lista de equipos

A continuación, se resumen los cambios en la lista de equipos.

• Estado vacío:
  • "Comenzar" ahora es <H2> en lugar de <H1>
  • "Crea un equipo para administrar la propiedad compartida de la aplicación" ahora es <H3> en lugar de <H2>
• Lista:

  El título "Equipos" ahora es <H2> en lugar de <H1>.

Páginas Crear y Editar equipo

A continuación, se resumen los cambios en las páginas Crear y Editar equipo.

• En el <form>, la clase .teams-form se reemplazó por .details-form.
• <div class="teams-buttons"> se movió al final del <form> y se reemplazó por <div class="form-buttons-sticky-container">.
• Todo el uso de la clase .teams-layout-section cambió a .details-layout-section.
• Todo el uso de la clase .teams-layout-section-title cambió a .details-layout-section-title.
• Todo el uso de la clase .teams-layout-section-content cambió a .details-layout-section-content.
• Se agregó <div class="team-apps-container"> alrededor de <table class="team-apps">.

SmartDocs

A continuación, se resumen los cambios en la interfaz de SmartDocs.

• Navegación lateral:
  • La navegación lateral se reescribió por completo con componentes de material angular.
  • Los encabezados de navegación lateral ahora son <H2> en lugar de <div>.
  • Los elementos de navegación ahora usan el color de texto predeterminado del portal en lugar del "color secundario" del editor de temas del portal.
  • Los elementos seleccionados, enfocados y sobre los que se coloca el cursor en la navegación lateral ahora usan variaciones oscuras y claras del "color secundario" del editor de temas del portal para el texto y el fondo, respectivamente.
• Contenido:
  • Muchos subtítulos, como "Parámetros de ruta de acceso" y "Parámetros de encabezado", ahora son <H2> en lugar de <H3>
  • Las entidades de esquema en la página de resumen ahora son <H3>=> en lugar de <H2>

Agrega mejoras de accesibilidad a una página principal existente

Si tienes un portal de salida, deberás editar la página principal para aprovechar las nuevas mejoras de accesibilidad para las tarjetas navegables, como se describe a continuación:

1. Quita href="" del contenedor <mat-card>.
2. Usa <H2> en lugar de <H1> para el encabezado de la tarjeta dentro de <mat-card-header>.
3. Dentro del encabezado de la tarjeta <h2>, incluye el texto en un <a class="navigable-content" href="href-name"> y establece el href-name en el valor adecuado para la navegación de la tarjeta.

Como alternativa, puedes usar la siguiente plantilla de tarjeta:

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

Anula los colores primarios de las barras de navegación y los encabezados de página

Para extender las barras de navegación y los encabezados de página hasta el borde de la ventana del navegador, agrega un diseño personalizado para las barras de navegación y los encabezados de página con el editor de temas avanzado, similar al siguiente para la barra de navegación del encabezado:

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

Actualiza el procedimiento para administrar las APIs de una aplicación

Cambió la interacción del usuario para administrar las APIs en una aplicación en el portal integrado. Específicamente, cuando se administra una aplicación, en la sección de APIs, los usuarios deben hacer clic en o (en lugar de un interruptor) para habilitar o inhabilitar el acceso, respectivamente, a una API de la aplicación.

Actualiza todos los procedimientos de tu portal que describan cómo administrar las APIs en la página de aplicaciones, si corresponde. Para obtener más información, consulta Administra las APIs en tu aplicación.

Fallas corregidas

En esta versión, se corrigieron los siguientes errores. Esta lista está dirigida principalmente a usuarios que verifican si sus tickets de asistencia se corrigieron. No está diseñada para proporcionar información detallada a todos los usuarios.

Problemas conocidos

Para obtener una lista de los problemas conocidos con el portal integrado, consulta Problemas conocidos con el portal integrado.