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

Estás viendo la documentación de Apigee Edge.
Ve a 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 en la accesibilidad y la capacidad de respuesta

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

• Navegación con teclado: Ahora es posible navegar por las barras de navegación de encabezados y pies de página, la navegación lateral de SmartDocs, la lista de apps, la vista de apps y las tarjetas de API con el teclado.
  
• Administración de enfoque: Si navegas con la barra de navegación del encabezado y la navegación lateral de SmartDocs, se mueve el enfoque a la primera <H1> de la página después de una acción de navegación.
• Regiones activas: Ahora se informan a los usuarios que usan un lector de pantalla los cambios en la lista de APIs que resultan del filtrado textual.
• Uso semántico de encabezados HTML: Ahora todo el texto se encuentra en etiquetas HTML semánticamente adecuadas. Ahora se utiliza una estructura de encabezado apropiadamente jerárquica en todo el portal.
• Uso único de <H1>: Ahora cada página tiene un solo elemento <H1> para que los lectores de pantalla puedan identificar fácilmente la descripción más informativa del contenido de la página.
• Mayúsculas estilísticas: Ahora el uso de mayúsculas y minúsculas como acento visual ahora se aplica exclusivamente con CSS, y no en el texto.
• Orden lógico del DOM: Los botones de acción de las páginas Crear y editar apps se movieron debajo de los elementos del formulario en el DOM para que se puedan activar en orden lógico, una vez que se complete la interacción con el 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 AA de las WCAG en muchos lugares del producto. Los títulos de las APIs de la lista de APIs se movieron debajo de la imagen para evitar un posible contraste de color insuficiente.
• Validación de formulario: En las páginas Crear y editar app, 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 SmartDocs. La navegación de SmartDocs ahora funciona en pantallas angostas del tamaño de un teléfono. Las páginas Crear y Editar app ahora son más responsivas ante pantallas estrechas.

Cambios en el DOM que pueden afectar tu portal

Especialmente ten en cuenta lo siguiente:

• Se ocultaron o se aplicaron los ajustes de estilo a las barras de navegación (encabezado y pie de página) y a los encabezados de página 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 principales 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 (aparte de la imagen de fondo en pantalla completa): Se limitó el ancho máximo del contenido de la página para mejorar la capacidad de respuesta, lo que podría restringir los paneles que antes eran de ancho completo en las páginas personalizadas. Para obtener más información sobre cómo usar la nueva configuración de ancho máximo, consulta Crea un panel de ancho completo en una página del portal.
• Se orientó un determinado nivel de encabezado HTML 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 detallada de cambios de esta versión para comprender exactamente qué contenido se ve afectado.
• Se seleccionó 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 sobre un fondo blanco. Te recomendamos que elijas un color secundario accesible y que, si es necesario, lo anules con scss personalizado en situaciones específicas.
• Se dio un estilo a los vínculos en el texto: Ahora, el estilo de los vínculos es más accesible. Consulta los cambios a continuación para comprender cómo puede interactuar con tu diseño actual.
• El borde inferior de 2 px en el área de contenido de las tarjetas de vista de la página principal tiene un estilo 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 cambios detallados

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

Cambios en todo el portal

A continuación, se resumen los cambios que se realizaron 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 realizados en la barra de navegación principal.

• El logotipo <img> ahora está envuelto en un <a> para 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>.

Cambios en el diseño del vínculo

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

Cambios en la página 404

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

• "Acceder ahora" ahora es <H2> en lugar de <H1>
• El texto de la 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 las APIs, por categoría.

• Tarjeta de entrada de filtro/búsqueda de la API:
  • <mat-card-content class="mat-card-content"> ahora une el encabezado y la entrada de la tarjeta de APIs de búsqueda.
  • <H2> ahora usa class="mat-subheading-1" en lugar de class="api-doc-filter-title".
  • <mat-form-field> ahora 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 a la entrada etiquetas ARIA y referencias de control.
• 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 quitó de la imagen que contiene <div> y se movió a <div class="api-doc-card-content-title"></div>, justo 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:
  • "Primeros pasos" ahora es <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á torcido en un <a>.

Crea y edita páginas de apps

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

• Se movió <div class="app-buttons"> al final de la etiqueta <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 de activación (similar a la lista de APIs). sino una tabla de APIs
• La entrada de la URL de devolución de llamada se movió a una nueva sección
• El botón para guardar ahora usa el estilo de botón de relieve y el color de fondo principal
• Las tablas ahora están unidas a una <div> con la clase .app-table-wrapper
• Los encabezados de la tabla ahora usan el wrapper <thead>
• Los cuerpos de las tablas ahora usan el wrapper <tbody>
• Ya no se usa [style.width] para establecer anchos de columnas de 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 Equipo.

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

  “Equipos” el título ahora es <H2> en lugar de <H1>

Crear y editar páginas de equipo

A continuación, se resumen los cambios que se realizaron 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">
• 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"> en torno a <table class="team-apps">

SmartDocs

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

• Navegación lateral:
  • La navegación lateral se reescribió por completo con componentes de material de 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 editor de temas del portal "color secundario" para el texto y el fondo respectivamente
• Contenido:
  • Muchos subtítulos, como "Parámetros de ruta" 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 saliente, tendrás que editar la página principal para aprovechar las nuevas mejoras de accesibilidad de 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>, une 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>

Anula los colores principales 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 Sobre el borde de la ventana del navegador, agrega un estilo 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 de encabezados:

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

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

Actualiza los procedimientos en tu portal que describan cómo administrar APIs en la página de apps, si corresponde. Para obtener más información, consulta Administra 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 renderizan de forma incorrecta en Apigee Hybrid Las miniaturas ahora se muestran correctamente en la página Activos.
161295683	Portal integrado	Error del servidor sin una descripción configurada para la app La creación de la app ahora se realizará correctamente si no se definió la descripción (un campo opcional) para una app.
160898967	Portal integrado	La página de destino del portal no se desplaza correctamente Ahora es posible desplazarse por la página de destino del portal.
160613314 159197760, 158643196, 158069283, 158069066, 140154942	Portal integrado	Diversas correcciones de seguridad
158593496	Portal integrado	La creación de apps para desarrolladores falla en los portales de la versión 1 Se solucionó un problema que impedía la creación de apps para desarrolladores en los portales V1.
158318079	Portal integrado	No funciona la opción de agregar ni modificar la URL de devolución de llamada en el portal para desarrolladores Se solucionó 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 hacía que se anulara la actualización del nombre de una página cuando publicaste el portal (causado por una condición de carrera).
138993728	Portal integrado	Los desarrolladores programaban el orden y la búsqueda de correos electrónicos no funcionan La búsqueda y ordenación de las cuentas de usuario de consumidores ahora funciona como se espera.

Problemas conocidos

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