20.07.27 – נתוני הגרסה של הפורטל המשולב של Apigee Edge

אתם צופים במסמכי התיעוד של Apigee Edge.
כדאי לעיין במסמכי התיעוד של Apigee X. מידע

ביום שני, 27 ביולי, נתחיל להשיק גרסה חדשה של הפורטל המשולב של Apigee Edge.

תכונות חדשות ושיפורים

בקטע הזה מתוארים התכונות והשיפורים החדשים בגרסה הזו.

שיפורים בנגישות ובתגובה

ברשימה הבאה מפורטים שיפורים בנגישות ובתגובה שיושמו בגרסה הזו.

• ניווט באמצעות המקלדת: עכשיו אפשר לנווט באמצעות המקלדת בסרגלי הניווט של הכותרת והכותרת התחתונה, בניווט הצדדי של SmartDocs, ברשימת האפליקציות, בתצוגה מפורטת של אפליקציה ובכרטיסי ה-API.
  
• ניהול המיקוד: כשמנווטים באמצעות סרגל הניווט של הכותרת וסרגל הצד של SmartDocs, המיקוד עובר אל <H1> הראשון בדף אחרי פעולת ניווט.
• אזורים פעילים: שינויים ברשימת ממשקי ה-API שנובעים מסינון טקסטואלי מדווחים עכשיו למשתמשים שנעזרים בקורא מסך.
• שימוש סמנטי בכותרות HTML: כל הטקסט מוכל עכשיו בתגי HTML שמתאימים מבחינה סמנטית. בפורטל נעשה עכשיו שימוש במבנה היררכי מתאים של כותרות.
• שימוש יחיד בתג <H1>: לכל דף יש עכשיו רק תג <H1> אחד, כדי שקוראי מסך יוכלו לזהות בקלות את התיאור הכי אינפורמטיבי של תוכן הדף.
• שימוש באותיות רישיות כסגנון: השימוש באותיות רישיות בלבד כהדגשה חזותית מתבצע עכשיו באמצעות CSS בלבד, ולא בטקסט עצמו.
• סדר הגיוני של ה-DOM: כפתורי הפעולה בדפים 'יצירת אפליקציה' ו'עריכת אפליקציה' הועברו מתחת לאלמנטים של הטופס ב-DOM, כדי שאפשר יהיה להפעיל אותם בסדר הגיוני, בסיום האינטראקציה עם הטופס.
• תיאורים טקסטואליים של רכיבים ויזואליים: נעשה שימוש משופר בתוויות, בטקסט חלופי ובטקסט של כפתורים, וכל אלה משפרים את הניווט באמצעות קורא מסך.
• ניגודיות בין הצבעים: הניגודיות בין הצבעים הוגדלה כדי לעמוד בדרישות הניגודיות של WCAG AA במקומות רבים במוצר. הכותרות של ממשקי ה-API ברשימת ממשקי ה-API הועברו מתחת לתמונה כדי למנוע ניגודיות צבעים לא מספקת.
• אימות טופס: בדפים 'יצירת אפליקציה' ו'עריכת אפליקציה', לחצני שליחת הטופס לא מושבתים יותר ואפשר להפעיל אותם כדי לאמת את הטופס. שדות טופס שאומתו בדפים 'יצירת אפליקציה' ו'עריכת אפליקציה' כוללים עכשיו תיאורים מילוליים של שגיאת האימות.
• התאמה לכל סוגי המסכים: עכשיו יש רוחב מקסימלי שרלוונטי לכל הדפים חוץ מ-SmartDocs. הניווט ב-SmartDocs פועל עכשיו במסכים צרים בגודל של טלפון. הדפים ליצירה ולעריכה של אפליקציות מגיבים עכשיו טוב יותר למסכים צרים.

שינויים ב-DOM שעשויים להשפיע על הפורטל

חשוב לשקול במיוחד אם:

• סרגלי הניווט (הכותרת והכותרת התחתונה) וכותרות הדפים עוצבו (או הוסתרו) באמצעות החלפות של CSS: עכשיו יש רוחב מקסימלי לתוכן הדף. כדי להרחיב את סרגלי הניווט ואת כותרות הדפים עד לקצה של חלון הדפדפן, Apigee עיצב את רכיב ה-pseudo ‏:before. מידע נוסף מופיע במאמר בנושא שינוי צבעים ראשיים בסרגלי ניווט ובכותרות דפים.
• יש רכיבי דף עם רקעים שמגיעים עד לקצה של חלון הדפדפן (מלבד תמונת הרקע במסך מלא): הרוחב המקסימלי של תוכן הדף הוגבל כדי לשפר את הרספונסיביות, ולכן יכול להיות שחלוניות שהיו ברוחב מלא בדפים מותאמים אישית יהיו מוגבלות. מידע נוסף על שימוש בהגדרות החדשות של רוחב מקסימלי זמין במאמר יצירת חלונית ברוחב מלא בדף פורטל.
• סלקטורים ב-CSS שימשו לשינוי סגנונות טקסט ברמות כותרת ספציפיות ב-HTML: רמת הכותרת שחלה על תוכן מסוים השתנתה. לדוגמה: <H1> → <H2> כדאי לעיין ברשימת השינויים המפורטת של הגרסה הזו כדי להבין בדיוק אילו תכנים מושפעים.
• צבע לבן או צבע בהיר מאוד נבחר כ'צבע משני' בכלי לעריכת ערכות נושא בפורטל: הצבע המשני משמש לרכיבי ניווט שיהיה קשה לראות על רקע לבן. מומלץ לבחור צבע משני נגיש ואז לשנות אותו באמצעות קובץ scss מותאם אישית במקרים ספציפיים.
• הוספנו סגנון לקישורים בתוך הטקסט: הסגנון של הקישורים נגיש יותר עכשיו. בהמשך מפורטים השינויים, כדי להבין איך הם עשויים להשפיע על הסגנון הקיים.
• הגבול התחתון של 2 פיקסלים באזור התוכן של כרטיסים בתצוגת הבית עוצב או הוסתר באמצעות החלפות של CSS: הגבול הזה הועבר מ-<mat-card-content> לגבול עליון ב-<mat-card-actions>.

סיכום של שינויים מפורטים

בקטעים הבאים מפורטים השינויים שהוטמעו בגרסה הזו, לפי קטגוריה.

שינויים בכל הפורטל

למטה מופיע סיכום של השינויים בפורטל.

• המשתנים הבאים כבר לא בשימוש:
  • $layout-horizontal-padding
  • $layout-main-content-horiz-padding
  • $layout-header-horiz-padding
  • $layout-context-bar-horiz-padding
• יש משתנים חדשים שמאפשרים לשלוט ברוחב המקסימלי של אזור התוכן הראשי ובריווח האופקי המינימלי של אזור התוכן הראשי:
  • $layout-main-content-max-width
  • $layout-horizontal-min-padding

שינויים בסרגל הניווט הראשי

בטבלה הבאה מפורטים השינויים בסרגל הניווט הראשי.

• הלוגו <img> עכשיו מוקף בתג <a> גם בגדלים של מסכי מחשב וגם בגדלים של מסכים בנייד
• לחצן התפריט הנפתח של המשתמש הוא עכשיו <button> במקום <a>

שינויים בסגנון הקישור

קישורים רגילים <a> בתוך טקסט כוללים עכשיו קו תחתון כברירת מחדל וצבע רקע (על סמך הגדרות העיצוב 'צבע משני') כשמעבירים מעליהם את העכבר

שינויים בדף 404

בהמשך מפורטים השינויים בדף השגיאה 404.

• הלחצן 'כניסה עכשיו' הוא עכשיו <H2> במקום <H1>
• טקסט ההסבר הוא עכשיו <H2> במקום <H1>

דף ממשקי ה-API

בהמשך מפורטים השינויים שבוצעו בדף ממשקי ה-API, לפי קטגוריה.

• כרטיס קלט של חיפוש או סינון ב-API:
  • ‫<mat-card-content class="mat-card-content"> עכשיו הכותרת והקלט של כרטיס ה-API של החיפוש מוצגים בשורה אחת
  • המחיר של <H2> הוא class="mat-subheading-1" עכשיו במקום class="api-doc-filter-title"
  • האפליקציה <mat-form-field> משתמשת עכשיו ב-appearance="outline"
  • סמל החיפוש נוסף ל-<mat-form-field> לפני הקלט: "<mat-icon matPrefix>search</mat-icon>"
  • נוספו תוויות ARIA והפניות לבקרה לקלט
• הודעה על רשימת API ריקה:
  • ההודעה 'לא נמצאו ממשקי API' היא עכשיו <H2> במקום <H1>
  • ההסבר הוא עכשיו <H3> במקום <H2>
• רשימת כרטיסי API:

  ההודעה 'לא נמצאו ממשקי API שתואמים לחיפוש שלך' מוצגת עכשיו כ-<H2> במקום כ-<H1>

• כרטיסי API:
  • >div class="api-doc-card-content-image-gradient"></div> הוסר
  • הכותרת של ה-API הועברה מחוץ לתמונה שמכילה את <div> אל <div class="api-doc-card-content-title"></div> מיד אחרי התמונה <div>
  • כותרות ה-API הן עכשיו <H2> במקום <H1>

רשימת האפליקציות:

• מצב ריק:
  • הלחצן 'התחלה' הוא עכשיו <H2> במקום <H1>
  • ההנחיות למצב ריק הן עכשיו <H3> במקום <H2>
• רשימה:
  • הקטע 'האפליקציות שלי' נקרא עכשיו <H2> במקום <H1>
  • <mat-row> נמצא עכשיו ב-<a>

יצירה ועריכה של דפי אפליקציות

בהמשך מפורטים השינויים שבוצעו בדפים 'יצירת אפליקציה' ו'עריכת אפליקציה'.

• הפריט <div class="app-buttons"> הועבר לסוף התג <form> והוחלף ב-<div class="form-buttons-sticky-container">
• כל השימוש במחלקה .app-layout-section השתנה ל-.details-layout-section
• כל השימוש במחלקה .app-layout-section-title השתנה ל-.details-layout-section-title
• כל הכותרות של הקטעים הן עכשיו <H2> במקום <div>
• כל השימוש במחלקה .app-layout-section-content השתנה ל-.details-layout-section-content
• רשימת ממשקי ה-API כבר לא מוצגת כרשימה של כרטיסי API עם מתגי הפעלה (בדומה לרשימת ממשקי ה-API). במקום זאת, זו טבלה של ממשקי API
• הזנת כתובת URL להתקשרות חזרה הועברה לקטע חדש
• הלחצן 'שמירה' משתמש עכשיו בסגנון mat-raised-button וברקע בצבע הראשי
• הטבלאות עכשיו עטופות בתג <div> עם המחלקה .app-table-wrapper
• כותרות הטבלה משתמשות עכשיו ב-wrapper ‏<thead>
• התגים של גוף הטבלה משתמשים עכשיו בתג העוטף <tbody>
• הסימן [style.width] לא משמש יותר להגדרת רוחב העמודות בטבלה
• כל התגים <a> בטבלה משתמשים עכשיו ב-<button במקום

רשימת קבוצות

בהמשך מפורטים השינויים שבוצעו ברשימת הצוות.

• מצב ריק:
  • המחיר של 'Get started' הוא <H2> עכשיו במקום <H1>
  • האפשרות 'יצירת צוות לניהול בעלות משותפת על אפליקציות' היא עכשיו <H3> במקום <H2>
• רשימה:

  השם 'Teams' הוא עכשיו <H2> במקום <H1>

יצירה ועריכה של דפים של צוותים

בהמשך מפורט סיכום של השינויים שבוצעו בדפים 'יצירה' ו'עריכה' של צוותים.

• בדף <form> הכיתה .teams-form הוחלפה בכיתה .details-form
• השדה <div class="teams-buttons"> הועבר לסוף <form> והוחלף על ידי <div class="form-buttons-sticky-container">
• כל השימוש במחלקה .teams-layout-section השתנה ל-.details-layout-section
• כל השימוש במחלקה .teams-layout-section-title השתנה ל-.details-layout-section-title
• כל השימוש במחלקה .teams-layout-section-content השתנה ל-.details-layout-section-content
• התווים <div class="team-apps-container"> נוספו מסביב ל-<table class="team-apps">

SmartDocs

בהמשך מפורטים השינויים בממשק SmartDocs.

• סרגל צד לניווט:
  • הניווט הצדדי נכתב מחדש לגמרי באמצעות רכיבי angular-material
  • הכותרות בסרגל הצד לניווט הן עכשיו <H2> במקום <div>
  • פריטי הניווט משתמשים עכשיו בצבע הטקסט שמוגדר כברירת מחדל בפורטל, במקום ב'צבע המשני' בכלי לעריכת העיצוב של הפורטל
  • פריטים שנבחרו, פריטים שהמיקוד עבר אליהם ופריטים שמוצגת מעליהם תצוגה מקדימה בניווט הצדדי, מוצגים עכשיו עם וריאציות כהות ובהירות של 'הצבע המשני' של עורך העיצוב של הפורטל, לטקסט ולרקע בהתאמה.
• תוכן:
  • הרבה כותרות משנה כמו 'פרמטרים של נתיב' ו'פרמטרים של כותרת' הן עכשיו <H2> במקום <H3>
  • יש עכשיו <H3>=> בדף הסקירה הכללית במקום <H2>

הוספת שיפורים לנגישות לדף בית קיים

אם יש לכם פורטל קיים, תצטרכו לערוך את דף הבית כדי ליהנות משיפורים חדשים בנגישות של כרטיסים שניתן לנווט בהם, כמו שמתואר בהמשך:

1. הסרת href="" מהקונטיינר <mat-card>.
2. במקום <H1>, משתמשים ב-<H2> בכותרת הכרטיס ב-<mat-card-header>.
3. בתוך כותרת הכרטיס <h2> עוטפים את הטקסט בתג <a class="navigable-content" href="href-name"> ומגדירים את href-name לערך המתאים לניווט בכרטיס.

לחלופין, אפשר להשתמש בתבנית הכרטיס הבאה:

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

שינוי הצבעים הראשיים של סרגלי הניווט וכותרות הדפים

כדי להרחיב את סרגלי הניווט ואת כותרות הדפים עד לקצה של חלון הדפדפן, מוסיפים סגנון מותאם אישית לסרגלי הניווט ולכותרות הדפים באמצעות כלי העריכה המתקדם של ערכת הנושא, בדומה למה שמופיע בהמשך לגבי סרגל הניווט של הכותרת:

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

תהליך העדכון של ניהול ממשקי API באפליקציה

השתנה אופן האינטראקציה של המשתמשים עם ממשקי ה-API באפליקציה בפורטל המשולב. במיוחד, כשמנהלים אפליקציה, בקטע APIs, המשתמשים צריכים ללחוץ על או על (במקום על מתג) כדי להפעיל או להשבית את הגישה ל-API מהאפליקציה, בהתאמה.

אם רלוונטי, צריך לעדכן את כל ההליכים בפורטל שמתארים איך לנהל ממשקי API בדף האפליקציות. מידע נוסף מופיע במאמר בנושא ניהול ממשקי ה-API באפליקציה.

באגים שתוקנו

בגרסה הזו תוקנו הבאגים הבאים. הרשימה הזו מיועדת בעיקר למשתמשים שרוצים לבדוק אם הבעיות שצוינו בכרטיסי התמיכה שלהם נפתרו. הדוח לא נועד לספק מידע מפורט לכל המשתמשים.

בעיות מוכרות

רשימת הבעיות הידועות בפורטל המשולב מופיעה במאמר בעיות ידועות בפורטל המשולב.