Persian Translation - Githubissues

Hey there I want to make a Persian translation for the guideline and finished the HTML part, let me know if this can help the project so I can continue working.

راهنمای استفاده از چک لیست Front-End

همه‌ی موارد موجود در چک لیست Front-End برای اکثر پروژه‌ها لازم است، اما برخی از موارد ممکن است حذف یا صرف‌نظر شوند (به عنوان مثال برای یک برنامه مدیریت وب، شاید نیازی به فید RSS نباشد). ما از ۳ سطح انعطاف‌پذیری استفاده می‌کنیم:

سطح کم به این معنی است که این مورد توصیه می‌شود اما ممکن است در برخی موارد خاص حذف شود.
سطح متوسط به این معنی است که این مورد بسیار توصیه می‌شود و ممکن است در موارد بسیار خاصی حذف شود. برخی از موارد اگر حذف شوند، می‌توانند تاثیرات منفی در عملکرد یا بهینه‌سازی موتور جستجو (SEO) داشته باشند.
سطح بالا به این معنی است که این مورد به هیچ دلیلی نباید حذف شود. این موارد ممکن است باعث عملکرد نادرست در صفحه شما، یا مشکلات قابلیت دسترسی یا SEO شوند. برای این موارد، اولویت آزمون باید اولویت بر روی این عناصر باشد.

برخی منابع دارای شمای شکل‌انگیزه برای کمک به درک نوع محتوا یا کمکی که ممکن است در چک لیست بیابید هستند:

📖: مستندات یا مقاله
🛠: ابزار آنلاین / ابزار آزمون
📹: محتوای مدیا یا ویدئو

شما می‌توانید به بهبود و بهتر شدن چک لیست Front-End کمک کنید، فایل CONTRIBUTING.md را بخوانید که همه چیز را درباره پروژه توضیح می‌دهد.

Head (سرتیتر)

Meta tag (برچسب متا)
- Doctype (نوع سند): سند HTML5 است و در بالای همه صفحات HTML شما قرار دارد.
```
<!doctype html> 
```
- Charset (مجموعه نویسه‌ها): مجموعه نویسه‌ها (UTF-8) به درستی تعریف شده است.
```

<meta charset="utf-8">
```
- Viewport (نمای صفحه): نمای صفحه به درستی تعریف شده است.
```

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```
- Title (عنوان): عنوان در همه صفحات استفاده می‌شود (SEO: گوگل عرض پیکسل کاراکترهای استفاده شده در عنوان را محاسبه می‌کند و بین ۴۷۲ تا ۴۸۲ پیکسل قطع می‌کند. میانگین حداکثر تعداد کاراکتر حدود ۵۵ است).
```

<title>عنوان صفحه کمتر از ۵۵ کاراکتر</title>
```
- Description (توضیحات): توضیحات متا ارائه شده است، منحصر به فرد است و بیش از ۱۵۰ کاراکتر ندارد.
```

<meta name="description" content="توضیحات صفحه کمتر از ۱۵۰ کاراکتر">
```
Favicons (آیکون‌های محبوب):
- هر آیکون‌های محبوب به درستی ایجاد شده‌اند و به‌صورت صحیح نمایش داده می‌شوند. اگر فقط یک آیکون‌محبوب (favicon.ico) دارید، آن را در ریشه‌ی سایت خود قرار دهید. عموماً نیازی به استفاده از هر نوع علامت‌گذاری ویژه‌ای نیست. با این حال، استفاده از فرمت PNG امروزه توصیه می‌ش

ود (ابعاد: 32x32 پیکسل).

    <!-- آیکون معمولی -->
    <link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
    <!-- فرمت پیشنهادی برای آیکون محبوب -->
    <link rel="icon" type="image/png" href="https://example.com/favicon.png">

Apple Web App Meta (متا برنامه وبی اپل):

برچسب‌های متا اپل حاضر هستند.

<!-- آیکون لمس اپل (حداقل ۲۰۰x۲۰۰ پیکسل) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- اجرای برنامه وبی در حالت تمام‌صفحه -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- سبک نوار وضعیت (مقادیر موجود برچسب‌های متا پشتیبانی‌شده را بررسی کنید) -->
<!-- تاثیری ندارد مگر این‌که برچسب متا قبلی را داشته باشید -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Windows Tiles (کاشی‌های ویندوز):
- کاشی‌های ویندوز حاضر هستند و پیوند‌شده‌اند.
```

<meta name="msapplication-config" content="browserconfig.xml" />
```

HTML tags (برچسب‌های HTML)

Language attribute (ویژگی زبان): ویژگی lang وبسایت شما مشخص شده و با زبان صفحه فعلی مرتبط است.
```
<html lang="fa">
```
Direction attribute (ویژگی جهت): جهت محتوای صفحه با برچسب html مشخص شده است (می‌تواند در برچسب‌های HTML دیگر استفاده شود).
```
<html dir="rtl">
```
Alternate language (زبان جایگزین): برچسب زبان وبسایت شما مشخص شده و با زبان صفحه فعلی مرتبط است.
```
<link rel="alternate" href="https://es.example.com/" hreflang="es">
```
x-default (پیش‌فرض X): برچسب زبان وبسایت شما برای صفحات فرود بین‌المللی.
```
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
```
Conditional comments (نظرات شرطی): نظرات شرطی برای مرورگر IE حضور دارند.
```

```
RSS feed (فید RSS): اگر پروژه‌ی شما یک وبلاگ یا مقالات دارد، لینک RSS ارائه شده است.
```
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="https://example.com/feed.rss">
```

CSS Critical (کریتیکال CSS)

CSS Critical (یا "بالای برگه"): CSS کریتیکال (یا "بالای برگه") همه CSS استفاده شده برای نمای قسمت قابل‌مشاهده صفحه را جمع‌آوری می‌کند. این به‌صورت قبل از فراخوانی اصلی CSS شما و بین برچسب‌های در یک خط تعبیه می‌شود (به‌صورت فشرده).
```

<style>
    /* قوانین CSS کریتیکال در اینجا قرار می‌گیرند */
</style>
```

Social meta (برچسب‌های اجتماعی)

Facebook Open Graph (OG) (گراف اوپن فیسبوک): همه برچسب‌های اجتماعی فیسبوک (OG) تست شده‌اند و هیچ‌کدام از آنها اطلاعات نادرست ندارند. تصاویر باید حداقل به اندازه‌ی 600x315 پیکسل باشند، با این حال 1200x630 پیکسل توصیه می‌شود.


<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="عنوان محتوا">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="توضیحات محتوا کمتر از ۲۰۰ کاراکتر">
<meta property="og:site_name" content="نام سایت">
<meta property="og:locale" content="fa_IR">
<!-- برچسب‌ه

ای بعدی اختیاری هستند اما توصیه می‌شوند -->

<meta property="og:image:height" content="630">
```

Twitter Card (کارت توئیتر):

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="عنوان محتوا">
<meta name="twitter:description" content="توضیحات محتوا کمتر از ۲۰۰ کاراکتر">
<meta name="twitter:image" content="https://example.com/image.jpg">

HTML (برچسب‌های HTML)

HTML5 Semantic Elements (عناصر HTML5 سمانتیک): عناصر HTML5 سمانتیک به درستی استفاده شده‌اند (سربرگ، بخش، پاورقی و غیره).
Error pages (صفحات خطا): صفحه‌های خطای ۴۰۴ و ۵xx وجود دارند. به‌خاطر داشته باشید که صفحات خطای ۵xx نیاز به یکپارچه‌سازی CSS خود دارند (بدون فراخوانی خارجی در سرور فعلی).
Noopener (بدون ایجاد تب جدید): در صورت استفاده از پیوندهای خارجی با target="_blank"، پیوند شما باید ویژگی rel="noopener" داشته باشد تا از کپی تب جدید جلوگیری کند. اگر نیاز به پشتیبانی از نسخه‌های قدیمی‌تر Firefox دارید، از rel="noopener noreferrer" استفاده کنید.
Clean up comments (پاکسازی نظرات): کد‌های ناخواسته باید قبل از ارسال صفحه به محیط تولید حذف شوند.

آزمون HTML

W3C compliant (دارای استاندارد W3C): تمام صفحات باید با ابزار ولیدیتور W3C آزمایش شوند تا مشکلات ممکن در کد HTML شناسایی شود.
HTML Lint (لینت HTML): از ابزارها برای کمک به تجزیه‌وتحلیل هرگونه مشکل ممکن در کد HTML خود استفاده می‌کنم.
Link checker (بررسی کننده لینک): هیچ لینک خرابی در صفحه من وجود ندارد. اطمینان حاصل کنید که هیچ خطای ۴۰۴ ندارید.
Adblockers test (آزمون ادبلاکر): وبسایت شما با فعال‌سازی ادبلاکر به درستی محتوا را نمایش می‌دهد (می‌توانید پیامی را که افراد را به غیرفعال‌سازی ادبلاکر تشویق می‌کند، ارائه دهید).

Webfonts (فونت‌های وب)

Webfont format (فرمت فونت وب): WOFF، WOFF2 و TTF توسط تمام مرورگرهای مدرن پشتیبانی می‌شوند.
Webfont size (اندازه فونت وب): اندازه‌ی فونت‌های وب بیش از ۲ مگابایت نمی‌شود (تمام نوعها شامل شده).
Webfont loader (بارگذاری‌کننده فونت وب): رفتار بارگذاری را با یک بارگذاری‌کننده فونت وب کنترل کنید.

CSS (استایل‌های CSS)

Responsive Web Design (طراحی واکنش‌گرا به وب): وبسایت از طراحی واکنش‌گرا به وب استفاده می‌کند.
CSS Print (چاپ CSS): یک برگه استایل چاپ ارائه شده و در هر صفحه به‌صورت صحیح است.
Preprocessors (پیش‌پردازنده‌های): پروژه‌ی شما از یک پیش‌پردازنده CSS (مانند Sass، Less، Stylus) استفاده می‌کند.
Unique ID (شناسه منحصربفرد): اگر از شناسه‌ها استفاده می‌کنید، آنها منحصربفرد به یک صفحه هستند.
Reset CSS (بازنشانی استایل‌های CSS): یک CSS reset (بازنشانی، نرمال‌کردن یا ری‌بوت) استفاده شده و به‌روز است. (اگر از یک چارچوب CSS مانند بوت استرپ یا فاندیشن استفاده می‌کنید، یک Normalize به طور خودکار به‌درون آن گنجانده شده است.)
JS prefix (پیشوند JS): همه کلاس‌ها (یا شناسه‌هایی که در فایل‌های JavaScript استفاده می‌شوند) با js- شروع می‌شوند و در فایل‌های CSS استایل نمی‌شوند.

<div id="js-slider" class="my-slider">
<!-- یا -->
<div id="id-used-by-cms" class="js-slider my-slider">

embedded or inline CSS (CSS تعبیه‌شده یا درون خطی): به‌هیچ‌وجه از CSS تعبیه‌شده در تگ‌های

thedaviddias / Front-End-Checklist

Persian Translation #511