20.07.27 - Apigee Edge ইন্টিগ্রেটেড পোর্টাল রিলিজ নোট

আপনি Apigee Edge ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশনে যান । তথ্য

সোমবার, ২৭শে জুলাই, আমরা Apigee Edge ইন্টিগ্রেটেড পোর্টালের একটি নতুন সংস্করণ প্রকাশ শুরু করব।

নতুন বৈশিষ্ট্য এবং বর্ধিতকরণ

এই বিভাগে এই রিলিজের নতুন বৈশিষ্ট্য এবং বর্ধিতকরণগুলি বর্ণনা করা হয়েছে।

অ্যাক্সেসিবিলিটি এবং প্রতিক্রিয়াশীলতার উন্নতি

এই রিলিজের জন্য বাস্তবায়িত অ্যাক্সেসিবিলিটি এবং প্রতিক্রিয়াশীলতার উন্নতিগুলি নীচে তালিকাভুক্ত করা হয়েছে।

• কীবোর্ড নেভিগেশন: এখন কীবোর্ড ব্যবহার করে হেডার এবং ফুটার নেভিগেশন বার, স্মার্টডক্স সাইড নেভিগেশন, অ্যাপস তালিকা, অ্যাপ ভিউ এবং API কার্ড নেভিগেট করা সম্ভব।
  
• ফোকাস ম্যানেজমেন্ট: হেডার নেভিগেশন বার এবং স্মার্টডক্স সাইড নেভিগেশন ব্যবহার করে নেভিগেশন করার সময়, নেভিগেশন অ্যাকশনের পরে পৃষ্ঠার প্রথম <H1> এ ফোকাস সরানো হয়।
• লাইভ অঞ্চল: টেক্সট ফিল্টারিংয়ের ফলে API-এর তালিকায় যে পরিবর্তন আসে তা এখন স্ক্রিন রিডার ব্যবহারকারী ব্যবহারকারীদের কাছে রিপোর্ট করা হয়।
• HTML শিরোনামের শব্দার্থিক ব্যবহার: সমস্ত লেখা এখন শব্দার্থিকভাবে উপযুক্ত HTML ট্যাগের মধ্যে অন্তর্ভুক্ত। এখন সমগ্র পোর্টাল জুড়ে একটি যথাযথভাবে শ্রেণিবদ্ধ শিরোনাম কাঠামো ব্যবহার করা হচ্ছে।
• <H1> এর একবচন ব্যবহার : প্রতিটি পৃষ্ঠায় এখন কেবল একটি <H1> আছে যাতে স্ক্রিন রিডাররা সহজেই পৃষ্ঠার বিষয়বস্তুর সবচেয়ে তথ্যপূর্ণ বর্ণনা সনাক্ত করতে পারে।
• স্টাইলিস্টিক ক্যাপিটালাইজেশন: ভিজ্যুয়াল অ্যাকসেন্ট হিসেবে অল-ক্যাপের ব্যবহার এখন প্রকৃত টেক্সটের পরিবর্তে একচেটিয়াভাবে CSS-এর সাথে প্রয়োগ করা হয়।
• DOM-এর লজিক্যাল অর্ডারিং: Create and Edit App পৃষ্ঠাগুলিতে অ্যাকশন বোতামগুলিকে DOM-এর ফর্ম এলিমেন্টের নীচে সরানো হয়েছে যাতে ফর্ম ইন্টারঅ্যাকশন সম্পন্ন হওয়ার পরে এগুলিকে লজিক্যাল ক্রমে সক্রিয় করা যায়।
• ভিজ্যুয়াল এলিমেন্টের টেক্সট বর্ণনা: লেবেল, অল্টারনেট টেক্সট এবং বোতাম টেক্সটের উন্নত ব্যবহার রয়েছে যা স্ক্রিন রিডারের মাধ্যমে নেভিগেশন উন্নত করে।
• রঙের বৈপরীত্য: পণ্য জুড়ে অনেক জায়গায় WCAG AA বৈপরীত্যের প্রয়োজনীয়তা পূরণের জন্য রঙের বৈপরীত্য বৃদ্ধি করা হয়েছে। সম্ভাব্য অপর্যাপ্ত রঙের বৈপরীত্য এড়াতে API তালিকার API শিরোনামগুলি ছবির নীচে সরানো হয়েছে।
• ফর্ম যাচাইকরণ: অ্যাপ তৈরি এবং সম্পাদনা পৃষ্ঠাগুলিতে, ফর্ম জমা দেওয়ার বোতামগুলি আর নিষ্ক্রিয় থাকে না এবং ফর্মটি যাচাই করার জন্য সক্রিয় করা যেতে পারে। অ্যাপ তৈরি এবং সম্পাদনা পৃষ্ঠাগুলিতে যাচাইকৃত ফর্ম ক্ষেত্রগুলিতে এখন বৈধতা ত্রুটির পাঠ্য বিবরণ অন্তর্ভুক্ত থাকে।
• প্রতিক্রিয়াশীলতা: এখন স্মার্টডক্স ছাড়া সকল পৃষ্ঠার জন্য সর্বোচ্চ প্রস্থ প্রযোজ্য। স্মার্টডক্স নেভিগেশন এখন সংকীর্ণ ফোন-আকারের স্ক্রিনে কাজ করে। তৈরি করুন এবং সম্পাদনা করুন অ্যাপ পৃষ্ঠাগুলি এখন সংকীর্ণ স্ক্রিনের জন্য আরও প্রতিক্রিয়াশীল।

DOM পরিবর্তন যা আপনার পোর্টালকে প্রভাবিত করতে পারে

বিশেষ করে বিবেচনা করুন যদি:

• নেভিগেশন বার (হেডার এবং ফুটার) এবং পৃষ্ঠার শিরোনামগুলি CSS ওভাররাইড দিয়ে স্টাইল করা হয়েছে (অথবা লুকানো হয়েছে) : পৃষ্ঠার সামগ্রীর জন্য এখন সর্বাধিক প্রস্থ রয়েছে। ব্রাউজার উইন্ডোর প্রান্তে নেভিগেশন বার এবং পৃষ্ঠার শিরোনাম প্রসারিত করতে, Apigee :before ছদ্ম উপাদানটি স্টাইল করেছে। আরও তথ্যের জন্য, নেভিগেশন বার এবং পৃষ্ঠার শিরোনামের জন্য প্রাথমিক রঙগুলি ওভাররাইড করা দেখুন।
• ব্রাউজার উইন্ডোর প্রান্ত পর্যন্ত বিস্তৃত ব্যাকগ্রাউন্ড সহ পৃষ্ঠা উপাদান রয়েছে (পূর্ণ-স্ক্রিন ব্যাকগ্রাউন্ড চিত্র ব্যতীত): প্রতিক্রিয়াশীলতা উন্নত করার জন্য পৃষ্ঠার সামগ্রীর সর্বাধিক প্রস্থ সীমিত করা হয়েছে, যা কাস্টম পৃষ্ঠাগুলির মধ্যে পূর্ববর্তী পূর্ণ-প্রস্থ প্যানেলগুলিকে সীমাবদ্ধ করতে পারে। নতুন সর্বোচ্চ-প্রস্থ সেটিংস ব্যবহার সম্পর্কে আরও তথ্যের জন্য, একটি পোর্টাল পৃষ্ঠায় একটি পূর্ণ-প্রস্থ প্যানেল তৈরি করুন দেখুন।
• টেক্সট স্টাইল পরিবর্তন করার জন্য CSS নির্বাচকদের সাহায্যে নির্দিষ্ট HTML শিরোনাম স্তরগুলিকে লক্ষ্য করা হয়েছে: নির্দিষ্ট কন্টেন্টে প্রয়োগ করা শিরোনাম স্তর পরিবর্তিত হয়েছে। উদাহরণস্বরূপ: <H1> → <H2> কোন কন্টেন্ট প্রভাবিত হচ্ছে তা ঠিক বুঝতে এই রিলিজের জন্য বিস্তারিত পরিবর্তন তালিকা পর্যালোচনা করুন।
• পোর্টাল থিম এডিটরে "সেকেন্ডারি কালার" হিসেবে একটি সাদা বা খুব হালকা রঙ নির্বাচন করা হয়েছে: সাদা ব্যাকগ্রাউন্ডে দেখা কঠিন এমন নেভিগেশন এলিমেন্টের জন্য সেকেন্ডারি কালার ব্যবহার করা হয়। আমরা একটি অ্যাক্সেসযোগ্য সেকেন্ডারি কালার বেছে নেওয়ার এবং প্রয়োজনে নির্দিষ্ট পরিস্থিতিতে কাস্টম scss দিয়ে ওভাররাইড করার পরামর্শ দিচ্ছি।
• ইন-টেক্সট লিঙ্কগুলি স্টাইল করা হয়েছে: লিঙ্কগুলির স্টাইলিং এখন আরও অ্যাক্সেসযোগ্য। আপনার বিদ্যমান স্টাইলিংয়ের সাথে এটি কীভাবে ইন্টারঅ্যাক্ট করতে পারে তা বুঝতে নীচের পরিবর্তনগুলি দেখুন।
• হোম ভিউ কার্ডের কন্টেন্ট এরিয়ার ২ পিক্সেল বর্ডার-বটম সিএসএস ওভাররাইড ব্যবহার করে স্টাইল করা বা লুকানো হয়েছে: এই বর্ডারটি <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> আকারে মোড়ানো হয়েছে
• ব্যবহারকারীর ড্রপ-ডাউন বোতামটি এখন <a> এর পরিবর্তে <button> হবে।

লিঙ্ক স্টাইল পরিবর্তন

<a> টেক্সটের মধ্যে স্ট্যান্ডার্ড লিঙ্কগুলিতে এখন ডিফল্টভাবে একটি আন্ডারলাইন এবং হোভারে একটি ব্যাকগ্রাউন্ড রঙ (থিম সেটিংস "সেকেন্ডারি রঙ" এর উপর ভিত্তি করে) থাকে।

৪০৪টি পৃষ্ঠার পরিবর্তন

৪০৪ পৃষ্ঠার পরিবর্তনগুলি নীচে সংক্ষিপ্ত করা হল।

• "এখনই সাইন ইন করুন" এখন <H2> এর পরিবর্তে <H1>
• ব্যাখ্যার টেক্সট এখন <H2> এর পরিবর্তে <H1> হবে

API পৃষ্ঠা

API পৃষ্ঠায় পরিবর্তনগুলি বিভাগ অনুসারে নীচে সংক্ষিপ্ত করা হয়েছে।

• API অনুসন্ধান/ফিল্টার ইনপুট কার্ড:
  • <mat-card-content class="mat-card-content"> এখন সার্চ API গুলির কার্ড শিরোনাম এবং ইনপুট মোড়ানো হয়
  • <H2> এখন class= class="api-doc-filter-title" এর পরিবর্তে class="mat-subheading-1" ব্যবহার করে।
  • <mat-form-field> এখন appearance="outline" ব্যবহার করে
  • "<mat-icon matPrefix>search</mat-icon>" ইনপুটের আগে <mat-form-field> এ একটি অনুসন্ধান আইকন যোগ করা হয়েছে।
  • ইনপুটে Aria লেবেল এবং নিয়ন্ত্রণ রেফারেন্স যোগ করা হয়েছে
• খালি API তালিকার বার্তা:
  • "কোনও API পাওয়া যায়নি" এখন <H2> এর পরিবর্তে <H1>
  • ব্যাখ্যাটি এখন <H3> এর পরিবর্তে <H2>
• API কার্ডের তালিকা:

  "আপনার অনুসন্ধানের সাথে কোনও API মেলে না" এখন <H2> এর পরিবর্তে <H1>

• API কার্ড:
  • >div class="api-doc-card-content-image-gradient"></div> সরানো হয়েছে
  • <div> ধারণকারী ছবিটি থেকে API শিরোনামটি সরানো হয়েছে এবং <div> ছবির ঠিক পরেই <div class="api-doc-card-content-title"></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 এ পরিবর্তন করা হয়েছে
• সকল বিভাগের শিরোনাম এখন <div> এর পরিবর্তে <H2> হবে।
• .app-layout-section-content ক্লাসের সমস্ত ব্যবহার .details-layout-section-content এ পরিবর্তন করা হয়েছে
• API-এর তালিকা আর টগল সুইচ সহ API কার্ডের তালিকা নয় (API-এর তালিকার অনুরূপ)। পরিবর্তে, এটি API-এর একটি টেবিল।
• কলব্যাক URL ইনপুটটি একটি নতুন বিভাগে সরানো হয়েছে।
• সংরক্ষণ বোতামটি এখন ম্যাট-রাইজড-বোতাম স্টাইল এবং প্রাথমিক রঙের পটভূমি ব্যবহার করে।
• টেবিলগুলি এখন <div> ক্লাস সহ একটি <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"> was added surrounding <table class="team-apps">

স্মার্টডক্স

স্মার্টডক্স ইন্টারফেসের পরিবর্তনগুলি নীচে সংক্ষিপ্ত করা হল।

• পার্শ্ব নেভিগেশন:
  • পার্শ্ব নেভিগেশনটি সম্পূর্ণরূপে কৌণিক-উপাদান উপাদানগুলির সাথে পুনর্লিখন করা হয়েছে।
  • সাইড নেভিগেশন শিরোনাম এখন <div> এর পরিবর্তে <H2> হবে।
  • নেভিগেশন আইটেমগুলি এখন পোর্টাল থিম এডিটর "সেকেন্ডারি কালার" এর পরিবর্তে পোর্টালের ডিফল্ট টেক্সট কালার ব্যবহার করে।
  • সাইড নেভিগেশনে নির্বাচিত, ফোকাসড এবং হোভার করা আইটেমগুলি এখন টেক্সট এবং ব্যাকগ্রাউন্ডের জন্য যথাক্রমে পোর্টাল থিম এডিটরের "সেকেন্ডারি কালার" এর গাঢ় এবং হালকা বৈচিত্র্য ব্যবহার করে।
• কন্টেন্ট:
  • "পাথ প্যারামিটার" এবং "হেডার প্যারামিটার" এর মতো অনেক উপশিরোনাম এখন <H2> এর পরিবর্তে <H3>
  • ওভারভিউ পৃষ্ঠায় স্কিমা সত্তাগুলি এখন <H2> এর পরিবর্তে <H2> <H3>=>

একটি বিদ্যমান হোম পেজে অ্যাক্সেসিবিলিটি উন্নতি যোগ করা হচ্ছে

যদি আপনার একটি বিদ্যমান পোর্টাল থাকে, তাহলে নীচে বর্ণিত ন্যাভিগেবল কার্ডগুলির জন্য নতুন অ্যাক্সেসিবিলিটি উন্নতির সুবিধা নিতে আপনাকে হোম পৃষ্ঠাটি সম্পাদনা করতে হবে:

1. <mat-card> কন্টেইনার থেকে href="" সরান।
2. <mat-card-header> এর মধ্যে কার্ড শিরোনামের জন্য <H1> এর পরিবর্তে <H2> ব্যবহার করুন।
3. Inside the card heading <h2> wrap the text in an <a class="navigable-content" href=" href-name "> and set the href-name to the appropriate value for the card's navigation.

বিকল্পভাবে, আপনি নিম্নলিখিত কার্ড টেমপ্লেটটি ব্যবহার করতে পারেন:

<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 গুলি পরিচালনা করা দেখুন।

বাগ সংশোধন করা হয়েছে

এই রিলিজে নিম্নলিখিত বাগগুলি ঠিক করা হয়েছে। এই তালিকাটি মূলত ব্যবহারকারীদের জন্য যারা তাদের সাপোর্ট টিকিট ঠিক করা হয়েছে কিনা তা পরীক্ষা করার জন্য তৈরি। এটি সমস্ত ব্যবহারকারীদের জন্য বিস্তারিত তথ্য প্রদানের জন্য ডিজাইন করা হয়নি।

জ্ঞাত সমস্যা

ইন্টিগ্রেটেড পোর্টালের জ্ঞাত সমস্যাগুলির তালিকার জন্য, ইন্টিগ্রেটেড পোর্টালের জ্ঞাত সমস্যাগুলি দেখুন।