20.07.27 - Note di rilascio del portale integrato Apigee Edge

Stai visualizzando la documentazione di Apigee Edge.
Vai alla sezione Documentazione di Apigee X. Informazioni

Lunedì 27 luglio inizieremo a rilasciare una nuova versione del portale integrato Apigee Edge.

Nuove funzionalità e miglioramenti

In questa sezione vengono descritte le nuove funzioni e i miglioramenti di questa release.

Miglioramenti all'accessibilità e alla reattività

Di seguito sono elencati i miglioramenti dell'accessibilità e della reattività implementati per questa release.

• Navigazione da tastiera: ora è possibile esplorare le barre di navigazione di intestazioni e piè di pagina, la navigazione laterale di SmartDocumenti, l'elenco delle app, la visualizzazione App e le schede API utilizzando la tastiera.
  
• Gestione dello stato attivo : se utilizzi la barra di navigazione dell'intestazione e la barra di navigazione laterale SmartDocumenti, sposta lo stato attivo sul primo <H1> della pagina dopo un'azione di navigazione.
• Regioni attive: le modifiche all'elenco di API derivanti dall'applicazione di filtri testuali vengono ora segnalate agli utenti che utilizzano uno screen reader.
• Uso semantico dei titoli HTML: tutto il testo è ora contenuto in tag HTML semanticamente appropriati. Ora in tutto il portale viene utilizzata una struttura di intestazioni adeguatamente gerarchica.
• Utilizzo singolare di <H1>: ogni pagina ora ha un solo <H1>, in modo che gli screen reader possano identificare facilmente la descrizione più informativa dei contenuti della pagina.
• Lettere maiuscole stilistiche: l'uso dell'iniziale maiuscola come accento visivo viene ora applicato esclusivamente con CSS e non nel testo effettivo.
• Ordine logico del DOM: i pulsanti di azione nelle pagine Crea e Modifica app sono stati spostati sotto gli elementi del modulo nel DOM, in modo da poter essere attivati in ordine logico al termine dell'interazione con il modulo.
• Descrizioni testuali degli elementi visivi: è stato migliorato l'utilizzo di etichette, testo alternativo e testo dei pulsanti, tutti elementi che migliorano la navigazione con uno screen reader.
• Contrasto del colore: il contrasto di colore è stato aumentato per soddisfare i requisiti di contrasto delle WCAG AA in molti punti del prodotto. I titoli nell'elenco delle API sono stati spostati sotto l'immagine per evitare un possibile contrasto di colore insufficiente.
• Convalida del modulo: nelle pagine Crea e modifica app, i pulsanti per l'invio del modulo non sono più disattivati e possono essere attivati per convalidare il modulo. I campi del modulo convalidati nelle pagine Crea e modifica app ora includono descrizioni testuali dell'errore di convalida.
• Reattività: ora esiste una larghezza massima che si applica a tutte le pagine, ad eccezione di SmartDocs. La navigazione SmartDocs ora funziona su schermi stretti delle dimensioni di un telefono. Le pagine Crea e Modifica app ora sono più reattive per gli schermi stretti.

Modifiche al DOM che potrebbero interessare il tuo portale

Prendi in considerazione in particolare se:

• Alle barre di navigazione (intestazione e piè di pagina) e alle intestazioni delle pagine sono stati applicati stili (o nascosti) con sostituzioni CSS: ora è stata impostata una larghezza massima per i contenuti delle pagine. Per estendere le barre di navigazione e le intestazioni di pagina fino al bordo della finestra del browser, Apigee ha applicato lo stile allo pseudo elemento :before. Per ulteriori informazioni, consulta Ignorare i colori primari per le barre di navigazione e le intestazioni di pagina.
• Esistono elementi della pagina con sfondi che si estendono fino al bordo della finestra del browser (diversi dall'immagine di sfondo a schermo intero): la larghezza massima dei contenuti della pagina è stata limitata per migliorare la reattività, il che potrebbe limitare eventuali riquadri precedentemente a larghezza intera all'interno di pagine personalizzate. Per saperne di più sull'utilizzo delle nuove impostazioni max-width, vedi Creare un riquadro a larghezza intera in una pagina del portale.
• Sono stati scelti come target specifici livelli di intestazione HTML con i selettori CSS per modificare gli stili di testo: il livello dell'intestazione applicato a determinati contenuti è cambiato. Ad esempio: <H1> → <H2> Esamina l'elenco dettagliato delle modifiche di questa release per capire esattamente quali contenuti sono interessati.
• Come "colore secondario" viene selezionato un bianco o un colore molto chiaro Nell'editor dei temi del portale: il colore secondario viene utilizzato per gli elementi di navigazione che sono difficili da vedere su uno sfondo bianco. Ti consigliamo di scegliere un colore secondario accessibile e di sostituirlo, se necessario, con elementi CSS personalizzati in situazioni specifiche.
• Stile dei link nel testo: ora lo stile dei link è più accessibile. Consulta le modifiche riportate di seguito per capire come possono interagire con lo stile esistente.
• Il bordo inferiore di 2 px nell'area dei contenuti delle schede della schermata Dispositivi connessi è stato nascosto o modificato con sostituzioni CSS: questo bordo è stato spostato da <mat-card-content> a bordo superiore il giorno <mat-card-actions>.

Riepilogo delle modifiche dettagliate

Le seguenti sezioni riepilogano in dettaglio le modifiche implementate in questa release, suddivise per categoria.

Modifiche a livello di portale

Le modifiche a livello di portale sono riepilogate di seguito.

• Le seguenti variabili non sono più in uso:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• Esistono nuove variabili che forniscono il controllo sulla larghezza massima per l'area dei contenuti principali e sulla spaziatura interna minima orizzontale per l'area dei contenuti principali:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Modifiche alla barra di navigazione principale

Le modifiche alla barra di navigazione principale sono riassunte di seguito.

• Il logo <img> ora è racchiuso in <a> per schermi di dimensioni di computer e dispositivi mobili di dimensioni diverse
• Il pulsante del menu a discesa dell'utente è ora <button> anziché <a>

Modifiche allo stile dei link

I link standard <a> all'interno del testo ora hanno una sottolineatura per impostazione predefinita e un colore di sfondo (in base alle impostazioni del tema "colore secondario") al passaggio del mouse

404 modifiche alla pagina

Le modifiche alla pagina 404 sono riepilogate di seguito.

• "Accedi ora" ora è <H2> anziché <H1>
• Il testo della spiegazione ora è <H2> anziché <H1>

pagina API

Le modifiche alla pagina API sono riepilogate di seguito, per categoria.

• Scheda di input del filtro/ricerca API:
  • <mat-card-content class="mat-card-content"> ora aggrega l'intestazione e l'input della scheda delle API di ricerca
  • <H2> ora utilizza class="mat-subheading-1" anziché class="api-doc-filter-title"
  • Il <mat-form-field> ora utilizza appearance="outline"
  • Un'icona di ricerca è stata aggiunta a <mat-form-field> prima dell'input: "<mat-icon matPrefix>search</mat-icon>"
  • Le etichette e i riferimenti di controllo ARIA sono stati aggiunti all'input
• Messaggio vuoto per l'elenco delle API:
  • "Nessuna API trovata" ora è <H2> anziché <H1>
  • La spiegazione è ora <H3> anziché <H2>
• Elenco di schede API:

  "Nessuna API corrisponde alla tua ricerca" ora è <H2> anziché <H1>

• Schede API:
  • L'utente >div class="api-doc-card-content-image-gradient"></div> è stato rimosso
  • Il titolo dell'API è stato spostato all'esterno dell'immagine contenente <div> e in <div class="api-doc-card-content-title"></div> subito dopo l'immagine <div>
  • Il titolo dell'API è ora <H2> anziché <H1>

Elenco di app:

• Stato vuoto:
  • "Inizia" ora è <H2> anziché <H1>
  • Le indicazioni sullo stato vuoto ora sono <H3> anziché <H2>
• Elenco:
  • "Le mie app" ora è <H2> anziché <H1>
  • <mat-row> ora è deformato in <a>

Crea e modifica pagine dell'app

Le modifiche apportate alle pagine Crea e modifica app sono riepilogate di seguito.

• L'elemento <div class="app-buttons"> è stato spostato in fondo al modulo <form> e sostituito da <div class="form-buttons-sticky-container">
• Tutto l'utilizzo della classe .app-layout-section è cambiato in .details-layout-section
• Tutto l'utilizzo della classe .app-layout-section-title è cambiato in .details-layout-section-title
• Tutte le intestazioni di sezione ora sono <H2> anziché <div>
• Tutto l'utilizzo della classe .app-layout-section-content è cambiato in .details-layout-section-content
• L'elenco delle API non è più un elenco di schede API con opzioni di attivazione/disattivazione (simile all'elenco delle API). Si tratta invece di una tabella di API
• L'input dell'URL di callback è stato spostato in una nuova sezione
• Il pulsante Salva ora utilizza lo stile del pulsante con il badge in rilievo e il colore di sfondo principale
• Le tabelle sono ora raggruppate in un elemento <div> con classe .app-table-wrapper
• Le intestazioni della tabella ora utilizzano il wrapper <thead>
• I corpo della tabella ora utilizzano il wrapper <tbody>
• [style.width] non viene più utilizzato per impostare la larghezza delle colonne della tabella
• Tutti i tag <a> nella tabella ora usano <button

Elenco dei team

Le modifiche all'elenco Team sono riepilogate di seguito.

• Stato vuoto:
  • "Inizia" ora è <H2> anziché <H1>
  • "Crea un team per gestire la proprietà delle app condivise" ora è <H3> anziché <H2>
• Elenco:

  "Team" il titolo è ora <H2> anziché <H1>

Crea e modifica le pagine dei team

Le modifiche apportate alle pagine Crea e Modifica team sono riepilogate di seguito.

• Il giorno <form> il corso .teams-form è stato sostituito da .details-form
• <div class="teams-buttons"> è stato spostato alla fine di <form> e sostituito da <div class="form-buttons-sticky-container">
• Tutto l'utilizzo della classe .teams-layout-section è cambiato in .details-layout-section
• Tutto l'utilizzo della classe .teams-layout-section-title è cambiato in .details-layout-section-title
• Tutto l'utilizzo della classe .teams-layout-section-content è cambiato in .details-layout-section-content
• <div class="team-apps-container"> è stato aggiunto per l'area <table class="team-apps">

SmartDocs

Le modifiche all'interfaccia di SmartDocs sono riepilogate di seguito.

• Navigazione laterale:
  • La barra di navigazione laterale è stata completamente riscritta con componenti angolari
  • Le intestazioni di navigazione laterale sono ora <H2> anziché <div>
  • Gli elementi di navigazione ora utilizzano il colore di testo predefinito del portale anziché il "colore secondario" dell'editor dei temi del portale
  • Gli elementi selezionati, con lo stato attivo e su cui è stato passato il mouse nella barra di navigazione laterale ora utilizzano le variazioni chiare e scure dell'editor dei temi del portale "colore secondario" rispettivamente per il testo e lo sfondo
• Contenuti:
  • Molte sottointestazioni, ad esempio "Parametri percorso" e "Parametri intestazione" ora sono <H2> anziché <H3>
  • Le entità dello schema nella pagina Panoramica ora sono <H3>=> anziché <H2>

Aggiunta di miglioramenti dell'accessibilità a una home page esistente

Se hai un portale che sta uscendo, dovrai modificare la home page per usufruire dei nuovi miglioramenti dell'accessibilità per le schede navigabili, come descritto di seguito:

1. Rimuovi href="" dal contenitore <mat-card>.
2. Usa <H2> anziché <H1> per l'intestazione della scheda all'interno di <mat-card-header>.
3. All'interno dell'intestazione della scheda <h2>, inserisci il testo in una <a class="navigable-content" href="href-name"> e imposta href-name sul valore appropriato per la navigazione della scheda.

In alternativa, puoi utilizzare il seguente modello di scheda:

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

Sostituire i colori primari per le barre di navigazione e le intestazioni di pagina

Per estendere le barre di navigazione e le intestazioni di pagina sul bordo della finestra del browser, aggiungi stili personalizzati per le barre di navigazione e le intestazioni di pagina utilizzando l'editor dei temi avanzato, come per la barra di navigazione delle intestazioni:

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

Aggiornamento della procedura per la gestione delle API per un'app

L'interazione dell'utente per la gestione delle API in un'app sul portale integrato è cambiata. In particolare, quando si gestisce un'app, nella sezione API gli utenti devono fare clic su o (anziché un pulsante di attivazione/disattivazione) per abilitare o disabilitare l'accesso, rispettivamente, a un'API dall'app.

Aggiorna tutte le procedure sul portale che descrivono come gestire le API nella pagina delle app, se applicabile. Per ulteriori informazioni, vedi Gestione delle API nell'app.

Bug corretti

In questa release sono stati corretti i bug riportati di seguito. Questo elenco è destinato principalmente agli utenti che vogliono visualizzare se i ticket di assistenza sono stati risolti. Non è pensata per fornire informazioni dettagliate per tutti gli utenti.

ID problema	Nome componente	Descrizione
161269688	Portale integrato	Il rendering delle miniature degli asset non viene eseguito correttamente in Apigee hybrid Ora le miniature vengono visualizzate correttamente nella pagina Risorse.
161295683	Portale integrato	Errore del server senza nessuna descrizione impostata per l'app Ora la creazione dell'app avverrà se per un'app non è definita la descrizione (un campo facoltativo).
160898967	Portale integrato	La pagina di destinazione del portale non scorre correttamente La pagina di destinazione del portale è ora scorrevole.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Portale integrato	Varie correzioni per la sicurezza
158593496	Portale integrato	La creazione di app sviluppatore non riesce nei portali della versione 1 È stato risolto un problema che impediva la creazione di app per sviluppatori sui portali V1.
158318079	Portale integrato	L'aggiunta o la modifica dell'URL di callback nel portale per gli sviluppatori non funziona È stato risolto un problema che impediva agli utenti del portale di aggiungere o modificare un URL di callback nella pagina delle API.
157902256	Portale integrato	La pubblicazione può sostituire l'aggiornamento del nome di una pagina nella pagina dei dettagli della pagina È stato risolto un problema che causava l'override dell'aggiornamento del nome della pagina al momento della pubblicazione del portale (causato da una condizione di gara).
138993728	Portale integrato	Programmi per sviluppatori di ordinamento e ricerca delle email non funzionanti La ricerca e l'ordinamento degli account utente consumer ora funzionano come previsto.

Problemi noti

Per un elenco dei problemi noti relativi al portale integrato, vedi Problemi noti con il portale integrato.