20.07.27 - Note di rilascio del portale integrato Apigee Edge

Stai visualizzando la documentazione di Apigee Edge.
Vai alla documentazione di Apigee X. informazioni

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

Nuove funzionalità e miglioramenti

Questa sezione descrive le nuove funzionalità e i miglioramenti di questa release.

Miglioramenti dell'accessibilità e della reattività

Di seguito sono elencati i miglioramenti all'accessibilità e alla reattività implementati in questa release.

• Navigazione da tastiera: ora è possibile navigare tra le barre di navigazione di intestazione e piè di pagina, la navigazione laterale di SmartDocumenti, l'elenco di app, la visualizzazione delle app e le schede API utilizzando la tastiera.
  
• Gestione mirata: la navigazione con la barra di navigazione dell'intestazione e la navigazione laterale di SmartDocumenti spostano lo stato attivo sul primo <H1> della pagina dopo un'azione di navigazione.
• Regioni attive: le modifiche all'elenco di API derivanti dai filtri testuali vengono ora segnalate agli utenti che utilizzano uno screen reader.
• Utilizzo semantico dei titoli HTML: tutto il testo ora è contenuto in tag HTML semanticamente appropriati. Ora viene utilizzata una struttura di intestazioni opportunamente gerarchica in tutto il portale.
• 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.
• Maiuscole stilistiche: l'uso delle maiuscole come accento visivo viene ora applicato esclusivamente con il CSS anziché 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, e questo migliora la navigazione con uno screen reader.
• Contrasto del colore: il contrasto cromatico è stato aumentato per soddisfare i requisiti di contrasto delle WCAG AA in molti punti di tutto il prodotto. I titoli delle API nell'elenco delle API sono stati spostati sotto l'immagine per evitare un possibile contrasto di colore insufficiente.
• Convalida 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 dei moduli convalidati nelle pagine Crea e modifica app ora includono descrizioni testuali dell'errore di convalida.
• Adattabilità: ora esiste una larghezza massima che viene applicata a tutte le pagine tranne che a SmartDocumenti. La navigazione SmartDocumenti ora funziona su schermi stretti delle dimensioni dei telefoni. Le pagine Crea e Modifica app ora sono più reattive agli schermi stretti.

Modifiche al DOM che potrebbero influire sul portale

Considera in particolare se:

• Alle barre di navigazione (intestazione e piè di pagina) e alle intestazioni di pagina sono stati applicati stili (o nascosti) con override CSS: ora è prevista 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 definito lo pseudo elemento :before. Per ulteriori informazioni, consulta la sezione Sostituire i colori primari delle barre di navigazione e delle intestazioni di pagina.
• Esistono elementi della pagina con sfondi che si estendono fino al bordo della finestra del browser (ad eccezione dell'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 a larghezza intera all'interno di pagine personalizzate. Per ulteriori informazioni sull'utilizzo delle nuove impostazioni di larghezza massima, consulta l'articolo Creare un riquadro a larghezza intera in una pagina del portale.
• I selettori CSS hanno come target livelli specifici di intestazione HTML per modificare gli stili di testo: il livello di intestazione applicato ad alcuni contenuti è cambiato. Ad esempio: <H1> → <H2> consulta l'elenco dettagliato delle modifiche di questa release per capire esattamente quali contenuti sono interessati.
• Come "colore secondario" viene selezionato un colore bianco o molto chiaro nell'editor del tema del portale:il colore secondario viene utilizzato per gli elementi di navigazione che saranno difficili da vedere su uno sfondo bianco. Ti consigliamo di scegliere un colore secondario accessibile e di sostituirlo, se necessario, con CSS personalizzati in situazioni specifiche.
• I link nel testo sono stati definiti:lo stile dei link è ora più accessibile. Vedi le modifiche di seguito per capire in che modo può interagire con lo stile esistente.
• Il bordo inferiore di 2 px nell'area dei contenuti delle schede della schermata Dispositivi connessi è stato nascosto o applicato con lo stile delle sostituzioni CSS: questo bordo è stato spostato da <mat-card-content> a un bordo superiore su <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 orizzontale minima per l'area dei contenuti principale:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

Modifiche alla barra di navigazione principale

Le modifiche apportate alla barra di navigazione principale sono riepilogate di seguito.

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

Modifiche allo stile del link

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

Modifiche alle pagine 404

Le modifiche apportate alla pagina 404 sono riassunte di seguito.

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

pagina API

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

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

  "Nessuna API corrispondente alla 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 dall'immagine contenente <div> e in <div class="api-doc-card-content-title"></div> subito dopo l'immagine <div>
  • I titoli delle API ora sono <H2> anziché <H1>

Elenco di app:

• Stato vuoto:
  • "Inizia" ora è <H2> anziché <H1>
  • La guida per lo stato vuota ora è <H3> anziché <H2>
• Elenco:
  • Il valore di "Le mie app" è ora pari a <H2> anziché a <H1>
  • <mat-row> è ora deformato in <a>

Crea e modifica pagine dell'app

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

• <div class="app-buttons"> è stato spostato alla fine di <form> e sostituito da <div class="form-buttons-sticky-container">
• Tutti gli utilizzi della classe .app-layout-section sono stati modificati in .details-layout-section
• Tutti gli utilizzi della classe .app-layout-section-title sono stati modificati in .details-layout-section-title
• Tutte le intestazioni di sezione ora sono <H2> anziché <div>
• Tutti gli utilizzi della classe .app-layout-section-content sono stati modificati 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 sollevato nel riquadro con il mouse e il colore di sfondo principale
• Ora le tabelle sono aggregate in un <div> con la classe .app-table-wrapper
• Le intestazioni della tabella ora utilizzano il wrapper <thead>
• I corpo delle tabelle ora utilizzano il wrapper <tbody>
• [style.width] non è più utilizzato per impostare la larghezza delle colonne della tabella
• Tutti i <a> tag all'interno della tabella ora utilizzano invece <button

Elenco team

Le modifiche all'elenco Team sono riepilogate di seguito.

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

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

Creazione e modifica di pagine Team

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

• Il giorno <form> la classe .teams-form è stata sostituita da .details-form
• <div class="teams-buttons"> è stato spostato alla fine di <form> e sostituito da <div class="form-buttons-sticky-container">
• Tutti gli utilizzi della classe .teams-layout-section sono stati modificati in .details-layout-section
• Tutti gli utilizzi della classe .teams-layout-section-title sono stati modificati in .details-layout-section-title
• Tutti gli utilizzi della classe .teams-layout-section-content sono stati modificati in .details-layout-section-content
• Elemento <div class="team-apps-container"> aggiunto intorno a <table class="team-apps">

SmartDocs

Le modifiche all'interfaccia di Smart Docs sono riepilogate di seguito.

• Navigazione laterale:
  • La barra di navigazione laterale è stata completamente riscritta con componenti di materiale angolare.
  • Le intestazioni di navigazione laterale ora sono <H2> anziché <div>
  • Gli elementi di navigazione ora utilizzano il colore del testo predefinito del portale anziché il "colore secondario " dell'editor di temi del portale
  • Gli elementi selezionati, attivi e al passaggio del mouse nella barra di navigazione laterale ora utilizzano variazioni scure e chiare del "colore secondario" dell'editor del tema del portale rispettivamente per il testo e lo sfondo
• Contenuti:
  • Molti sottotitoli come "Parametri percorso" e "Parametri intestazione" ora sono <H2> anziché <H3>
  • Le entità schema nella pagina Panoramica ora sono <H3>=> anziché <H2>

Aggiungere miglioramenti dell'accessibilità a una home page esistente

Se hai un portale uscente, dovrai modificare la home page per sfruttare i nuovi miglioramenti dell'accessibilità per le schede navigabili, come descritto di seguito:

1. Rimuovi href="" dal contenitore <mat-card>.
2. Utilizza <H2> anziché <H1> per l'intestazione della scheda all'interno di <mat-card-header>.
3. All'interno dell'intestazione della scheda <h2>, racchiudi il testo in <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>

Sostituzione dei colori primari delle barre di navigazione e delle intestazioni di pagina

Per estendere le barre di navigazione e le intestazioni di pagina fino al bordo della finestra del browser, aggiungi stili personalizzati per le barre di navigazione e le intestazioni di pagina utilizzando l'editor di temi avanzato, come descritto di seguito 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
  }
}

Procedura di aggiornamento 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 gestiscono un'app, nella sezione API gli utenti devono fare clic su o (anziché su un pulsante di attivazione/disattivazione) per abilitare o disabilitare, rispettivamente, l'accesso a un'API dall'app.

Aggiorna le procedure sul portale che descrivono come gestire le API nella pagina delle app, se applicabile. Per maggiori informazioni, consulta Gestire le API nell'app.

Bug corretti

In questa release sono stati corretti i bug indicati di seguito. Questo elenco è destinato principalmente agli utenti che verificano se i ticket di assistenza sono stati risolti. Non è progettata per fornire informazioni dettagliate a tutti gli utenti.

ID problema	Nome componente	Descrizione
161269688	Portale integrato	Le miniature degli asset non vengono visualizzate correttamente in Apigee hybrid Le miniature ora vengono visualizzate correttamente nella pagina Risorse.
161295683	Portale integrato	Errore del server senza descrizione impostata per l'app Se la descrizione (campo facoltativo) non è definita per l'app, la creazione dell'app andrà a buon fine.
160898967	Portale integrato	La pagina di destinazione del portale non scorre correttamente Ora è possibile scorrere la pagina di destinazione del portale.
160613314, 159197760, 158643196, 158069283, 158069066, 140154942	Portale integrato	Correzioni di sicurezza varie
158593496	Portale integrato	La creazione dell'app per sviluppatori non riesce nei portali V1 È 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 di un nome di pagina nella pagina Dettagli pagina È stato risolto un problema che causava l'override dell'aggiornamento del nome di una pagina al momento della pubblicazione del portale (a causa di una gara).
138993728	Portale integrato	L'ordinamento e la ricerca delle email dei programmi per sviluppatori non funzionano 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 relativi al portale integrato.