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 ניסחה את הרכיב המדומה :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

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

רשימת הקבוצות

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

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

    צוותים השם הוא עכשיו <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.

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

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

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

  1. צריך להסיר את href="" מהמאגר <mat-card>.
  2. לכותרת הכרטיס בתוך <mat-card-header>, יש להשתמש ב-<H2> במקום ב-<H1>.
  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 באפליקציה בפורטל המשולב. באופן ספציפי, כשמשתמשים מנהלים אפליקציה, בקטע 'ממשקי API' צריך ללחוץ על סמל הפעלה או על סמל השבתה (במקום מתג) כדי להפעיל או להשבית את הגישה, בהתאמה, ל-API מהאפליקציה.

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

הבאגים תוקנו

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

מזהה הבעיה שם הרכיב תיאור
161269688 פורטל משולב

הרינדור של תמונות ממוזערות של נכסים שגוי ב-Apigee hybrid

תמונות ממוזערות מוצגות עכשיו בצורה נכונה בדף 'נכסים'.

161295683 פורטל משולב

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

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

160898967 פורטל משולב

דף הנחיתה של הפורטל לא נגלל כמו שצריך

עכשיו ניתן לגלול בדף הנחיתה של הפורטל.

160613314,
159197760,
158643196,
158069283,
158069066,
140154942 		פורטל משולב

תיקוני אבטחה שונים
158593496 פורטל משולב

היצירה של אפליקציה למפתחים נכשלה בפורטלים של V1

תוקנה בעיה שמנעה את היצירה של אפליקציות למפתחים בפורטלים של V1.

158318079 פורטל משולב

ההוספה או השינוי של כתובת URL לקריאה חוזרת (callback) בפורטל למפתחים לא פועלות

תוקנה בעיה שמנעה ממשתמשי הפורטל להוסיף או לשנות כתובת URL לקריאה חוזרת (callback) בדף ממשקי ה-API.

157902256 פורטל משולב

פרסום יכול לבטל עדכון של שם הדף בדף פרטי הדף

תוקנה בעיה שגרמה לביטול העדכון של שם הדף כשפרסמתם את הפורטל (עקב מרוץ תהליכים).

138993728 פורטל משולב

מיון וחיפוש של אימיילים לא פועלים בתוכנות למפתחים

החיפוש והמיון של חשבונות משתמשים פרטיים פועלים עכשיו כצפוי.

בעיות מוכרות

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