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

A continuación, se enumeran las mejoras de accesibilidad y capacidad de respuesta que se implementaron en 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 Apps, la vista de la app y las tarjetas de API con el teclado.
  
• Administración del enfoque: Cuando se navega con la barra de navegación del encabezado y la navegación lateral de SmartDocs, el enfoque se mueve al primer <H1> de la página después de una acción de navegación.
• Regiones dinámicas: 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 adecuadas. Ahora se usa una estructura de encabezados jerárquica adecuada en todo el portal.
• Uso singular de <H1>: Ahora cada página 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.
• Uso de mayúsculas con fines estilísticos: El uso de todas las letras en 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 de las páginas Create y Edit App 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 con el formulario.
• Descripciones textuales de los 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 las WCAG AA en muchos lugares del producto. Los títulos de las APIs 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 Create y Edit 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 a SmartDocs. La navegación de SmartDocs ahora funciona en pantallas estrechas del tamaño de un teléfono. Las páginas Create y Edit App 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 aplicó un diseño al seudoelemento :before. Para obtener más información, consulta Cómo anular los colores principales de las barras de navegación y los encabezados de página.
• Hay elementos de la página con fondos que se extienden hasta el borde de la ventana del navegador (aparte de 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 cómo usar la nueva configuración de max-width, consulta Crea un panel de ancho completo en la página de un portal.
• Se segmentaron niveles de encabezado HTML específicos con selectores de CSS para modificar los estilos de texto: Se 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 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 un archivo SCSS personalizado en situaciones específicas.
• Se aplicó un nuevo diseño a los 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 la 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 se usan:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Hay nuevas variables que brindan control sobre el valor de max-width para el á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 escritorio y dispositivos móviles.
• El botón desplegable del usuario ahora es <button> en lugar de <a>.

Cambios en el diseño 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 el "color secundario" de la configuración del tema) 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 la API:
  • <mat-card-content class="mat-card-content"> ahora incluye el encabezado y la entrada de la tarjeta de las APIs de búsqueda
  • El <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 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:

  El mensaje "No APIs match your search" 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ó de la imagen que contiene <div> 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 apps:

• Estado vacío:
  • "Comenzar" ahora es <H2> en lugar de <H1>
  • La orientación sobre el estado vacío ahora es <H3> en lugar de <H2>
• Lista:
  • "Mis apps" ahora es <H2> en lugar de <H1>
  • Ahora <mat-row> está deformado en un <a>

Cómo crear y editar páginas de aplicaciones

A continuación, se resumen los cambios en las páginas Crear app 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 APIs con interruptores (similar a la lista de APIs). En cambio, es una tabla de APIs.
• La entrada de URL de devolución de llamada se movió a una nueva sección
• El botón de guardar ahora usa el estilo mat-raised-button y el color primario de fondo.
• Ahora las tablas se incluyen en un <div> con la clase .app-table-wrapper.
• Los encabezados de tabla ahora usan el wrapper <thead>
• Los cuerpos de las tablas ahora usan el wrapper <tbody>
• [style.width] ya no se usa para establecer el ancho 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 app" ahora es <H3> en lugar de <H2>
• Lista:

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

Cómo crear y editar páginas de equipos

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

• En <form>, la clase .teams-form se reemplazó por .details-form.
• <div class="teams-buttons"> se trasladó 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 la 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 claras y oscuras 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" y "Parámetros de encabezado", ahora son <H2> en lugar de <H3>.
  • Las entidades de esquema en la página de descripción general ahora son <H3>=> en lugar de <H2>

Agregar mejoras de accesibilidad a una página principal existente

Si tienes un portal existente, deberás editar la página principal para aprovechar las nuevas mejoras de accesibilidad en 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>

Cómo anular 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
  }
}

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

Se cambió la interacción del usuario para administrar las APIs en una app del portal integrado. Específicamente, cuando administran 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 el acceso, respectivamente, a una API de la app.

Si corresponde, actualiza los procedimientos de tu portal que describen cómo administrar las APIs en la página de apps. 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.

Problemas conocidos

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