قائمة التدقيق الشاملة لمطورين واجهات المستخدم تحتوى على عناصر قد تحتاجها او فحصها قبل اطلاق مشروعك / صفحتك.
مرحبَا بكم في الشكل الجديد من الموقع, سيتم اجراء العديد من التغيرات الاخرى قريبا بالاضافة الى اطلاق قائمة اخرى لاحقا. 2019/12/08
قائمة التدقيق الشاملة لمطورين واجهات المستخدم تحتوى على عناصر قد تحتاجها او فحصها قبل اطلاق مشروعك / صفحتك.
جميع العناصر في القائمة يجب أن تستخدم في غالبية المشاريع، لكن بعض العناصر يمكن تجاهلها، مثلا: لا تحتاج إلى تغذية RSS في موقع خاص لإدارة المدارس.
اخترنا وجود ثلاث مراحل من العناصر وأهمية استخدامها:
يعني ان العنصر ينصح إستخدامه لكن يُمكن ان يتم اهماله في بعض الحالات.
يعني ان العنصر ينصح بشدة استخدامه، لكن يُمكن ان يهمل في بعض الحالات الخاصة، ولكن بعض العناصر إذا أُهملت يمكن ان تأثر على الأداء او SEO .
يعني ان العنصر لا يمكن إهماله لأي سبب، اذا تم اهمالة سيتسبب بمشاكل في الصفحة و SEO، أولوية اختبارات الاداء تكون على هذة العناصر اولاً.
نوع المحتوى الذي ستجده في قائمة التدقيق:
: تعريف المتصفح انك تستخدم الاصدار الخامس من لغة HTML, يوضع في اعلى الملف
<!doctype html> <!-- HTML5 -->عنصران البيانات الوصفية القادمه (Charset و Viewport) يجب ان تكونا في بداية عنصر Head
: يجب على ترميز UTF-8 مكتوب بشكل صحيح<!-- تحديد ترميز الاحرف للمستند -->
<meta charset="utf-8"><!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><!-- عنوان المستند -->
<title>عنوان الصفحه</title><!-- الوصف -->
<meta name="description" content="وصف الصفحة لا يتجاوز 150 حرف"><!-- الصيغة الأساسية -->
<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 Touch (على الأقل 200 بكسل طولا وعرضا) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- لتشغيل الموقع في وضع ملء الشاشة -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />اقل ما يكتب في ملف browserconfig.xml :
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig><!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html<html lang="ar"><html dir="rtl"><link rel="alternate" href="https://es.example.com/" hreflang="tr">مشاهدة وانشاء البيانات الوصفية لمواقع التواصل الاجتماعي بشكل تلقائي مع Meta Tags
بالنسبة لفيس بوك وتويتر فهما مهمين, المواقع الاجتماعيه الاخرى يمكن ان تاخذ بعين الأعتبار اذا كنت تستهدف جمهور معين.
: الصورة يجب ان تكون على الأقل 600 في 315 بكسل, وينصح 1200 في 630 بكسل.<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">شكرا لفيس بوك لتوفير كل الادوات والتوثيقات مترجمة الى الغة العربية
<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="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">ملاحظة : استخدام خطوط ويب قد يسبب مشاكل في النص - خذ في عين الاعتبار ان يكون لديك خط احتياطي (اساسي في كل الاجهزة مثل Arial).
اعتبارات فنية يجب ان تاخذها في عين الاعتبارملاحظة : اذا كان لديك شك في خاصية يمكنك زيارة التوثيق
: يجب على التصميم ان يكون متجاوب.لفهم اكثر في عملية تجاوب الصور, اقرا الكتاب الالكتروني Essential Image Optimization من عدي عثماني
<noscript>
يجب عليك تفعيل الجافاسكريبت لأستخدام الموقع
</noscript>if (Modernizr.opacity){
// يدعم
} else {
// لا يدعم
}اعطاء المتصفح تلميح على المحتويات التي سيحتاجها المستخدم للتحميل في الصفحات القادمه.
: اخبار المتصفح بان هناك رابط معلين يجب ان تبحث عن عنوان IP الخاص به, فلن نحتاج الى الانتظار للبحث عن IP عند الحاجه للصفحة.<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="http://css-tricks.com"><link rel="prefetch" href="image.png"><link rel="prerender" href="http://css-tricks.com">يمكنك مشاهدة الدورة التالية A11ycasts مع Rob Dodson
<input type="date">
<!-- مثال : توفير صفحات الترقيم للصفحه الثانية -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">