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

Estás consultando la documentación de Apigee Edge.
Consulta la documentación de Apigee X.
Información

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 de accesibilidad y capacidad de respuesta

A continuación, se enumeran las mejoras de accesibilidad y capacidad de respuesta que se implementan para esta versión.

  • Navegación con 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 apps, la vista de la app y las tarjetas de la API con el teclado.
  • Administración de 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 resultantes del filtrado textual ahora se informan a los usuarios de un lector de pantalla.
  • Uso semántico de los encabezados HTML: Ahora todo el texto se incluye en las etiquetas HTML adecuadas en cuanto a semántica. Ahora se usa una estructura de encabezado jerárquica adecuada en todo el portal.
  • Uso único de <H1>: Cada página ahora tiene una sola <H1> para que los lectores de pantalla puedan identificar fácilmente la descripción más informativa del contenido.
  • Uso de mayúsculas estilístico: Ahora el uso de mayúsculas y minúsculas como acento visual se aplica exclusivamente con CSS en lugar del texto real.
  • Orden lógico del DOM: Los botones de acción de las páginas Crear y Editar aplicaciones se movieron debajo de los elementos del formulario en el DOM para que puedan activarse en un orden lógico, una vez que se completa la interacción con el formulario.
  • Descripciones textuales de elementos visuales: Se mejoró el uso de etiquetas, texto alternativo y texto de botones, los cuales mejoran 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 AA de las WCAG en muchos lugares del producto. Los títulos de las APIs de la lista 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 app 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 del tamaño de un teléfono estrecho. Las páginas Crear y Editar aplicación ahora son más responsivas a pantallas estrechas.

Cambios del 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 personalizaron (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 cambió el estilo del seudoelemento :before. Si deseas obtener más información, consulta Cómo anular colores primarios para 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 (además de la imagen de fondo de pantalla completa): Se limitó el ancho máximo del contenido de la página para mejorar la capacidad de respuesta, lo que puede restringir los paneles que antes eran de ancho completo en las páginas personalizadas. Para obtener más información sobre el uso de la nueva configuración de ancho máximo, consulta Cómo crear un panel de ancho completo en una página del portal.
  • Se segmentaron niveles de encabezado HTML específicos con selectores 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 "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 con un fondo blanco. Recomendamos elegir un color secundario accesible y luego anularlo con un esquema personalizado en situaciones específicas.
  • Se aplicó estilo a los vínculos en el texto:Ahora es más accesible el estilo de los vínculos. Consulta los cambios a continuación para comprender cómo puede interactuar con tu estilo actual.
  • Se ocultó o se estilizó el borde inferior de 2 px en el área de contenido de las tarjetas de vista de la página principal con anulaciones de CSS: Este borde se movió de <mat-card-content> a un borde superior en <mat-card-actions>.

Resumen de 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 nuevas variables que proporcionan control sobre el ancho máximo del área de contenido principal y el padding horizontal mínimo del á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 realizados en la barra de navegación principal.

  • El logotipo <img> ahora se une a una <a> para los tamaños de pantalla de computadoras de escritorio y dispositivos móviles
  • El botón desplegable del usuario ahora es <button> en lugar de <a>.

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 de página 404

A continuación, se resumen los cambios realizados 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 realizados en la página de las APIs por categoría.

  • Tarjeta de entrada de filtro y búsqueda de la API:
    • <mat-card-content class="mat-card-content"> ahora une el encabezado y la entrada de la tarjeta de las APIs de búsqueda.
    • <H2> ahora usa class="mat-subheading-1", en lugar de class="api-doc-filter-title"
    • Ahora <mat-form-field> usa appearance="outline"
    • Se agregó un ícono de búsqueda a <mat-form-field> antes de la entrada: "<mat-icon matPrefix>search</mat-icon>"
    • Se agregaron las etiquetas ARIA y las 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:

    "Ninguna API coincide 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 quitó de la imagen que contiene <div> y se movió a <div class="api-doc-card-content-title"></div>, inmediatamente después de la imagen <div>.
    • El título de la API ahora es <H2> en lugar de <H1>.

Lista de apps:

  • Estado vacío:
    • "Comenzar" ahora cuesta <H2> en lugar de <H1>.
    • La orientación 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á deformado en una <a>

Crear y editar páginas de la aplicación

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

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

Lista de equipos

A continuación, se resumen los cambios realizados en la lista del equipo.

  • Estado vacío:
    • "Comenzar" ahora tiene el valor <H2> en lugar de <H1>.
    • La opción "Crear un equipo para administrar la propiedad compartida de la app" ahora se establece en <H3> en lugar de <H2>
  • Lista:

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

Crear y editar páginas del equipo

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

  • En <form>, se reemplazó la clase .teams-form por .details-form.
  • Se movió <div class="teams-buttons"> al final de <form> y se reemplazó por <div class="form-buttons-sticky-container">
  • Se cambió todo el uso de la clase .teams-layout-section a .details-layout-section
  • Se cambió todo el uso de la clase .teams-layout-section-title a .details-layout-section-title
  • Se cambió todo el uso de la clase .teams-layout-section-content 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 Angular Material.
    • 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 editor de temas "secundario" del portal.
    • Los elementos seleccionados, enfocados y colocados en el cursor de la navegación lateral ahora usan variaciones oscuras y claras del editor de temas del portal "color secundario" 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>

Cómo agregar 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>, ajusta el texto en una <a class="navigable-content" href="href-name"> y establece 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>

Anulación de 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 estilo personalizado a las barras de navegación y los encabezados de las páginas con el editor de temas avanzado, similar al siguiente en el caso de 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
  }
}

Procedimiento de actualización para administrar las APIs de una app

La interacción del usuario para administrar las APIs en una app del portal integrado cambió. Específicamente, cuando se administra una app, en la sección APIs, los usuarios deben hacer clic en ícono de habilitación o ícono de inhabilitación (en lugar de en un botón de activación) para habilitar o inhabilitar el acceso, respectivamente, a una API desde la app.

Actualiza cualquier procedimiento de tu portal que describa cómo administrar las APIs en la página de apps, si corresponde. Para obtener más información, consulta Cómo administrar las APIs en tu app.

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.

ID del problema Nombre del componente Descripción
161269688 Portal integrado

Las miniaturas de los elementos se procesan de forma incorrecta en Apigee Hybrid

Ahora las miniaturas se muestran correctamente en la página Recursos.

161295683 Portal integrado

El servidor falla sin una descripción establecida para la app

La creación de la app se realizará correctamente si su descripción (un campo opcional) no se define para una app.

160898967 Portal integrado

La página de destino del portal no se desplaza correctamente

La página de destino del portal ahora se puede desplazar.

160613314,
159197760,
158643196,
158069283,
158069066,
140154942
Portal integrado

Diversas correcciones de seguridad

158593496 Portal integrado

No se puede crear la app de desarrollador en los portales de la versión 1

Se corrigió un problema que impedía la creación de apps para desarrolladores en los portales de la versión 1.

158318079 Portal integrado

No se puede agregar ni modificar la URL de devolución de llamada en el portal para desarrolladores

Se corrigió un problema que impedía que los usuarios del portal agregaran o modificaran una URL de devolución de llamada en la página de APIs.

157902256 Portal integrado

La publicación puede anular la actualización del nombre de una página en la página Detalles de la página

Se corrigió un problema que causaba que se anulara una actualización del nombre de una página cuando publicaste el portal (causado por una condición de carrera).

138993728 Portal integrado

La búsqueda y el ordenamiento por correo electrónico de los programas para desarrolladores no funcionan

La búsqueda y el ordenamiento de cuentas de usuario personales ahora funcionan como se espera.

Errores conocidos

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