‫۲۷/۰۷/۲۰ - یادداشت‌های انتشار درگاه یکپارچه Apigee Edge

درحال مشاهده اسناد Apigee Edge هستید.
به اسناد Apigee X بروید. اطلاعات

روز دوشنبه، ۲۷ ژوئیه، شروع به انتشار نسخه جدیدی از درگاه یکپارچه Apigee Edge خواهیم کرد.

ویژگی‌های جدید و بهبودها

این بخش ویژگی‌های جدید و بهبودهای این نسخه پخش را شرح می‌دهد.

بهبودهای دسترس‌پذیری و پاسخ‌دهی

در زیر فهرست بهبودهای دسترس‌پذیری و واکنش‌گرایی که برای این نسخه پیاده‌سازی شده است آمده است.

• پیمایش با صفحه‌کلید: اکنون می‌توان بااستفاده از صفحه‌کلید در نوارهای پیمایش سرایند و پاصفحه، پیمایش کناری «سندهای هوشمند»، «فهرست برنامه‌ها»، «نمای برنامه»، و کارت‌های API پیمایش کرد.
  
• مدیریت تمرکز: پیمایش با نوار پیمایش سرایند و پیمایش جانبی «سندنگار هوشمند» تمرکز را به اولین <H1> در صفحه پس‌از کنش پیمایش منتقل می‌کند.
• مناطق فعال: تغییرات فهرست میاناهای برنامه‌سازی کاربردی ناشی از فیلتر کردن نوشتاری اکنون به کاربرانی که از صفحه‌خوان استفاده می‌کنند گزارش می‌شود.
• استفاده معنایی از عنوان‌های HTML: اکنون همه نوشتار در برچسب‌های HTML معنایی مناسب قرار دارد. اکنون در سراسر درگاه از ساختار عنوان سلسله‌مراتبی مناسب استفاده می‌شود.
• استفاده تکی از <H1>: هر صفحه اکنون فقط یک <H1> دارد تا صفحه‌خوان‌ها بتوانند به‌راحتی آموزنده‌ترین شرح محتوای صفحه را شناسایی کنند.
• بزرگ‌نویسی سبکی: استفاده از حروف بزرگ به‌عنوان یک لهجه بصری اکنون منحصراً با CSS اعمال می‌شود نه در متن واقعی.
• ترتیب منطقی DOM: دکمه‌های کنش در صفحه‌های «ایجاد» و «ویرایش برنامه» به زیر عناصر فرم در DOM منتقل شده‌اند تا بتوانند به‌ترتیب منطقی، در پایان تعامل با فرم، فعال شوند.
• شرح‌های نوشتاری عناصر دیداری: استفاده از برچسب‌ها، نوشتار جایگزین، و نوشتار دکمه بهبود یافته است که همه این‌ها پیمایش با صفحه‌خوان را بهبود می‌بخشد.
• کنتراست رنگ: کنتراست رنگ در بسیاری از بخش‌های محصول افزایش یافته است تا با الزامات کنتراست «دستورالعمل‌های دسترس‌پذیری محتوای وب» سطح AA مطابقت داشته باشد. عنوان‌های «میانای برنامه‌سازی کاربردی» در فهرست «میاناهای برنامه‌سازی کاربردی» به زیر تصویر منتقل شده است تا از کنتراست رنگ ناکافی احتمالی جلوگیری شود.
• اعتبارسنجی فرم: در صفحه‌های «ایجاد» و «ویرایش برنامه»، دکمه‌های ارسال فرم دیگر غیرفعال نیستند و می‌توانند برای اعتبارسنجی فرم فعال شوند. فیلدهای فرم اعتبارسنجی‌شده در صفحه‌های «ایجاد» و «ویرایش برنامه» اکنون شامل شرح‌های نوشتاری خطای اعتبارسنجی است.
• واکنش‌گرایی: اکنون حداکثر پهنایی وجود دارد که برای همه صفحه‌ها به‌جز «سندهای هوشمند» اعمال می‌شود. پیمایش SmartDocs اکنون در صفحه‌نمایش‌های باریک در اندازه تلفن کار می‌کند. صفحه‌های «ایجاد و ویرایش برنامه» اکنون به صفحه‌نمایش‌های باریک واکنش‌گراتر هستند.

تغییرات DOM که ممکن است بر درگاه شما تأثیر بگذارد

به‌ویژه در موارد زیر درنظر بگیرید:

• نوارهای پیمایش (سرصفحه و پاصفحه) و سرصفحه‌های صفحه با ملغی کردن CSS سبک‌بندی (یا پنهان) شده‌اند: اکنون حداکثر پهنایی برای محتوای صفحه وجود دارد. برای گسترش نوارهای پیمایش و سرایندهای صفحه تا لبه پنجره مرورگر، Apigee عنصر کاذب :before را سبک‌بندی کرد. برای اطلاعات بیشتر، به جایگزین کردن رنگ‌های اصلی برای نوارهای پیمایش و سرصفحه‌های صفحه مراجعه کنید.
• عناصر صفحه‌ای با پس‌زمینه‌هایی وجود دارد که تا لبه پنجره مرورگر امتداد می‌یابد (به‌جز تصویر پس‌زمینه تمام‌صفحه): حداکثر پهنای محتوای صفحه برای بهبود پاسخ‌دهی محدود شده است، که ممکن است پانل‌های تمام‌عرض قبلی را در صفحه‌های سفارشی محدود کند. برای اطلاعات بیشتر درباره استفاده از تنظیمات جدید بیشینه عرض، به ایجاد پانل تمام‌عرض در صفحه درگاه مراجعه کنید.
• سطوح عنوان HTML خاصی با گزینشگرهای CSS هدف‌یابی شده‌اند تا سبک‌های نوشتار را اصلاح کنند: سطح عنوان اعمال‌شده بر محتوای خاصی تغییر کرده است. برای مثال: <H1> → <H2> فهرست تغییرات دقیق این نسخه پخش را مرور کنید تا دقیقاً متوجه شوید کدام محتوا تحت تأثیر قرار گرفته است.
• رنگ سفید یا رنگ بسیار روشنی به‌عنوان «رنگ ثانویه» در ویرایشگر زمینه درگاه انتخاب شده است: رنگ ثانویه برای عناصر پیمایش استفاده می‌شود که در پس‌زمینه سفید به‌سختی دیده می‌شوند. توصیه می‌کنیم یک رنگ ثانویه دسترس‌پذیر انتخاب کنید و سپس درصورت لزوم آن را با scss سفارشی در موقعیت‌های خاص ملغی کنید.
• پیوندهای درون‌متنی سبک‌بندی شده‌اند:سبک‌بندی پیوندها اکنون دسترس‌پذیرتر است. برای درک نحوه تعامل آن با سبک‌بندی موجودتان، تغییرات زیر را ببینید.
• حاشیه پایین ۲ پیکسل در ناحیه محتوای کارت‌های نمای صفحه اصلی با بازنویسی‌های 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> درون نوشتار اکنون به‌طور پیش‌فرض زیرخط دارند و رنگ پس‌زمینه (براساس تنظیمات زمینه «رنگ ثانویه») در حالت شناور دارند

تغییرات صفحه ۴۰۴

تغییرات صفحه ۴۰۴ در زیر خلاصه شده است.

• «اکنون به سیستم وارد شوید» اکنون <H2> است به‌جای <H1>
• نوشتار توضیح اکنون <H2> به‌جای <H1> است

صفحه میاناهای برنامه‌سازی کاربردی

تغییرات صفحه «میاناهای برنامه‌سازی کاربردی» در زیر براساس دسته خلاصه شده است.

• کارت ورودی جستجو/فیلتر API:
  • ‫<mat-card-content class="mat-card-content"> اکنون عنوان کارت و ورودی «میاناهای برنامه‌سازی کاربردی جستجو» را می‌پیچد
  • ‫<H2> اکنون به‌جای class="api-doc-filter-title" از class="mat-subheading-1" استفاده می‌کند
  • ‫<mat-form-field> اکنون از appearance="outline" استفاده می‌کند
  • نماد جستجو به <mat-form-field> قبل‌از ورودی اضافه شده است: "<mat-icon matPrefix>search</mat-icon>"
  • برچسب‌های Aria و مرجع‌های کنترل به ورودی اضافه شده است
• پیام فهرست میانای برنامه‌سازی کاربردی خالی:
  • پیام «هیچ واسط برنامه‌نویسی کاربردی پیدا نشد» اکنون به‌جای <H1>، <H2> است
  • توضیح اکنون <H3> به‌جای <H2> است
• فهرست کارت‌های میانای برنامه‌سازی کاربردی:

  «هیچ میانای برنامه‌سازی کاربردی با جستجوی شما مطابقت ندارد» اکنون <H2> است به‌جای <H1>

• کارت‌های API:
  • >div class="api-doc-card-content-image-gradient"></div> حذف شد
  • عنوان API از تصویر حاوی <div> به <div class="api-doc-card-content-title"></div> که بلافاصله پس‌از تصویر <div> قرار دارد منتقل شده است
  • عنوان «میانای برنامه‌سازی کاربردی» اکنون <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 تغییر کرد
• فهرست «میاناهای برنامه‌سازی کاربردی» دیگر فهرست کارت‌های «میانای برنامه‌سازی کاربردی» با کلیدهای روشن/خاموش (مشابه فهرست «میاناهای برنامه‌سازی کاربردی») نیست. درعوض، جدولی از میاناهای برنامه‌سازی کاربردی است
• ورودی «نشانی وب برگشت تماس» به بخش جدیدی منتقل شده است
• دکمه ذخیره اکنون از سبک mat-raised-button و پس‌زمینه رنگ اصلی استفاده می‌کند
• اکنون جدول‌ها در <div> با کلاس .app-table-wrapper پیچیده شده‌اند
• سرصفحه‌های جدول اکنون از بسته‌بندی <thead> استفاده می‌کنند
• بدنه جدول اکنون از بسته‌بندی <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 در زیر خلاصه شده است.

• پیمایش کناری:
  • پیمایش کناری به‌طور کامل با عناصر angular-material بازنویسی شده است
  • اکنون عنوان‌های پیمایش کناری <H2> است به‌جای <div>
  • عناصر پیمایش اکنون به‌جای «رنگ فرعی» ویرایشگر زمینه درگاه، از رنگ نوشتار پیش‌فرض درگاه استفاده می‌کنند
  • عناصر انتخاب‌شده، کانونی، و نگه‌داشته‌شده در پیمایش کناری اکنون از تغییرات تیره و روشن «رنگ دوم» ویرایشگر زمینه درگاه برای نوشتار و پس‌زمینه استفاده می‌کنند
• محتوا:
  • بسیاری از زیرعنوان‌ها مثل «پارامترهای مسیر» و «پارامترهای سرایند» اکنون <H2> به‌جای <H3> هستند
  • تعداد نهادهای طرحواره در صفحه نمای کلی اکنون <H3>=> است به‌جای <H2>

افزودن بهبودهای دسترس‌پذیری به صفحه اصلی موجود

اگر درگاه خروجی دارید، باید صفحه اصلی را ویرایش کنید تا از بهبودهای جدید دسترس‌پذیری برای کارت‌های پیمایش‌پذیر بهره‌مند شوید، همان‌طور که در زیر توضیح داده شده است:

1. ‫href="" را از محتوی <mat-card> بردارید.
2. برای عنوان کارت در <mat-card-header>، به‌جای <H1> از <H2> استفاده کنید.
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
  }
}

به‌روزرسانی رویه مدیریت میاناهای برنامه‌سازی کاربردی برای یک برنامه

تعامل کاربر برای مدیریت کردن «میاناهای برنامه‌سازی کاربردی» در برنامه در درگاه یکپارچه تغییر کرده است. به‌طور خاص، هنگام مدیریت یک برنامه، در بخش «میاناهای برنامه‌سازی کاربردی»، کاربران باید روی یا (به‌جای یک دکمه روشن/خاموش) کلیک کنند تا دسترسی به یک میانای برنامه‌سازی کاربردی از برنامه را به‌ترتیب فعال یا غیرفعال کنند.

درصورت لزوم، هر رویه‌ای را در درگاهتان که نحوه مدیریت میاناهای برنامه‌سازی کاربردی در صفحه برنامه‌ها را شرح می‌دهد به‌روز کنید. برای اطلاعات بیشتر، به مدیریت میاناهای برنامه‌سازی کاربردی در برنامه مراجعه کنید.

اشکالات رفع شد

اشکالات زیر در این نسخه پخش برطرف شده است. این فهرست عمدتاً برای کاربرانی است که می‌خواهند ببینند آیا درخواست‌های پشتیبانی‌شان برطرف شده است یا نه. این ویژگی برای ارائه اطلاعات دقیق به همه کاربران طراحی نشده است.

مشکلات شناخته‌شده

برای مشاهده فهرست مشکلات شناخته‌شده در درگاه یکپارچه، به مشکلات شناخته‌شده در درگاه یکپارچه مراجعه کنید.