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. מידע נוסף זמין במאמר בנושא שינוי צבעים ראשיים בסרגלי ניווט ובכותרות דפים.
• יש רכיבי דף עם רקעים שמגיעים עד לקצה חלון הדפדפן (מלבד תמונת הרקע במסך מלא): רוחב התוכן המקסימלי בדף הוגבל כדי לשפר את הרספונסיביות, ולכן יכול להיות שחלוניות שהיו ברוחב מלא בדפים בהתאמה אישית יהיו מוגבלות. מידע נוסף על שימוש בהגדרות החדשות של רוחב מקסימלי זמין במאמר יצירת חלונית ברוחב מלא בדף פורטל.
• רמות כותרת ספציפיות של HTML מטורגטות באמצעות סלקטורים של CSS כדי לשנות סגנונות טקסט: רמת הכותרת שחלה על תוכן מסוים השתנתה. לדוגמה: <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

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

• כרטיס קלט של חיפוש או סינון ב-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 לקריאה חוזרת (callback) הועברה לקטע חדש
• הלחצן 'שמירה' משתמש עכשיו בסגנון mat-raised-button וברקע בצבע הראשי
• הטבלאות עכשיו עטופות בתג <div> עם המחלקה .app-table-wrapper
• כותרות הטבלה משתמשות עכשיו ב-wrapper‏ <thead>
• התגים של גוף הטבלה משתמשים עכשיו בתג העוטף <tbody>
• התג [style.width] לא משמש יותר להגדרת רוחב העמודות בטבלה
• כל התגים <a> בטבלה משתמשים עכשיו בתג <button במקום

רשימת קבוצות

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

• מצב ריק:
  • הלחצן 'התחלה' הוא עכשיו <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. משתמשים ב-<H2> במקום ב-<H1> בכותרת הכרטיס בתוך <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 באפליקציה.

באגים שתוקנו

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

בעיות מוכרות

רשימה של בעיות מוכרות בפורטל המשולב זמינה במאמר בעיות מוכרות בפורטל המשולב.