Younis Ibrahim

أجرت كل من شركة جوجل وشركة AnswerLab دراسةً بحثيةً للإجابة على هذا السؤال، وهو ما الذي يجعل نسخة الهاتف من الموقع مميزة؟ ينصبّ تركيز مستخدمي الهواتف نحو بلوغ أهدافهم، يتوقع مستخدمو الهواتف أنهم سيحصلون على كل ما يحتاجونه مباشرةً ووفقًا لشروطهم الخاصة. أجريت هذه الدراسة على مشاركين من الولايات المتحدة واستمرت جلسات هذه الدراسة 119 ساعةً ورُوقب الاستخدام الشخصي للمشاركين، خلال الدراسة طُلب من المشاركين القيام بأداء المهام الرئيسية عبر مجموعة من مواقع الهاتف المختلفة، اشتملت الدراسة على مستخدمي الهواتف التي تعمل بنظامي Android و iOS وأجريت هذه الدراسة باستخدام هواتف المشاركين الخاصة، كما طُلب من المستخدمين التعبير عن آرائهم في كل موقع استخدموه أثناء تنفيذهم العمليات المحورية التي تشمل عمليات الشراء والحجوزات. كشفت الدراسة عن خمس وعشرين مبدأً من مبادئ تصميم نسخة الهاتف من الموقع، صُنفت تحت خمسة تصنيفات رئيسية. الصفحة الرئيسية والتنقل في الموقع ساعد مستخدمي موقعك على إيجاد ما يبحثون عنه بسهولة وسرعة واتبع النصائح الآتية. ضع أزرار الإجراءات في منتصف مقدمة الموقع ضع الإجراءات الثانوية في قوائم جانبية أو اجعلها في الجزء غير المرئي من الموقع وهو الجزء الذي لا يمكن رؤيته دون التمرير للأسفل. اجعل جميع مهام المستخدمين الشائعة متاحةً بسهولة. لا تضع مساحة مرئية في بداية الموقع بأزرار عديمة الفائدة مثل زر "المزيد من المعلومات". حافظ على القوائم قصيرة وجميلة لا يملك مستخدمي الهواتف الصبر الكافي للتنقل بين قوائم الخيارات الطويلة للحصول على ما يريدون، لذلك أعد ترتيب القوائم واستخدم أقل عدد ممكن من العناصر بداخلها، دون أن يضر هذا الترتيب بميزة قابلية الاستخدام في الموقع، واجعل القوائم قصيرةً وجميلةً. سهل عملية العودة للصفحة الرئيسية يتوقع مستخدمي الهاتف أنهم سيعودون إلى الصفحة الرئيسية إذا ما نقروا على شعار الموقع، والذي يجب أن يكون في أعلى يسار الشاشة، ويصاب مستخدمي الهاتف بالإحباط عندما تكون هذه العملية غير ممكنة. عليك أن تسهل عملية الرجوع للصفحة الرئيسية. لا تدع العروض الترويجية تستولي على الواجهة تزعج العروض الترويجية التي تغطي الشاشة بالكامل مستخدمي الهواتف، على سبيل المثال الإعلانات التي تطلب من المستخدم تنزيل التطبيق وتحجب محتوى الموقع، إذ تمنع هذه العروض المستخدم من أداء مهامه، كما ينخفض تصنيف المواقع التي تستخدم مثل هذه العروض في نتائج بحث جوجل. سهّل عملية إخفاء العروض الترويجية، ولا تصرف الانتباه عن تجربه المستخدم. لا تستخدم العروض الترويجية التي تغطي الشاشة وتمنع المستخدم من إكمال مهامه. بحث الموقع ساعد مستخدمي الموقع على إيجاد ما يبحثون عنه بسرعة. اجعل مربع البحث مرئيا عادةً ما ينتقل المستخدمين الذين يبحثون عن المعلومات الى استخدام أداة البحث التي بالموقع، لذلك يجب أن يكون مربع البحث من أولى الأشياء التي تظهر بالموقع ويجب عدم إخفائه داخل قائمة جانبية. اجعل مربع البحث مرئي للمستخدم. ولا تضف مربع البحث في القوائم الجانبية المخفاة. تأكد من نتائج البحث في الموقع لتكون ذات صلة لا يتنقل المستخدمين خلال صفحات نتائج البحث للعثور على ما يبحثون عنه، لذلك سهل الأمر عليهم واقترح إكمال جملة البحث بالجمل ذات الصلة ودقق كلمات البحث التي يدخلونها تلقائيًا، وبدلًا من بناء أداة بحث خاصة بالموقع استخدم خدمة جوجل للبحث المخصص وأضفها لموقعك. اقتبس الفكرة المستعملة في متجر Macy's فعند ادخال كلمة kid في أداة البحث الخاصة بالموقع يقترح الموقع كل الأشياء المتعلقة بالأطفال. لا تعرض كل النتائج التي تحتوي على كلمة "kid". أضف مرشحات البحث لتضييق نطاق النتائج اعتمد المشاركين في الدراسة على المرشحات لتضييق نطاق نتائج البحث، وتجاهل المشاركين تلك المواقع التي لا تحتوي على فلاتر بحث فعالة، لذلك أضف مرشحات (فلاتر) البحث أعلى نتائج البحث مباشرةً ولمساعدة المستخدمين ضع عدد النتائج التي ستظهر عند تطبيق أي مرشح. باختصار، سّهل عملية استخدام المرشحات. لا تخفي المرشحات، واجعل الوصول إليها سهلًا. أرشد المستخدم ليحصل على أفضل نتائج بحث في الموقع قدم بعض الأسئلة في المواقع التي يزورها شرائح متنوعة من المستخدمين ليجيبوا عليها قبل الوصول لمرحلة استخدام مربع البحث، واستخدم الإجابات التي يقدمونها لترشيح المحتوى وتقديم أفضل النتائج الخاصة بهذه الشريحة من المستخدمين. ساعد مستخدمي الموقع على الحصول على الأشياء التي يبحثون عنها من خلال إرشادهم للاتجاه الصحيح. التنقل في المتجر ومدى أهميته ادرس جيدًا رحلة المستخدم في الموقع ودع المستخدم يتنقل وفقًا لحاجته. دع المستخدم يستكشف الموقع قبل مطالبته بالتسجيل أُحبط المشاركين في الدراسة من المواقع التي تطلب من المستخدم أن يكون مسجلًا لتعرض محتواها، وينطبق هذا بشكل خاص على المتاجر غير المشهورة، بغض النظر عن أن بيانات التسجيل الخاصة بالمستخدمين هي حجر أساس ليستطيع الموقع تقديم الخدمات اللازمة إلا أن طلبها مبكرًا يزيد من احتمالية نفور المستخدمين وتقليل عدد المسجلين بالموقع. اسمح للمستخدم بتصفح محتوى الموقع دون تسجيل. لا تضبط صفحات التسجيل لتظهر مع بداية تصفح المستخدم. اسمح للمستخدمين بالشراء وهم ضيوف يرى المشاركين في الدراسة أن الدفع بوضع ضيوف (دون إنشاء حساب) عمليةً سهلةً ومريحةً وبسيطةً وسريعةً في نفس الوقت، إذ ينزعج المشاركين من المواقع التي تتطلب التسجيل لإتمام عملية الشراء، خصوصًا في المواقف التي يكون فيها إنشاء الحساب دون فائدة تذكر. اسمح للمستخدمين بالشراء باستخدام حساب ضيف. استخدم المعلومات المتوفرة لتحقيق أكبر قدر من الراحة للمستخدمين فعل الملء التلقائي لتفضيلات المستخدمين المسجلين في الموقع، وبالنسبة للمستخدمين الجدد اعمل على توفير خدمات الدفع الشائعة والتي تتبع للطرف الثالث بصفته وسيطًا. فعل أزرار خاصية الاتصال للمهام المعقدة تتمتع الهواتف بإمكانية إجراء الاتصالات الهاتفية لذا تتيح أزرار انقر للاتصال للمستخدمين إمكانية إجراء الاتصال بنقرة واحدة فوق ارتباط الاتصال، وفي غالب الأجهزة تظهر للمستخدم رسالة تأكيد للموافقة على الاتصال الهاتفي أو في بعضها تظهر قائمةً من الخيارات التي يمكن إجراؤها على الرقم. سهل عملية إكمال المهمة من جهاز آخر يرغب المستخدمون في بعض الأحيان في إنهاء مهامهم من جهاز آخر، على سبيل المثال قد يرغبون بالانتقال لجهاز ذي شاشة أكبر لمعاينة المنتجات بصورة أفضل أو ربما بسبب انشغالهم حاليًا يرغبون في الإكمال في وقت آخر، اعمل على دعم رحلة العملاء هذه من خلال إتاحة عملية مشاركة المحتوى مع الشبكات الاجتماعية أو من خلال منح المستخدمين إمكانية إرسال المحتوى إلى بريدهم الإلكتروني من خلال الموقع. سهّل عملية التصفح أو الشراء من جهاز آخر. مدخلات النموذج اعمل على توفير تجربة انتقال سلسة ومرنة باستخدام نماذج سهلة الاستخدام باتباع النصائح الآتية. اعمل على جعل عملية إدخال البيانات سهلة اجعل موقعك ينتقل إلى حقل الإدخال التالي تلقائيًا بمجرد انتهاء المستخدم من إدخال بيانات الحقل الحالي، بشكل عام كلما قل عدد النقرات المطلوبة من المستخدم كانت تجربة الموقع أفضل. اختر أبسط آليات الإدخال اختر نوع الإدخال الأنسب لكل سيناريو من سيناريوهات الإدخال، على سبيل المثال استخدم العناصر مثل "datalist" لعرض القيم المقترحة لحقل الإدخال. وفر تقويما مرئيا لحقول اختيار التاريخ أضف تسميةً واضحةً لحقلي تاريخ البدء وتاريخ الانتهاء، إذ يجب ألا يضطر المستخدم عند تحديد التواريخ للخروج من الموقع ليطلع على تطبيق التقويم في هاتفه. استخدم أدوات التقويم عندما تكون متاحةً. قلل نسبة الخطأ في النماذج من خلال توضيح التسميات والتحقق الفوري تأكد من تسمية الحقول تسميةً صحيحةً وتحقق من إدخالات المستخدم فورًا. سمِّ حقول الإدخال تسميةً واضحةً. صمم نماذج فعالة استغل ميزة الملء التلقائي لتسهيل ملئ النماذج على المستخدمين من خلال ملئها ببياناتهم الموجودة مسبقًا، على سبيل المثال عند الحصول على عنوان الشحن وعنوان إرسال الفواتير مكن خاصية الملء التلقائي للعنوان المتبقي منهم فإذا كان قد أدخل عنوان الشحن فانسخ عنوان الشحن تلقائيًا في عنوان الفواتير، أو اسمح للمستخدم بنسخ عنوان الشحن في عنوان الفواتير أو العكس. راعي سهولة الاستخدام والعامل البصري سهل استخدام موقعك بالانتباه إلى التفاصيل الصغيرة التي تدعم تجربة المستخدم واتبع النصائح الآتية. حسن الموقع بالكامل ليتلاءم مع الجوال استخدم تصميمًا متجاوبًا يعمل على تعديل نفسه وفقًا لحجم وقدرات جهاز المستخدم، حيث وجد المشاركين في الدراسة أن المواقع محسنةً جزئيًا مع الجوال أي أن بعض الصفحات حسنت وأصبحت متوافق مع الجوال وبقي بعضها الآخر بنسخة الحاسوب، إذ التعامل مع المواقع التي تعمل بنسخة الحاسوب فقط أكثر صعوبة. لا تجعل المستخدم مضطرا للتصغير أو التكبير يشعر المستخدمون بالراحة عندما يمررون عموديًا في الموقع أما التمرير الأفقي فغير مقبول، لذا تجنب استخدام العناصر الكبيرة أو العناصر ذات الحجم الثابت، استخدم تنسيقات CSS وفقًا لمختلف أحجام شاشة المستخدم، ولا تُنشئ محتوى لا يمكن عرضه بصورة صحيحة إلا عند حجم معين، لأن المواقع التي تجبر المستخدم على قلب الشاشة والتمرير أفقيًا تفشل في اختبارات التوافق مع الجوال من جوجل ما يعني أن الموقع لن يظهر في نتائج بحث جوجل المتقدمة. اجعل صور المنتجات قابلة للتكبير يتوقع المستخدمون الذين يشترون بالتجزئة من المواقع أن توفر لهم صورًا توضح طبيعة المنتج عن قرب وعالية الجودة للمنتجات، شعر المشاركين في الدراسة بالإحباط من المواقع التي لم توفر لهم صور المنتجات التي يشترونها. اجعل صور المنتجات سهلة التكبير ويسهل رؤية تفاصيلها. أرشد المستخدمين لآلية الاستخدام الصحيح مال المشاركين في الدراسة إلى إكمال التصفح بنفس اتجاه الشاشة الحالي إلى أن يتطلب الأمر تغيير الاتجاه، لذلك اجعل التصميم متوافقًا مع الاتجاه العمودي والأفقي أو شجع المستخدمين للانتقال إلى الاتجاه الأمثل، وتأكد من أن أزرار "الدعوة لإجراء call to action" تعمل حتى في حالة رفض المستخدم للاقتراح الذي يطلب تغيير اتجاه العرض على الشاشة. أخبر المستخدم بالاتجاه الأمثل للعرض. اجعل عمل المستخدم في نافذة متصفح واحدة يواجه المستخدمون مشاكلًا في التنقل من نافذة لأخرى وقد لا يستطيعون العودة للموقع إذا ما خرجوا منه، تجنب أزرار "الدعوة لإجراء call to action" التي تعمل على فتح نافذة جديدة، حدد أي الطرق التي تتسبب في خروج مستخدم موقعك لموقع آخر واعمل على توفيرها داخل الموقع لإبقاء المستخدمين بداخله، على سبيل المثال إذا وفرّت قسائمًا لمتجرك فاعمل على عرضها مباشرةً بداخل موقعك بدلًا من إجبار المستخدمين على الخروج من الموقع للبحث عن القسائم. تجنب استخدام مصطلحات مبهمة عندما رأى المشاركون بالدراسة خيار "الموقع كاملًا" ويعنى به هنا نسخة الحاسوب من الموقع ظنوا أن نسخة الجوال من الموقع غير مكتملة واختاروا "الموقع كاملًا" حتى عند تصفحهم من الجوال وتحولوا آنذاك إلى نسخة الحاسوب من الموقع والتي لا تعرض عرضًا صحيحًا على الشاشات الصغيرة. حدد بوضوح الهدف من طلب الموقع الجغرافي للمستخدم يجب أن يكون مستخدم الموقع على علم دائم بأسباب طلب موقعه الجغرافي، حيث شعر المشاركون في الدراسة بالارتباك عندما حاولوا حجز فندق في مدينة أخرى فعرض موقع الحجوزات فنادقًا في نفس المنطقة الموجودين بها هم حاليًا بدلاً من الفنادق في المدينة التي اختاروها، لذا اترك حقل الموقع الجغرافي فارغًا واسمح للمستخدمين بملئه من خلال إظهار زر" إيجاد القريبة مني". دائمًا بطلب الموقع الجغرافي بناءً على طلب المستخدم. وتجنب طلب الوصول إلى موقع المستخدم مباشرةً بمجرد الدخول للصفحة الرئيسية لأن هذا يتسبب بتجربة مستخدم سيئة. ترجمة وبتصرف للمقال ?What Makes a Good Mobile Site من موقع developers.google. اقرأ أيضًا تجربة المستخدم للهواتف المحمولة وتوقعات المستخدمين كيفية التأكد من جودة عرض مدونتك على شاشات الهواتف المحمولة

تعمل المتصفحات الحديثة على تسهيل عملية تخصيص بعض مكونات موقعك من المتصفح مثل الرموز والأيقونات وتخصيص لون شريط العنوان، ويمكن لهذه التعديلات البسيطة أن تزيد ارتباط المستخدمين بموقعك وتحثهم على العودة مرةً أخرى. توفير أيقونات رائعة عندما يزور المستخدم موقعك، يعمل المتصفح على جلب الأيقونات من ملف HTML، إذ تظهر الأيقونة في أماكن متعددةً مثلًا تظهر في علامة التبويب وفي قسم المواقع التي زرتها مؤخرًا والكثير من الأماكن الأخرى. من الأشياء التي تميز الموقع وتسهل مهمة العثور عليه عند البحث عنه هو وجود صورة فريدة وذات جودة عالية. للتأكد من توافق موقعك مع كل المتصفحات، سيتوجب عليك إضافة بعض الوسوم في داخل العنصر <head> الموجود في كل صفحة من صفحات الموقع. <!-- icon in the highest resolution we need it for --> <link rel="icon" sizes="192x192" href="icon.png"> <!-- reuse same icon for Safari --> <link rel="apple-touch-icon" href="ios-icon.png"> <!-- multiple icons for IE --> <meta name="msapplication-square310x310logo" content="icon_largetile.png"> متصفحي كروم وأوبرا يستخدم كل من متصفحي كروم وأوبرا أيقونات بامتداد png، والتي تتمدد للحجم المطلوب حسب كل موقع ولمنع التمدد التلقائي يمكنك إضافة أحجام أخرى من خلال خاصية sizes. ملاحظة: يجب أن تكون أحجام الأيقونات من مضاعفات الحجم 48px على سبيل المثال 48px، أو 96px، أو 144px، أو 192px. متصفح سفاري يستخدم متصفح سفاري الوسم <link> مع الخاصية rel والتي قيمتها apple-touch-icon للإشارة إلى أيقونة الشاشة الرئيسية. <link rel="apple-touch-icon" href="touch-icon-iphone.png"> تعد الأيقونات مربعة الشكل شفافة اللون ذات الحجم 180px أو 192px والامتداد png مثاليةً للاستخدام مع apple-touch-icon. لا ينصح بتضمين الموقع أحجامًا متعددةً من الصور لدعم مواقع متعددة، كان متصفح سفاري الخاص بنظام iOS يأخذ في السابق بعين الاعتبار الكلمة المفتاحية precomposed- والتي تستعمل لمنع إضافة التأثيرات البصرية لكن لم يعد لها حاجة بعد الإصدار السابع من iOS. متصفح انترنت اكسبلورر ونظام التشغيل ويندوز فون تجربة الشاشة الرئيسية الجديدة في نظام ويندوز 8 يدعم أربع مخططات مختلفة للمواقع المثبتة وتتطلب أربعة أيقونات، يمكنك حذف الوسوم الخاصة بأحجام معينة إذا ما أردت إيقاف الدعم عنها. <meta name="msapplication-square70x70logo" content="icon_smalltile.png"> <meta name="msapplication-square150x150logo" content="icon_mediumtile.png"> <meta name="msapplication-wide310x150logo" content="icon_widetile.png"> عناصر ألوان المتصفح يمكنك باستخدام أنواع مختلفة من عنصر meta تخصيص المتصفح وحتى عناصر أخرى من النظام الأساسي، ضع في اعتبارك أن بعض هذه التخصيصات ستعمل على متصفحات وأنظمة تشغيل دون غيرها، لكن هذه التحسينات ستعمل على تحسين تجربة المستخدم بشكل كبير. تتيح المتصفحات (Coast و Chrome و Firefox OS و Safari و Internet Explorer و Opera) للمستخدم تخصيص ألوان عناصر المتصفح وحتى عناصر من النظام الأساسي باستخدام الوسم meta. تخصيص ألوان القالب في متصفحي أوبرا وكروم لضبط ألوان القالب الخاص بمتصفح كروم في نظام التشغيل أندرويد استخدم عنصر meta الخاص بألوان القالب. <!-- Chrome, Firefox OS and Opera --> <meta name="theme-color" content="#4285f4"> تخصيص تنسيق متصفح سفاري يسمح متصفح سفاري بتنسيق شريط الحالة وتخصيص صورة بدء التشغيل. تحديد صورة بدء التشغيل يعرض متصفح سفاري افتراضيًا شاشةً فارغةً أثناء وقت التحميل وبعد عدة تحميلات للموقع يعرض لقطة شاشة لآخر حالة في التطبيق، من الممكن منع هذا من خلال إجبار متصفح سفاري على عرض صورة بدء تشغيل بشكل صريح، من خلال إضافة وسم link مع الخاصية rel=apple-touch-startup-image انظر للمثال التالي: <link rel="apple-touch-startup-image" href="icon.png"> يجب أن تكون الصورة بحجم محدد يلائم شاشة الجهاز المستهدف وإلا فلن يستخدمها، للحصول على مزيد من التفاصيل راجع العنوان التالي Safari Web Content Guidelines. على الرغم من ندرة التوثيقات المقدمة من شركة آبل لهذا الموضوع، إلا أن مجتمع المطورين توصل إلى طريقة يستطيع من خلالها دعم الأجهزة المختلفة وذلك باستخدام media queries لتحديد الجهاز من ثم تحديد الصورة المناسبة له، يمكنك الاطلاع على هذا المثال لتتضح الصورة أكثر tfausak's gist. تغيير مظهر شريط الحالة يمكنك تغيير المظهر الافتراضي لشريط الحالة إلى الأسود black أو الأسود نصف شفاف black-translucent، شريط الحالة عائم فوق المحتوى الكلي في الشاشة بدلًا من سحبه لأسفل، هذا يمنح التطبيق المزيد من الارتفاع لكنه يعيق الجزء العلوي، إليك الشيفرة اللازمة: <meta name="apple-mobile-web-app-status-bar-style" content="black"> لقطة شاشة للون الأسود نصف شفاف لقطة شاشة للون الأسود ترجمة وبتصرف للمقال Icons & Browser Colors developers.google من موقع developers.google. اقرأ أيضًا أفضل 12 أداة انتقاء للألوان لمصممي الويب

تعد بنية هيكل التطبيق App Shell هي إحدى الطرق المستعملة لبناء تطبيقات الويب التقدمية Progressive Web App -تختصر إلى PWA- والتي تعمل بكفاءة وسرعة على شاشات المستخدمين، تمامًا مثل تلك التطبيقات التي بنيت بلغات نظام التشغيل الأصيلة native application. يتكون هيكل التطبيق app shell من الحد الأدنى من شفرات HTML و CSS و JavaScript اللازمة لعرض واجهة التطبيق وهيكله الأساسي، وتضمن هذه المكونات عند تخزينها في الذاكرة عمل التطبيق في وضع عدم الاتصال بالإنترنت، وتعمل على ضمان كفاءة عمل التطبيق وقدرته على استقبال الزيارات المتكررة من المستخدم في وضع عدم الاتصال، وهذا يعني أن تركيبة هيكل التطبيق لا تحتاج للتحميل في كل مرة يستخدم المستخدم التطبيق فيها بل تبقى مخزنةً في الذاكرة والذي يتم تحميله هو المحتوى الضروري فقط. يعد هيكل التطبيق هو تطوير على تطبيقات الويب أحادية الصفحة single-page applications التي يتم تشغيلها باستخدام أكواد كبيرة من جافاسكربت، ويعتمد هيكل التطبيق على تخزين هيكل التطبيق الأساسي في الذاكرة المؤقتة باستخدام عامل الخدمة service worker ليشغل التطبيق، ثم بعد ذلك نحصل على المحتوى الخاص بكل صفحة في التطبيق باستخدام جافاسكربت، ويتلخص الهدف الأساسي من استخدام التطبيقات الهيكلية في الحصول على بنية "HTM" الأساسية الخاصة بالتطبيق. بمعنى آخر هيكل التطبيق هو مشابه لحد كبير للحزم البرمجية التي تُنشَر في متجر التطبيقات عند بناء تطبيق أصيل، وهو يشكل البنية الأساسية لواجهة التطبيق وبعض محتويات التطبيق المهمة لتشغيله، لكنه قد لا يحتوي على بيانات أخرى. متى يستخدم نموذج هيكل التطبيق بناء تطبيقات الويب التقدمية لا يعني أنه يجب بناء التطبيق من الصفر، وإذا كنت تبني أحد تطبيقات الويب أحادية الصفحة فمن الممكن أنك تستخدم شيئًا مشابهًا لمفهوم هيكل التطبيق سواءً دعوته بهذا الاسم أم لا، قد يكون هناك اختلاف في بعض التفاصيل تبعًا لنوع المكتبات وأطر العمل التي تستخدمها لكن المفهوم في حد ذاته محايد لا ينتمي لأي إطار أو لغة. تعد بنية هيكل التطبيق هي الأكثر ملاءمةً لبناء التطبيقات والمواقع ذات آلية الاستخدام الثابتة ولكن محتواها متغير، هناك عدد من أطر العمل والمكتبات في جافا سكريبت تشجع على فصل البنية العامة للتطبيق عن المحتوى المتغير، استعمال هذه البينية تمنح التطبيق شكلًا ثابتَا وأكثر وضوحًا، بالنسبة لمواقع الويب ذات المحتوى الثابت، يمكنها أن تبقى تستعمل نفس النموذج ولكن في النهاية التطبيق مخزن بالكامل في وضع عدم الاتصال أي أن هيكل التطبيق مع المحتوى قد خُزِّن في الذاكرة. لتتعرف على كيفية بناء جوجل لهيكل التطبيق ألق نظرةً على تطبيق الويب التقدمي I/O 2016 الذي بنته جوجل حيث كانت بداية هذا التطبيق الواقعي من خلال عملية بناء تطبيق ويب أحادي الصفحة SPA يهدف إلى إنشاء تطبيق ويب تقدمي والذي يستعمل عامل خدمة والذي يعمل بدوره على إضافة المحتوى ديناميكًا وتمكين تغيير المحتوى المعروض على الشاشة بسلاسة ودعم إمكانية إعادة استخدام المحتوى بعد تحميله لأول مرة. مزايا استعمال نموذج هيكل التطبيق استخدام هيكل التطبيق مع عامل الخدمة سيوفر هذه المزايا: أداء موثوق وسرعة كبيرة: تتوفر سرعةً كبيرةً مع الزيارات المتكررة حيث يتم تخزين واجهة المستخدم والمكونات الثابتة مثل الصور وشيفرات كلًا من Html و CSS و JavaScript في الذاكرة عند الزيارة الأولى لذلك يتم تحميلها بسرعة كبيرة عند تكرر الزيارات، ومن الممكن تخزين بيانات محتوى التطبيق عند الزيارة الأولى ولكن الأصل في ذلك هو أن يتم تحميلها عند الحاجة فقط. محتوى تفاعلي مثل الذي بالتطبيقات الأصيلة: يمكن الحصول على تجربة تفاعلية وتنقل سلس بين مكونات التطبيق من خلال الاعتماد على هيكل التطبيق مثل تلك التي بالتطبيقات الأصيلة، مع بقائها تدعم العمل في وضع عدم الاتصال. الاقتصاد في استخدام البيانات: تم تصميم هذا النوع من التطبيقات ليعمل على توفير أكبر قدر من البيانات، ويجب أن يتم اختيار البيانات التي سنحتفظ بها مؤقتًا بحكمة لأن تنزيل بيانات لا فائدة منها مثل الصور الكبيرة التي لا تستخدم في كل صفحة يتسبب في زيادة البيانات المستخدمة من المتصفح، إذ تكلفة الاتصال بالإنترنت في الدول الغربية رخيصةً نسبيًا على عكس الدول النامية التي ترتفع فيها التكلفة. بنية هيكل التطبيق يجب أن تكون مثاليةً وتوفر: تحميل سريع. استخدام أقل قدر ممكن من البيانات. استخدام المكونات الثابتة المخزنة في الذاكرة المحلية. أن يعمل على فصل المحتوى عن التنقل. يحصل على محتوى صفحة مخصص ويعرضه، قد يكون هذا المحتوى ملف HTML أو JSON. تخزين المحتوى الديناميكي ولكن يبقى هذا قرارًا اختياريًا. يعمل هيكل التطبيق على الاحتفاظ بواجهة التطبيق مخزنةً محليًا والحصول على المحتوى الديناميكي من الواجهة البرمجية API، ولكن مع الاحتفاظ بميزة سهولة الاستكشاف وترابط المحتوى في صفحات الويب، فسيجد المستخدم في كل مرة يدخل فيها للتطبيق أحدث إصدار منه دون الحاجة لتنزيل الإصدار الجديد ليسمح ذلك للمستخدم ببدء استخدام التطبيق. ملاحظة: يمكن استخدام أداة التدقيق Lighthouse للتحقق من أن تطبيق الويب التقدمي يستخدم هيكل تطبيق يحقق أفضل أداء ممكن، ويمكنك الرجوع إلى مقال دليلك إلى استعمال الأداة Lighthouse لمزيد من التفصيل حولها. كيفية بناء هيكل تطبيق قم ببناء تطبيقك وتأكد أنه يفصل بوضوح بين هيكل الصفحة والمحتوى الديناميكي، يجب أن يحمل التطبيق بشكل عام أبسط شكل للهيكل ولكن يجب أن يكون هذا القدر من البيانات الذي حملناه مع هيكل التطبيق يجب أن يحتوي على بيانات ذات معنى، ويجب أن توازن بدقة بين السرعة وحداثة المحتوى في التطبيق من مصادر المحتوى المختلفة. أفضل الأمثلة على تطبيقات الويب التقدمية والتي استخدمت في تطويرها نموذج هيكل التطبيق هو تطبيق ويكيبيديا في وضع عدم الاتصال والذي بناه جيك أرشيبالد، والذي يتميز بسرعة تحميله مع الزيارات المتكررة، ولكنه يطلب البيانات ديناميكيًا باستخدام الجافا سكريبت، حيث يتم تخزين هذا المحتوى للوصول إليه في الزيارات التالية في حالة وضع عدم الاتصال. مثال لهيكل تطبيق فصل المثال التالي الذي سنعرضه البنية الأساسية وواجهة التطبيق عن البيانات التي تشكل محتوى التطبيق، إذ من المهم الحفاظ على بساطة محتوى التحميل الأولى قدر الإمكان ليعمل على عرض التخطيط الأساسي أو الشكل العام للصفحة بمجرد بدء تشغيل التطبيق، فنبدأ عند بدء عرض واجهة المستخدم بتجميع الملفات المكونة لها، وتكون بعض هذه الملفات موجودة في نفس مجلد التطبيق وبعضها يتم استيرادها من مصادر خارجية. تُخزَّن البنية الأساسية وواجهة التطبيق في الذاكرة المحلية باستخدام عامل خدمة service worker، لذا سيحمل التطبيق فقط المكونات الجديدة أو التي حصل عليها تغيير في التحميلات القادمة بدلًا من تحميل كل شيء. يجب أن يكون ملف index.html في ملفات تطبيقك مشابهًا للشيفرة التالية، وتشكل الشيفرة التالية جزءًا من مكونات الملف الأصلي، لذا دعنا نلقي نظرةً على ما يحتويه الملف: شيفرات HTML و CSS والتي تشكل الواجهة والبنية الأساسية للتطبيق، وكامل آليات التنقل بين مكونات التطبيق، والمكان المخصص للمحتويات التي ستعرض داخل التطبيق. ملف جافا سكريبت الخارجي app.js والذي من مهامه إدارة آليات التنقل في واجهة التطبيق، ويعمل على معالجة البيانات القادمة من الخادم من خلال إدارة عمليات العرض والتخزين من خلال تخزين البيانات محليًا باستخدام إحدى آليات التخزين مثل IndexedDB. ملف "web app manifest" ومحمل عامل الخدمة service worker لتمكين خدمات التطبيق في وضع عدم الاتصال، فيوفر ملف web app manifest بيانات عن تطبيق الويب التقدمي بصيغة JSON، والتي يحتاجها المتصفح لمعرفة كيفية التصرف مع التطبيق عند تثبيته على الحواسيب أو الهواتف المحمولة الخاصة بالمستخدمين. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>App Shell</title> <link rel="manifest" href="/manifest.json"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="styles/inline.css"> </head> <body> <header class="header"> <h1 class="header__title">App Shell</h1> </header> <nav class="nav"> ... </nav> <main class="main"> ... </main> <div class="dialog-container"> ... </div> <div class="loader"> <!-- Show a spinner or placeholders for content --> </div> <script src="app.js" async></script> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); } </script> </body> </html> تخزين هيكل التطبيق يمكن تخزين هيكل التطبيق باستخدام عامل خدمة service worker مكتوب يدويًا أو باستخدام إحدى الأدوات الثابتة التي توفر إنشاء عامل خدمة مثل أداة sw-precache (أصبحت أداة قديمة ومؤرشفة). ملاحظة: جهزت الأمثلة من أجل توفير معلومات عامة وتوضيح الأهداف فقط، قد تختلف الموارد الفعلية المستخدمة في الواقع عن التي سيستخدمها تطبيقك. تخزين هيكل التطبيق يدويا يوضح المثال بالأسفل شيفرة عامل خدمة يعمل على تخزين المكونات الثابتة لهيكل التطبيق في باستعمال الواجهة Cache API الخاصة بعملية التخزين وذلك باستخدام الحدث install. var cacheName = 'shell-content'; var filesToCache = [ '/css/styles.css', '/js/scripts.js', '/images/logo.svg', '/offline.html', '/', ]; self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); }); تخزين هيكل التطبيق باستخدام sw-precache سيعمل عامل الخدمة الذي تم إنشاؤه باستخدام "sw-precache" على معالجة التخزين المؤقت ومعالجة الموارد التي تضبطها لتكون جزءًا من عملية إنشاء تطبيقك، يمكنك أن تجعله يخزن مؤقتًا كلًا من ملفات HTML و CSS و JavaScript والتي تعمل على تشكيل البنية الخاصة بهيكل تطبيقك، وبهذا سيعمل تطبيقك في وضع عدم الاتصال وسيوفر سرعةً كبيرةً في حالات الزيارات المتكررة للتطبيق. يوضح المثال التالي استخدام "sw-precache" بصفته جزءًا من شيفرة "gulp" المسؤولة عن عملية البناء. gulp.task('generate-service-worker', function(callback) { var path = require('path'); var swPrecache = require('sw-precache'); var rootDir = 'app'; swPrecache.write(path.join(rootDir, 'service-worker.js'), { staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'], stripPrefix: rootDir }, callback); }); ملاحظة: تكمن فائدة عامل خدمة التخزين المسبق sw-precache في التخزين المؤقت لموارد تطبيقك الثابتة في وضع عدم الاتصال، أما خلال تشغيل البرنامج والتعامل مع الموارد الديناميكية في التطبيق فمن المفضل استعمال المكتبة المتكاملة sw-toolbox. الخلاصة يعد هيكل التطبيق الذي يستخدم عامل الخدمة service worker مزيجًا رائعًا يعمل على إنتاج أفضل التطبيقات التي تستخدم التخزين المؤقت لتعمل في وضع عدم الاتصال، ولكن هذا ليس هو المكسب الوحيد من هيكل التطبيق وعامل الخدمة فهي توفر أفضل أداء يمكن الحصول عليه من خلال التحميل الفوري للمحتوى خلال زيارات المستخدم المتكررة لتطبيق الويب المتقدم PWA، ويمكنك من خلال هيكل التطبيق أن تخزن بيانات هيكل التطبيق محليًا ثم جلب المحتوى الذي يتغير دائمًا باستخدام الجافاسكربت. سوف يمنحك اعتماد نموذج هيكل التطبيق app shell مع تكرار الزيارات إليه محتوى مرئي ذا معنى دون أن تضطر للاتصال بالشبكة في البداية، بغض النظر إن كان محتوى التطبيق يُجلب من الشبكة بعدها أم لا. ترجمة وبتصرف للمقال The App Shell Model developers.google من موقع developers.google. اقرأ أيضًا ميزات تطبيق الويب التقدمي PWA نماذج اقتراحات تثبيت تطبيقات الويب التقدمية PWA توفير تجربة تثبيت مخصصة داخل تطبيق الويب التقدمي PWA جعل تطبيق الويب التقدمي PWA يبدو كتطبيق أساسي في نظام التشغيل

سنتطرق في هذا المقال إلى تعريف الخطوط القابلة للتغيير، وما هي المميزات التي تقدمها هذه الخطوط، وكيف يمكننا استخدام هذه الخطوط في الجانب العملي من تطوير الويب. في البداية دعنا نستعرض كيفية عمل هذه الخطوط وتمثيلها في الويب وما الابتكارات التي جلبتها هذه الخطوط لعالم الويب. التوافق مع المتصفحات ابتداءً من شهر مايو من العام 2020 بدء دعم الخطوط القابلة للتغيير في معظم المتصفحات، يمكنك التأكد من توافق متصفحك معها من موقع can i use variable-fonts. مقدمة يستخدم المطورون غالبًا المصطلح font والمصطلح typeface بالتناوب، مع ذلك هناك اختلاف بين هذين المصطلحين، فالمصطلح typeface يعني شكل الحرف أو الرسم الذي يُمثل به الحرف، وهو الجزء المرئي منه؛ أما font، فهو أحد تطبيقات typeface، وهو مخزن بتنسيق رقمي. بمعنى آخر، التنسيق typeface هو ما تراه؛ أما font، فهو ما تستخدمه. هناك مفهومين آخرين يغفل البعض دائمًا عن التمييز بينهما، وهما التنسيق style وعائلة الخط family، فالتنسيق هو خاصية واحدة مفردة من typeface، أما العائلة فهي مجموعة كاملة من التنسيقات. قبل ظهور الخطوط القابلة للتغيير كان لكل تنسيق من الخطوط ملف خاص، أما بعد ظهور الخطوط المتغيرة، فقد أصبحت هناك إمكانية لجمع كل التنسيقات في ملف واحد. تحديات أمام المصممين والمطورين عندما يشرع المصمم بتصميم مطبوعات ورقية، سيواجه العديد من القيود أبرزها الحجم الفعلي للورقة التي سيطبع عليها وعدد الألوان التي بإمكانه استخدامها ويتوقف هذا القيد على نوع الطباعة التي يستخدمها. وهناك العديد من القيود الأخرى، لكن مع كل هذه القيود، لا زال بإمكان المصمم استخدام أنسب الخطوط دون أي قيود على ذلك، وهو ما سيسمح له بإضافة لمسة جمالية لمشروعه من خلال استخدام نوع الخط الذي يحب، وهو الأمر الذي سيعمل على تحسين جودة المطبوعات، وهذا يعني أن تجربة القراءة ستكون مريحةً وممتعةً، فكر في آخر مرة أمسكت بها مجلةً ممتازةً واستمتعت بتصفحها. يواجه مصممي ومطوري الويب قيودًا مختلفةً عن تلك التي يواجهها مصممو المطبوعات، وأهم هذه القيود هي الزيادة في تكلفة بيانات الإنترنت التي تستهلكها التصميمات على الويب، وقد كان هذا هو أكبر العوائق أمام الحصول على تصميمات خطيه وغنية بالتفاصيل في عالم الويب، في خطوط الويب التقليدية يحتاج المستخدم لتنزيل ملف خاص لكل تنسيق من تنسيقات الخط، ويعمل هذا على تأخير ظهور الصفحة أمام مستخدمي الموقع، إذا ما أردت استخدام الخط الغامق والخط العادي إضافةً للخط المائل في لكل منهما سيصل حجم ملفات هذه التنسيقات الى 500 كيلوبايت أو أكثر من البيانات الواجب تنزيلها لتشغيل الموقع، وذلك دون الأخذ بالحسبان الوقت اللازم لعرض الخطوط في الموقع، والحلول البديلة عند فشل عملية الحصول على الخطوط، والتأثيرات الجانبية التي لا نرغب بحصولها مثل FOIT و FOUT. توفر العديد من عائلات الخطوط مجموعةً كبيرةً جدًا من التنسيقات، فهناك تنسيق الخط الرفيع والخط الغامق والخط ذو العرض الواسع والضيق وتشكيلة كبيرة ومتنوعة من التنسيقات الأخرى، وحتى أحجام الخطوط الخاصة التي صُمّمت لتتلاءم مع أحجام كبيرة أو صغيرة من النصوص، ونظرًا لأن كل تنسيق أو مزيج من التنسيقات يحتاج ملفًا خاصًا لنستطيع استخدامه، يتجنب مطورو الويب استخدام إمكانيات الخطوط هذه، وهو ما يترتب عنه تجربة قراءة سيئة. تركيبة الخطوط المتغيرة عملت الخطوط المتغيرة في التغلب على عدد من التحديات السابقة، وذلك من خلال جمع التنسيقات في ملف واحد. يبدأ هذا من خلال تحديد تنسيق افتراضي للخط، وهو هنا الخط العادي ويكون مستقيم دون ميول وبالحجم والعرض الأكثر استخدامًا في النصوص العادية، ثم يربط هذا التنسيق بتنسيقات أخرى في نفس المجال ويسمى المحور. أكثر المحاور شهرةً هو محور الوزن وهو المحور الذي يمكنه ربط التنسيق العادي بالتنسيق الغامق bold. يمكننا الحصول على أي تنسيق فردي من خلال المحور، ويسمى هذا التنسيق الفردي بعد تحديد مكان له على المحور بالكائن، حيث بعض هذه الكائنات تم تسميتها باسم مطور الخط، على سبيل المثال الموقع 600 على محور الوزن تم تسميته بـ SemiBold. يمتلك الخط المتغير Roboto Flex ثلاث تنسيقات رئيسية على محور الوزن، إذ يقع التنسيق العادي في منتصف المحور، ويقع التنسيقين الآخرين على الطرفين، أحدهما التنسيق الخفيف أو الفاتح lighter، والآخر هو الثقيل أو الغامق heavier، يمكن الاختيار من بين 900 كائن يمثلون التنسيقات الثلاثة. يمكن لمطوري الخطوط توفير العديد من المحاور المختلفة، كما يمكن أيضًا جمع هذه المحاور مع بعضها البعض في ملف واحد، وذلك لأنهم في النهاية يتشاركون نفس التنسيق الافتراضي. يمتلك الخط Roboto ثلاث تنسيقات على محور العرض، إذ يتواجد بالمنتصف التنسيق العادي، وعلى أحد الجوانب التنسيق الضيق، وعلى الجانب الآخر التنسيق الواسع، وهو ما سيوفر لنا جميع درجات تنسيق العرض مُشْتَقّةً من التنسيق الافتراضي، ويمكن دمج محور الوزن مع محور العرض لنحصل على تنسيقات النصوص بأي عرض، وأي وزن مطلوب. يعني هذا أننا بتنا نمتلك الآلاف من التنسيقات في ملف واحد، قد يكون الرقم مبالغًا به لكن من خلال هذا الكم من التنسيقات التي يمكننا الحصول عليها يمكننا تحسين تجربة القراءة بشكل ملحوظ، ودون تأثير هذا الكم من التنسيقات على الأداء أو حتى على تكلفة البيانات، أصبح بإمكان مطوري الويب استخدام التنسيقات التي يرونها مناسبةً حسب حاجة التصميم بغض النظر عن كثرة التنسيقات المطلوبة أو قلتها. الخط المائل Italics تتعامل الخطوط القابلة للتغيير مع تنسيق الخط المائل بآلية مثيرة للاهتمام، فهي تتعامل بأسلوبين مختلفين، الأول مع أنواع الخطوط التي تشبه Helvetica or Roboto، وهي أنواع تمتلك خطوط انحناء تدعم اشتقاق تنسيق الخط المائل منها، لذلك يمكن الحصول على الخط العادي (والمسمى بالروماني) من هذه الخطوط، ويمكن الانتقال من الروماني للمائل باستخدام محور الميلان Slant axis؛ أما النوع الثاني من الخطوط مثل Garamond, Baskerville, or Bodoni، فهي خطوط تمتلك رسمًا خاصًا بالحرف بتنسيقه المائل، وآخر للخط الروماني القائم، ولا يمكن الحصول على تنسيق الخط المائل من الخط الروماني القائم، على سبيل المثال: خط الانحناء الخاص برسم حرف n الصغير بالخط الروماني القائم لا يتوافق مع خط الانحناء الخاص بالحرف n المائل، لذلك بدلًا من استخدام خط انحناء الرسم القائم للانتقال للرسم المائل، سنستخدم محور الميلان Slant axis للانتقال من خط انحناء تنسيق الخط الروماني القائم إلى خط انحناء تنسيق الخط المائل. بعد التبديل الى التنسيق المائل، يجب بقاء المحاور المتاحة للمستخدم في التنسيق الروماني متاحةً له في التنسيق المائل، وبالطبع بقاء الحروف كما هي عند الانتقال بين التنسيق الروماني والتنسيق المائل. تُعد إحدى أهم الإمكانيات التي توفرها الخطوط المتغيرة هي تغيير رسم الحرف لأحد نظائره في حالات خاصة، ويمكن استخدام هذه النظائر بأي مكان في مساحة التصميم الخاصة بالخطوط القابلة للتغيير. على سبيل المثال، يُعَد رمز الدولار بخطين عموديين هو الخيار الأفضل في التصميمات ذات المساحات الكبيرة، ولكن يكون الخيار الأفضل في مساحات التصميم الصغيرة لرسم رمز الدولار هو استخدام خط واحد عمودي، فعندما تكون البكسلات المتاحة لتمثيل الحرف قليلةً، يكون استخدام رمز الدولار بخطين عموديين ممنوعًا، ولمعالجة هذا القيد المشابه للقيد في الخط المائل، سنستخدم آلية استبدال الحرف بأحد نظائره ويمكن أن يتم هذا الاستبدال بناءً على محور الحجم البصري Optical Size، كما يمكن حصول هذا الاستبدال عند أي نقطة منه يحددها المصمم. باختصار، عندما تسمح خطوط الانحناء بذلك، سييكون من الممكن لمصممي الخطوط إنشاء خطوط يمكنها استمداد تنسيقات أخرى غير التنسيقات الافتراضية في أبعاد مساحة التصميم، بحيث تمنح هذه المزايا المصمم إمكانية التحكم في كيفية الطباعة. تعريفات المحاور توجد خمسة محاورًا أساسيةً معتمدةً يمكنها التحكم في كل سمات الخطوط التي نعرفها، وهذه المحاور هي: محور العرض width، ومحور الوزن أو الحجم weight، ومحور الحجم البصري optical- size، والمحور slant، والمحور italics؛ وبالإضافة إلى هذه المحاور الأساسية، يمكن لمصمم الخطوط إنشاء المحاور التي يحتاجها ليتحكم بكل جانب من جوانب تصميم الخط، مثل حجم أطراف الحروف وطول الحواف وارتفاع الحرف وحجم النقطة الموجودة فوق حرف i. تتحكم المحاور في نفس الميزات، لكنها على الرغم من ذلك يمكنها استخدام قيم مختلفة للتحكم من نوع خط لآخر، ففي الخطين المتغيرين Hepta Slab وOswald، هناك محور وحيد هو محور الوزن، لكن كلًا من هذين الخطين يمتلك نطاق قيم خاص به، فقد بفي الخط Oswald على نفس نطاق القيم التي كان يمتلكها قبل انتقاله ليصبح خطًا متغيرًا، أما الخط Hepta Slab فتبدأ قيمته من 1 وتصل إلى 900. المحاور الخمسة الأساسية لديها أسماء مختصرة مكونة من أربع أحرف صغيرة، وتستخدم هذه الأسماء المختصرة لضبط قيم المحاور في أكواد الـ CSS. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } اسم المحور قيمة المحور في css Weight wght Width wdth Slant slnt Optical Size opsz Italics ital ولأن المطول يحدد المحاور التي يمتلكها الخط والقيم التي تقبلها الخطوط، فيجب أن توفر توثيقات الخطوط هذه المعلومات اللازمة، أو يمكن تفحص خصائص الخط باستخدام أداة مناسبة مثل أداة Wakamai Fondue. الفوائد وحالات الاستخدام يعتمد تعيين قيم المحاور على الذوق الشخصي في التنسيق وعلى تطبيق قواعد أفضل الممارسات best practices عند استخدام الخطوط، ويكمن الخطر في استخدام أي تقنية جديدة في إساءة استخدامها، إذ سيؤدي إساءة استخدام هذه المميزات والزخارف وخصائص الخطوط الأخرى إلى تشويه تجربة القراءة وتقليل وضوح النص. من الممكن استخدام خصائص المحاور لاستخدامها في إنشاء تصميمات رائعة بالنسبة للعناوين؛ أما بالنسبة للنص في الجسم، فيمكن أن يشكل استخدام هذه الخصائص خطرًا على إمكانية قراءة النص. تعبير مدهش يظهر واحد من الأمثلة الرائعة على التعابير الفنية بالأعلى، وهو أحد نتائج استكشاف خصائص الخط Decovar من قبل Mandy Michael. الرسوم المتحركة تتيح الخطوط المتغيرة استخدام الحروف الرسومية المتحركة، حيث يمثل المثال بالأعلى استخدام محاور التنسيق مع نوع الخط Zycon. يُعَد Anicons هو أول خط يختص بالرموز المتحركة والملونة في نفس الوقت يعتمد على أيقونات الـ Material Design، كما أنه يُعَد تجربةً مميزةً جمعت بين تقنيتين من تقنيات الخطوط، وهما تقنية الخطوط المتغيرة وتقنية الخطوط الملونة. خفة ومهارة يوفر الخطان Roboto Flex وAmstelvar مجموعةً من المحاور البارمترية، والتي تتيح تمرير القيم إليها، يُفصل بين الحروف في هذه المحاور بناءً على أربع سمات أساسية، وهي الأشكال السوداء أو الموجبة، والأشكال البيضاء أو السالبة، والبعد x، والبعد y؛ إذ تُستخدَم هذه السمات الثلاثة بنفس طريقة مزج الألوان الأساسية للحصول على الألوان الثانوية، كما يمكن مزج هذه السمات الأربع لضبط أي محور آخر. يسمح المحور XTRA في الخط Amstelvar بتغيير قيمة البارامتر white لكل مليمتر كما يظهر بالأعلى. وقد حصل التأثير الذي بالأعلى من خلال تغيير البارامتر الأبيض في محور XTRA، وذلك بإضافة قيم صغيرة على محور XTRA في الاتجاه المعاكس، وفي نفس الوقت تملك الكلمتان نفس العرض. الخطوط المتغيرة في css تحميل ملفات الخطوط المتغيرة تحمّل الخطوط المتغيرة في صفحات الويب باستخدام نفس الطريقة المستعملة لتحميل الخطوط التقليدية، وذلك باستخدام font-face@، مع وجود تحسينين جديدين: @font-face { font-family: 'Roboto Flex'; src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'), url('RobotoFlex-VF.woff2') format('woff2-variations'); font-weight: 100 1000; font-stretch: 25% 151%; } تنسيق الملف source format: نحن لا نريد من المتصفح تنزيل الخط إذا كان لا يدعم الخطوط المتغيرة، لذلك نضيف التنسيق المطلوب في format، إذ يكون الوصف الأول خاصًا بالتنسيق المستقبلي للخطوط، وهو woff2 supports variations؛ أما في الوصف الثاني format، فنضيف الوصف woff2-variations، وهو خاص بالتنسيق الحالي للخطوط والذي سينتهي قريبًا، إذا كان المتصفح يدعم الخطوط المتغيرة ويدعم التنسيق المستقبلي لملف الخطوط، فسيستخدم التعريف الأول؛ أما إذا كان يدعم الخطوط المتغير والتنسيق الحالي لملف الخطوط، فكلا التنسيقين يشيران إلى نفس ملف الخط. نطاق القيم التي تقبلها التنسيقات: سوف تلاحظ عند النظر لكود تحميل ملف الخط المتغير أننا أضفنا قيمتين للخط، إذ أن القيمة الأولى هي وزن الخط، والثانية هي لتمدد الخط. وبدلًا من تعريف القيم التي يقبلها الخط لخاصية الحجم على سبيل المثال ;font-weight:500، سنخبر المتصفح أن الملف يدعم القيم التي تقع ضمن هذا النطاق على سبيل المثال: font-weight: 100 1000; يسمح الخط Roboto Flex باستخدام القيم من 100 إلى 1000 على محور الحجم، وتعين لغة css قيم المحور مباشرةً لخاصية font-weight، وذلك من خلال تحديد النطاق المسموح به في font-face@، أي أن أيّ قيمة تخرج عن النطاق المسموح به تضبط قيمتها لأقرب قيمة صالحة، وتعين قيم محور العرض إلى خاصية التمدد font-stretch بنفس الطريقة التي استخدمناها بالأعلى لتعيين قيم محور الوزن أو الحجم لخاصية حجم الخط font-weight؛ أما في حال استخدام خطوط جوجل، فستهتم جوجل بكل شيء ليس تنسيق المصدر وتحديد النطاقات المناسبة فقط، ولكن ستتولى جوجل إرسال خطوط بديلة أيضًا في حالة عدم دعم المتصفح للخطوط المتغيرة. استخدام الأوزان والعرض تُعد المحاور التي يمكن تعيين قيمها في الوقت الحالي من خلال خصائصًا في CSS هي محور الوزن أو الحجم wght، ويمكن تعيين قيمته في css من خلال خاصية font-weight ومحور العرض wdth، وتُعين قيمته في css من خلال خاصية font-stretch. يمكن تعيين قيم الخاصية font-weight بالكلمات المفتاحية مثل light وbold أو باستخدام قيم عددية من 100 إلى 900، ويمكن استخدام الأرقام ضمن هذا النطاق بإضافة أو بإنقاص 100، ومن الممكن من خلال الخطوط المتغيرة استخدام أي قيمة تقع ضمن مجال الأرقام التي يقبلها الخط. .kinda-light { font-weight: 125; } .super-heavy { font-weight: 1000; } ويمكن تعيين قيمة الخاصية font-stretch بنفس الآلية بالكلمات المفتاحية، مثل condensed وultra-expanded أو من خلال القيم المئوية. .kinda-narrow { font-stretch: 33.3%; } .super-wide { font-stretch: 151%; } استخدام محور الإمالة slnt ومحور الخطوط المائلة ital يختص المحورital بالخطوط التي تحتوي على التنسيق العادي regular style والتنسيق المائل italic style، وبهذا تتلخص وظيفة المحور في الانتقال من تنسيق لآخر، أي أنه يعمل مثل مفتاح التشغيل، فالقيمة صفر تعني أن التنسيق عادي، والقيمة واحد تعني أن التنسيق مائل. على عكس المحاور الأخرى لا يمكن التنقل على طول المحور إما صفر أو واحد فقط. على سبيل المثال، القيمة 0.5 لن تمنحك نصف إمالة. يختص المحور slnt بإمالة الحروف، ويختلف عن المحور ital في أن إمالته للحرف ليست تنسيقًا جديدًا، بل هو فقط عملية إمالة للتنسيق العادي regular style، القيمة الافتراضية للخط العادي هي صفر، والتي تعني هنا أن الخط قائم ومعتدل الشكل. يوفر الخط Roboto Flex إمكانية الإمالة، وأقصى قيمة إمالة يوفرها، هي -10 درجات، وهذا يعني أن الحروف ستبدأ بالميلان الى اليمين عند الانتقال من 0 الى -10. سيكون من البديهي تعيين قيم هذه المحاور من خلال خاصية تنسيق الخطوط في css، ولكن حتى هذه اللحظة من شهر أبريل (نيسان) من عام 2020 لا يزال العمل قائمًا على كيفية استخدام هذه المحاور، وضبط قيمها من خلال خصائص css، وإلى حل هذه المشكلة، سيتوجب علينا التعامل مع هذه المحاور بنفس طريقة التعامل مع المحاور الخاصة، إذ يتوجب تعيين قيمها من خلال الخاصية font-variation-settings. i, em,.italic { /* Should be font-style: italic; */ font-variation-settings: 'ital' 1; } .slanted { /* Should be font-style: oblique 10deg; */ font-variation-settings: 'slnt' 10; } استخدام محور الحجم البصري يمكن تمثيل رسم الحرف بحجم صغير جدًا 12px أو بحجم كبير جدًا 80px، إذ يستطيع الخط الامتثال لهذه التغييرات على حجمه، من خلال تعديل رسم الحرف ليحقق أفضل توافق مع الحجم الجديد. من الأفضل أن يبقى رسم الأحجام الصغيرة بسيطًا دون تفاصيل دقيقة فيها؛ أما الأحجام الكبيرة، فتناسبها التفاصيل واللمسات الفنية الواضحة لأن حجمها يسمح لها بذلك. أُنشئت خاصية جديدة لتمثيل هذا المحور هي font-optical-sizing، حيث القيمة الافتراضية لهذه الخاصية هي auto. تعمل هذه القيمة على ترك مهمة تحديد الحجم البصري للمتصفح، ويعين المتصفح قيمة هذا المحور وفقًا لحجم الخط font-size، ما يعني أن المتصفح سيختار أفضل قيمة تلقائيًا، لكن إذا أردت إيقاف هذه الخاصية font-optical-sizing، فيمكنك تعديل القيمة auto لتصبح none؛ وإذا أردت منع الحجم البصري من العمل بالتوافق مع حجم الخط، فيمكنك ضبط قيمة المحورopsz يدويًا. يعمل كود css التالي على تعيين حجم الخط ليكون كبيرًا جدًا، ولكن بحجم بصري صغير كما لو كان بحجم 8px. .small-yet-large { font-size: 100px; font-variation-settings: 'opsz' 8; } استخدام المحاور الخاصة على عكس المحاور الأساسية المعتمدة، لا تُسند المحاور الخاصة لخصائص في لغة التنسيق css، بل تُستعمل من خلال خاصية font-variation-settings. تكون اختصارات أسماء المحاور الخاصة بالحروف الكبيرة، لتُميَّز عن المحاور الأساسية. يوفر الخط Roboto Flex عددًا من المحاور الخاصة، ولعل أهمها هو محور التدرج GRAD. يعمل محور التدرج على تغيير حجم الخط دون التأثير على عرض الخط، لذلك لن يتغير شكل بنية الجملة، ففواصل الأسطر ستبقى كما هي. ومن خلال التعديل على محور التدرج، سيمكنك التغلب على المشاكل الحاصلة بسبب التعديل على حجم الخط، والتي يترتب عليها تغيير في عرض الخط، وكذا التعديلات على محور العرض التي ستؤثر على الحجم الكلي. لأن محور التدرج هو محور خاص وله نطاق قيم محدد من 1 الى -1، سنحتاج الى استخدام خاصية font-variation-settings لتمثيل قيمته. .grade-light { font-variation-settings: `GRAD` -1; } .grade-normal { font-variation-settings: `GRAD` 0; } .grade-heavy { font-variation-settings: `GRAD` 1; } الخطوط المتغيرة في موقع جوجل للخطوط عملت جوجل على توسيع أرشيف الخطوط لديها ليشمل الخطوط المتغيرة، وتعمل الشركة باستمرار لإضافة خطوط متغيرة، الواجهة الحالية للموقع تتيح للزوار انتقاء أحد كائنات الخط: تختار في البداية التنسيق الذي تريده، ثم انقر على اختيار هذا التنسيق، وسيُضاف إضافته مباشرةً لوسم <link>، والذي من خلاله نجلب ملف الخط وأكواد CSS الخاصة به من موقع خطوط جوجل. من أجل استخدام كل المحاور المتاحة وكل القيم المسموحة في خطوط جوجل، يجب عليك الاتصال يدويًا بـ API خطوط جوجل، حيث يعطي نظرةً عامةً حول الخطوط في جوجل ويسرد بيانات المحاور والقيم الخاصة بها. وتوفر الأداة Google Variable Fonts Links أحدث روابط الخطوط المتغيرة. توريث إعدادات الخاصية Font-variation-settings إلى أن يأتي الوقت الذي ستُدعَم فيه جميع المحاور بخصائص في css، ستحتاج في الوقت الحالي إلى الاعتماد على الخاصية font-variation-settings، وإذا كان الخط يدعم المحاور الخاصة، فستحتاج إلى استخدام الخاصية font-variation-settings. مع ذلك، تحتوي الخاصية font-variation-settings على بعض العيوب، ومن بين هذه العيوب، نجد أن أي محور لم تُعيَن قيمته سيضبط على القيم الافتراضية؛ أما المحاور التي عُيّنت قيمها سابقًا، فلا تورّث، وهذا يعني أن الخاصية عند إعادة استخدامها لن تعمل كما هو متوقع منها : <span class="slanted grade-light"> I should be slanted and have a light grade </span> سينفذ المتصفح في البداية الشيفرة التالية: `font-variation-settings: 'slnt' 10` من كلاس `slanted` بعد ذلك سينفذ الشيفرة التالية: `font-variation-settings: 'GRAD' -1` من كلاس `grade-light` لكن بعد تنفيذ هذه الشيفرة، سيتم ضبط خاصية slnt على الوضع الافتراضي، وستكون نتيجة تنفيذ التعليمات التي بالأعلى نصًا بتدرج خفيف، ولكن دون ميلان. لحسن الحظ، يمكننا التغلب على هذه المشكلة باستخدام المتغيرات في css: /* Set the default values */ :root { --slnt: 0; --GRAD: 0; } /* Change value for these elements and their children */ .slanted { --slnt: 10; } .grade-light { --grad: -1; } .grade-normal { --grad: 0; } .grade-heavy { --grad: 1; } /* Apply whatever value is kept in the CSS variables */ .slanted, .grade-light, .grade-normal, .grade-heavy { font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD); } ستعمَّم قيم متغيرات الـ CSS، وهذا يعني أنه إذا عيّن العنصر أو والده قيمة slnt على 10، فسيحتفظ بهذه القيمة حتى وإن عُينت أي قيمة لـ GRAD. @keyframes width-animation { from { --wdth: 25; } to { --wdth: 151; } } ستُرسل قيم محور العرض الخاص بشيفرة الرسوم المتحركة مباشرةً إلى الخاصية font-variation-settings. ثمار استخدام هذه الخطوط على الأداء تسمح لنا خطوط OpenType بتخزين أشكال مختلفة من نفس العائلة في ملف خط واحد. لقد أجرت خطوط Monotype تجربةً دمجت من خلالها 12 رسمًا للحروف، وهناك لكل رسم ثمانية أوزان مختلفة لكل وزن ثلاث قيم في محور العرض، إذ تحتوي على الرسمين الروماني القائم والإيطالي المائل، لينتج عن هذه التجربة تخزين ثمانية وأربعين خطًا مختلفًا في ملف واحد، وهو ما يعني جمع ثماني وأربعين ملف خط في ملف واحد، بالتالي، فباستخدامنا للخطوط المتغيرة، نكون قد وفرنا 88% من حجم الملفات الـ 48. ومع ذلك إذا كان استخدامك ينحصر على خط واحد -على سبيل المثال خط Roboto Regular فقط- ولا تستخدم أي خط آخر، فإنك لن تشعر بفارق في حجم الملف إلا إذا كنت تريد استخدام خط متغير يحتوي على العديد من المحاور كما هو الحال في العديد من المواقف، ولكن هذا في النهاية يعتمد على الحالة التي ستستخدم فيها الخط. في الجهة المقابلة، سيتسبب تحريك الخط كما في الرسوم المتحركة بمشاكل في الأداء على الرغم من أن هذه المشاكل ستُحل بمجرد اكتمال دعم الخطوط المتغيرة في المتصفحات. يمكن تقليل تبعات هذا الاستخدام من خلال تحريك النصوص التي تظهر في الوقت الحالي فقط، وإيقاف النصوص التي لم يصل إليها المستخدم بعد، هذه الشيفرة مقتطفة من موقع Dinamo، إذ تعمل هذه الشيفرة على إيقاف الرسوم المتحركة مؤقتًا في العناصر التي لا تُعرَض حاليًا على الشاشة من خلال إضافة الصف vf-animation: var observer = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { // Pause/Play the animation if (entry.isIntersecting) entry.target.style.animationPlayState = "running" else entry.target.style.animationPlayState = "paused" }); }); var variableTexts = document.querySelectorAll(".vf-animation"); variableTexts.forEach(function(el) { observer.observe(el); }); إذا كانت تأثيرات الخط تعمل بناءً على تفاعل من المستخدم، فستكون فكرةً رائعةً أن نوقف مفعول أحداث الإدخال أو تقييدها، سيعمل هذا على منع المتصفحات من عرض كائنات الخطوط المتغيرة التي تغيرت بشكل بسيط عن الكائنات السابقة والعين البشرية لن تلاحظ فرقًا يذكر. إذا كنت تستخدم خطوط جوجل، فمن الجيد إنشاء اتصال مسبق بالعنوان https://fonts.gstatic.com، والذي تتواجد به خطوط جوجل، وذلك لإعلام المتصفح مسبقًا بمكان تخزين الخطوط لتسريع عملية الحصول عليها عند استدعائها في CSS. <link rel="preconnect" href="https://fonts.gstatic.com" /> تصلح هذه الإرشادات مع شبكات توفير المحتوى CDNS الأخرى، وكلما سمحت للمتصفح بإنشاء الاتصال مبكرًا، كانت عملية جلب الخطوط أسرع. يمكن أن تجد المزيد من نصائح تحسين الأداء عند جلب خطوط جوجل هنا. الإجراءات الاحتياطية ودعم المتصفحات تدعم كل المتصفحات الحديثة الخطوط المتغيرة، في الحالات التي تريد فيها دعم الخطوط في المتصفحات القديمة. يمكنك استخدام الخطوط الثابتة لبناء موقعك ومن ثم إضافة تحسينات الخط تدريجيًا. /* Set up Roboto for old browsers, only regular + bold */ @font-face { font-family: Roboto; src: url('Roboto-Regular.woff2'); font-weight: normal; } @font-face { font-family: Roboto; src: url('Roboto-Bold.woff2'); font-weight: bold; } body { font-family: Roboto; } .super-bold { font-weight: bold; } /* Set up Roboto for modern browsers, all weights */ @supports (font-variation-settings: normal) { @font-face { font-family: 'Roboto'; src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'), url('RobotoFlex-VF.woff2') format('woff2-variations'); font-weight: 100 1000; font-stretch: 25% 151%; } .super-bold { font-weight: 1000; } } عند إضافة الصف super-bold في المتصفحات القديمة إلى عنصر، فإن التنسيق الذي سيطبق على العنصر هو التنسيق الغامق العادي لأن هذا هو المتوفر حاليًا، بعد دعم الخطوط المتغيرة سنستطيع فعليًا استخدام أغمق تنسيق ممكن، وهو 1000. <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet"> يمكن للمتصفحات الحديثة التي يمكنها التعامل مع الخطوط المتغيرة استخدام الخطوط بسهولة وتستطيع استخدام كل قيم الأوزان التي يمكن استخدامها بين 200 الى 700؛ أما في المتصفحات القديمة، فسنضطر إلى تحميل ستة ملفات ملف للوزن 200 وآخر للوزن 300 وعلى هذا المنوال. ترجمة وبتصرف للمقال Introduction to variable fonts on the web web.dev من موقع web.dev. اقرأ أيضًا مدخل إلى عالم الخُطوط كيفية استضافة خطوطك الخاصة على الويب Symbol Fonts: تعرف على خطوط الأيقونات، استعمالاتها، ما لها وما عليها

تقدم هذه المقالة خطوات عملية يمكنها مساعدة الفرقاء والمنتجات والشركات الكبيرة والشركات الناشئة على تطوير أفضل تجربة مستخدم لعملائهم، ويمكنك استخدام أي خطوة من خطوات خطة العمل منفصلةً، لكنها ستقدم لك أفضل نتيجة فقط إذا اتبعت الخطوات بتسلسل. أُنشئ هذا الدليل من خلال الاستعانة بمنهجية Design Sprint المستخدمة داخل فرق شركة جوجل في استكشاف الأخطاء وحلها كما هو الحال في مشروع Project Loon ومشروع Self Driving Car. المعين المزدوج تعتمد خطة سير العمل أساسًا على ما يطلق عليه في دوائر تجربة المستخدم بالمعين المزدوج، وقد اشتهر هذا المعين من خلال المجلس البريطاني للتصميم، حيث يعتمد على تفريق أعضاء الفريق ليفهم كل فرد في الفريق الفكرة من خلال البحث، ثم يجتمع أعضاء الفريق مرةً أخرى لتجميع التحديات والمشكلات التي واجهوها، ثم يتفرقون مرةً أخرى ليضع كل منهم التصميم المبدئي للحلول، ومن ثم يجتمعون لتبادل الأفكار وتحديد أفضل حل لاختباره والتحقق من صحته. تشتمل عملية التصميم من خلال نموذج (المعين المزدوج) الذي طوره المجلس البريطاني للتصميم على خطوات نموذج عملية التصميم على هذه المراحل: في البداية الفهم ومن ثم التحديد، ثم التفرق، يليها التقرير، بعد ذلك النموذج الأولي، بعدها التحقق من فعالية النموذج الأولي. التحضير للبدء سنبدأ أولًا بالإلمام بالتحدي الموجود وصياغته على شكل مقترح. اسأل نفسك عما هي المشكلة التي تحاول إيجاد حل لها؟ ثم وصف التحدي، وهو الموجز الذي تصف من خلاله التحدي الخاص بالمشروع، والذي يتضمن الأهداف التي تريد الوصول إليها. قد يكون هذا التحدي خاصًا بتحسين إحدى ميزات منتج موجود فعليًا، أو حتى منتج جديد بغض النظر عن المهمة التي تحاول إنجازها. اضبط اللغة ببساطة لتلائم الأهداف التي تطمح لتحقيقها، وهنا يجب تركيز جملة الوصف على الأهداف التي يطمح فريقك للوصول إليها والتركيز على الجمهور وأن تكون مختصرةً وملهمةً. هذه بعض النماذج الحقيقية لمنتجات عملت عليها في الماضي: تصميم نظام لإدارة عملية معالجة ورعاية مرضى اعوجاج القدم. تصميم نظام لتبسيط الأنظمة المالية المعقدة وتبسيطها إلى الأساسيات فقط. تصميم تطبيق هاتف متوافق مع أنظمة تشغيل الهواتف المختلفة يحمل العلامة التجارية للشركة. تحديث وصف التحدي الخاص بك بمجرد تعديل العديد من تفاصيل الهدف اعرضها على فريقك وتوافَق معهم، فربما تكون هناك حاجة لتحديد موعد نهائي للعمل، وهذا سيساعد الفريق على التركيز في حل المشكلة، لذا مع هذه التعديلات الإضافية ستصبح القائمة أعلاه هكذا: تصميم نظام لإدارة عملية معالجة ورعاية الأطفال تحت سن الثانية، والمصابين باعوجاج في القدم ليكون جاهزًا للإطلاق في الربع الأول من العام. إنشاء تطبيق مالي بسيط يساعد على إجراء عمليات بيع وشراء الأسهم بنقرة زر واحدة دون الحاجة لوجود معرفة مسبقة بالعالم المالي، ليكون جاهزًا للإطلاق في شهر يوليو من عام 2017. نفّذ تصميمًا إرشاديًا يكون مرنًا ويعمل مع جميع منصات تشغيل الهواتف، يرتقي بمكانة العلامة التجارية للشركة في المنصات. ثبت وصف المشكلة أو التحدي بعد الانتهاء منه بمكان بارز في مكان العمل لأنك ستضطر لمراجعته دائمًا وربما التعديل عليه طوال فترة العمل على المشروع. التعرف على المشكلة تُعَد الخطوة التالية في عملية التصميم هي البحث عن المعلومات حول التحدي الذي نواجهه والتعرف على المشكلة، حيث سنحتاج إلى التعرف على ما إذا كان فهم فريقك للمشكلة صحيحًا أم لا، وسننظر إلى المشكلة غالبًا من وجهة نظرنا الشخصية، وهذا يشكل خطرًا لأن معظمنا يَعُد من في المجال التقني مستخدمين محترفين ونحن نشكل نسبةً قليلةً من المستخدمين، ولهذا فصوتنا هنا يمثل الأقلية، وقد نغتر بأنفسنا فنرى بعض الأشياء على أنها مشاكل وهي ليست كذلك. هناك العديد من الأدوات التي يمكن استخدامها لجمع المعلومات للتأكد من صحة البيانات التي لدينا حول التحدي، حيث تعتمد كل واحدة من هذه الأدوات على فريقك وعلى إمكانية الوصول إلى المستخدمين، والهدف هو الحصول على أفضل فهم للمشكلة في متناول اليد. المقابلات الداخلية مع أصحاب المنفعة إجراء المقابلات مع أصحاب المنفعة قد يكون مفيدًا للحصول على الرؤية العامة للفريق أو الشركة. تتضمن عملية إجراء المقابلات إجراء مقابلات مع كل عضو من أعضاء الفريق في الشركة وكل أصحاب المنفعة في الشركة من المسوقين وحتى المحاسبين، إذ سيساعدك هذا على معرفة الشيء الذي يعتقدون أنه التحدي الحقيقي وما الحلول المحتملة لهذه التحديات. عندما نتحدث عن الحلول، فنحن لا نقصد الحلول التقنية، بل ما هو السيناريو الأفضل الذي تتحقق من خلاله أهداف الشركة في النهاية، ففي التحديات السابقة على سبيل المثال، نجد أن "امتلاك نظام طبي لمرضى اعوجاج القدم يغطي 80% من المرافق الطبية قبل نهاية العام" سيكون هدفًا رائعًا نسعى لتحقيقه. هناك تحذير يجب أخذه بالحسبان، وهو أن هذه الطريقة في التحقق هي الأقل تفضيلًا لأنها تمنع أعضاء النقاش والتعاون بين أعضاء الفريق، وقد تخلق جوًا من العزلة داخل المؤسسة، ولكنها تبقى طريقةً جيدةً في النهاية للحصول على المعلومات حول العملاء وتحديات التصميم التي من الممكن أن تكون فوتتها. خطاب سريع الخطاب السريع هو عرض تقديمي قصير جدًا يستمر لبضع دقائق فقط. يُعَد الخطاب السريع مشابهًا للمقابلات الداخلية، لكن في الخطاب السريع ستحصل على كل أصحاب المنفعة مجتمعين في غرفة واحدة، ثم تختار خمسةً أو ستةً من أصحاب المنفعة هؤلاء (مسوق ومحاسب ومصمم وباحث وموظف مبيعات … إلخ) ليلقي كل منهم كلمةً يركز من خلالها على توضيح وجهة نظره حول التحدي في مدة أقصاها 10 دقائق. يجب أن يغطي العرض التقديمي لأصحاب المنفعة هذه المواضيع: أهداف الشركة. تحديات المشروع من وجهة نظرهم، والتي يمكن أن تكون تقنيةً أو بحثيةً أو تصميميةً. بحث المستخدم الذي لديه حاليًا. اترك خمس دقائق للأسئلة في نهاية الجلسة، مع شخص مختار يعمل على كتابة الملاحظات طوال الوقت، وبمجرد الانتهاء من الخطاب السريع، قد تضطر لتحديث وصف التحدي لتدمج الأشياء الجديدة التي تعلمتها. يُعَد الهدف من هذه الخطابات السريعة هو إنشاء قائمة من النقاط التي يمكنها أن تقود إلى إنشاء ميزة أو سير عمل يمكنها مساعدتك في الوصول لهدف منتجاتك. مقابلات المستخدم تُعَد مقابلات المستخدم طريقةً رائعةً للتعرف على النقاط الحرجة لدى المستخدم في مهمة معطاة. ربما تكون هذه هي أفضل طريقة للتعرف على رحلة المستخدم ونقاط الضعف ونقاط القوة لديه، لهذا رتب ما لا يقل عن خمس مقابلات للمستخدمين أو أكثر إذا كنت تستطيع الوصول إليهم، حيث يجب أن تتضمن أنواع الأسئلة التي سوف تسألهم إياها التالي: كيف ينجزون نفس المهام حاليًا؟ لنفترض مثلًا أنك تريد حل التحدي الذي واجهك في التطبيق المالي في الأمثلة السابقة، واسألهم "كيف يشترون الأسهم والمستندات في الوقت الحالي؟". ما الذي يعجبهم في آلية سير العمل الحالية؟ ما الذي لا يعجبهم في آلية سير العمل الحالية؟ ما هي المنتجات المشابهة التي يستعملها المستخدم حاليًا؟ ما الذي يعجبهم؟ ما الذي لم يعجبهم؟ إذا ما امتلكوا القدرة على تغيير شيء في هذه العملية ماذا سيكون؟ تُعَد الفكرة من إجراء المقابلات هي حث المستخدمين على إبداء آرائهم حول التحديات التي يوجهونها، ولا تُعَد المقابلات نقاشًا معك، لذا فلابد من التحلي بالهدوء قدر الإمكان، حيث يجب أن تبقى هادئًا عند توقف المستخدم عن الكلام لأنك يجب أن تسمح له بجمع أفكاره، وستندهش عندما ترى قدرة الشخص على الاستمرار بالكلام بعد توقفه لعدة ثوان، لذا كن مستمعًا صبورًا دون الملاحظات طوال الوقت، وإذا أمكنك تسجيل المحادثة فافعل لتعود إليها إذا ما سهوت عن شيء منها. يُعَد الهدف من هذا هو موازنة التحدي الذي تواجهه بوجهات نظر المستخدمين التي تجمعها؟ هل هما متوافقين؟ هل تعرفت على أي شيء يمكنك أن تحدث وصف المشكلة او التحدي من خلاله؟ إجراء الدراسات البحثية ميدانيا رؤية المستخدمين في بيئة عملهم الطبيعية طريقة عظيمة لفهم كيفية تعاملهم مع التحديات التي تواجههم. يمكنك في هذا المكان متابعة المستخدمين أثناء عملهم في الإطار الخاص بهم خلال إنجازهم لشيء ما، مثلًا كيف يتسوقون؟ وكيف تجري رحلة وصولهم للعمل؟ وكيف يرسلون الرسائل النصية القصيرة؟ سيخبرك المستخدمون في هذا ما يعتقدون أنك تود سماعه، ولكن إذا تابعت المستخدمين وراقبت كيف ينجزون مهامهم اليومية فقد يكون ذلك مفيدًا، في الأساس أنت تراقب دون أن تتدخل فقط، فأنت تراقب وتدون الملاحظات حول الأشياء التي وجدوها سهلةً او صعبةً أو حتى تلك الأشياء التي لم ينجزوها، والهدف من كل هذا هو اندماجك في بيئة المستخدم لتستطيع أن تهتم وتعالج نقاط ضعفهم في العمل. تتضمن هذه التقنية بعض الأعمال التي تحتاج فترةً طويلةً لتنتهي، وتتطلب قيادة الباحثين لهذا الجزء من المشروع، لكنها قد تكون الأكثر دقةً وموضوعيةً لأنك تستطيع دراسة مجموعة من الأشخاص في بيئاتهم الطبيعية. اجمعهم مع بعضهم البعض بمجرد انتهاء مرحلة التعلم في مشروعك، ستحتاج إلى إلقاء نظرة أخيرة على تحديك، فهل أنت على المسار الصحيح؟ هل هناك شيء تود تعديله؟ اكتب كل الأشياء التي تعلمتها وصنفها إلى فئات، إذ يمكن أن تصبح هذه النقاط هي البنية الأساسية للميزات أو لسير العمل ويمكن استخدامها أيضًا لتحديث وصف التحدي أو مراجعته. بمجرد تحليل النتائج وتكوّن التصور العام للمشروع، فقد حان الوقت لتطبيق هذه المعارف لإنشاء خريطة المشروع. خريطة المشروع تحتوي المشاكل التي نحاول إيجاد حل لها في الغالب من عدد من الأشخاص المؤثرين، فلكل شخص منهم أهمية في تسيير العمل، وذلك بناءً على الذي تعلمته من عدد الأشخاص الذين من المحتمل أن يكون لهم تأثيرًا في المشروع، ومن الممكن أن يكونوا من نوع مستخدم أو من نوع صاحب منفعة على سبيل المثال، ففي نظام رعاية الأطفال المصابين بمرض اعوجاج القدم على سبيل المثال، يُعد الأشخاص المؤثرون هم المرضى الذين يُعالَجون، والطبيب المُعالِج، ومقدم الرعاية للمريض. اكتب الأشخاص المؤثرين على الجانب الأيسر من الورقة، أو إذا أمكنك الحصول على سبورة بيضاء، ثم مقابل كل شخص الأهداف التي يود تحقيقها. اكتب في النهاية لكل شخص عدد المهام التي تلزمه ليصل إلى هدفه ورقم هذه المهام، على سبيل المثال إذا ما أخذنا الطبيب المعالج مثالًا، فسيكون هدفه الأساسي هو معالجة مريض اعوجاج القدم، لذا فالخطوات التي تلزمه ليصل إلى هدفه هي أولًا تسجيل المريض في النظام، يليها اتباع خطة علاجية، ثم تحديد جدول مراجعة دورية للحالة الصحية، وصولًا إلى الإجراء الطبي. توضح خارطة المشروع الخطوات الأساسية لكل مستخدم في آلية سير العمل. ستكون النتيجة خارطةً للمشروع توضح الخطوات الأساسية في العملية، ويمكنك عدّها نظرةً عامةً للمشروع بدون تفاصيل كثيرة، كما تعمل على منح المستخدمين القدرة على الحكم بتطابق الخريطة مع وصف التحدي أو المشكلة الذي حددوه سابقًا. عندما تتطرق لاحقًا لكل خطوة، فستكون هناك المزيد من التفاصيل، ولكن في الوقت الحالي تفصل الخريطة الخطوات اللازمة للمستخدم ليصل إلى هدفه المنشود. مخطط الصفحة الشبكي والتصميم القصصي آلية Crazy 8 يوصى باستخدام أداة تسمى crazy 8s لهذا الغرض، والتي تتضمن طي قطعة من الورق مرتين لينتج لدينا ثمانية لوحات للرسم عليها، ثم ترسم فكرةً في كل لوحة بناءً على كل الأشياء التي تعلمتها حتى الآن. امنح نفسك عشر دقائق فقط لتعثر على أفكار لملء اللوحات، وإذا تجاوزت هذه المدة ومنحت نفسك مثلًا عشرين دقيقةً، فستبدأ نفسك بالمماطلة مثل الذهاب لإعداد كوب قهوة، أو تفحص البريد الإلكتروني، أو بإجراء نقاش مع فريقك، لكن أهم شيء هو ألا تكمل العمل! ولهذا يجب العمل على خلق شعور داخلي يستمر بالإلحاح، بحيث يعمل هذا الشعور على اجبارك على إنهاء العمل بسرعة وفعالية أكبر. إذا كنت تعمل مع فريق، فاجعلهم ينجزون أعمالهم باجتهاد وبنفس الطريقة السابقة "crazy 8s"، إذ ستعمل هذه الطريقة على تحفيز عقلك وتجعلك تفكر في التحدي، عمومًا هذه الرسوم الشبكية البدائية ستمثل مستقبلًا لتصميم واجهة التطبيق. ستعرض بعد ذلك أنت وكل أفراد الفريق الذين عملوا على تصميمات مشابهة أعمالكم على المجموعة وكل فرد من أفراد الفريق يجب عليه الشرح بالتفصيل للرسومات الثمانية في ورقته ولماذا اختار أن يسلك مسارًا معينًا دون آخر. ذكّر أفراد الفريق أن يستخدموا المعلومات التي تعرّفوا عليها في الخطوات السابقة، مثل المقابلات والخطابات وغيرها، وذلك ليشرحوا تصميماتهم من خلالها، ثم يحين الوقت للتصويت على الأفكار التي عرضت، إذ يمنح كل شخص قصاصتين يستطيع من خلالهما التصويت على أي من الأفكار المعروضة، ومن الممكن أن يصوت بكلا القصاصتين لنفس الفكرة إذا كانت تستحق ذلك. تُعَد أداة crazy-8s طريقةً عظيمةً لتمثيل كل أفكارك في ورقة واحدة. والآن أنت بحاجة لتصميم مفصّل بالاعتماد على ما تعلمته. حسن التصميم بعد انتهاء التصميم، خذ الفكرة التي صُوّت لصالحها، وارسم الفكرة النهائية، بحيث يمكن دمج بعض الأفكار الأخرى من التصميمات التي عرضها زملائك. امنح نفسك عشر دقائق أخرى لإكمال هذه المهمة، وبعد الانتهاء اعرض الأفكار مرةً أخرى على الفريق وصوت كما فعلت سابقًا. مثل الفكرة باستخدام التصميم القصصي يعمل التصميم القصصي على جمع الأفكار مع مخطط الصفحة الشبكي في تدفق مثالي متكامل. بعد أن أصبح التصميم في متناول اليد الآن، فقد حان وقت الانتقال إلى التصميم القصصي الذي يرتبط بوُثق مع المستخدم، حيث يجب عليك من هذه النقطة البدء بالتفكير في الخطوات التي سوف يتبعها المستخدم، إذ من الشائع جدًا استخدام بعض التصميمات التي أنجزها زملائك في تنفيذ تدفق البرنامج، وكل ما تريد الحصول عليه الآن هو عمليات تنجز خطوةً بخطوة مع بعض النقاط التي من الممكن أن يترك الاختيار فيها للمستخدم، لذا راجع خريطة المشروع للتأكد من صحة التصميم وأنه يغطي الهدف منه. إنشاء النموذج الأولي لا يعني إنشاء النماذج الأولية إنشاء قالب متكامل من ناحية الأكواد البرمجية، بل يكتفى بإنشاء نموذج إذا ما استخدمه شخص ما ظنه البرنامج الحقيقي. تختلف أدوات إنشاء النماذج من شخص لآخر، فبعض الأشخاص يستخدمون كي نوت Keynote أو باوربوينت، والتي تعمل على إجبارك على التفكير في تدفق البرنامج لا التركيز على تفاصيل التصميم، وهنا قد تود استثمار وقتك في تعلم أدوات مثل Balsamiq أو Marvel أو Framer، والتي يمكن أن توفر لك بعض التحكم في سلوكيات البرنامج بغض النظر عن الأداة التي سوف تستخدمها. فقط تأكد من أنها تساعدك على التركيز في تدفق البرنامج وإظهار البرنامج على أنه مكتمل. ستحتاج في النهاية إلى اختبار التصميم من خلال أناس حقيقين، لذلك حاول أن جعله واقعيًا قدر الإمكان، ولكن ذلك لا يعني أن تضيع أسابيعًا في إنشاء النموذج الأولي. يجب أن يكون النموذج الأولي حقيقيًا قدر الإمكان ليكون قابلًا للتصديق. يحدث إنشاء النموذج الأولي بالموازنة بين الوقت ومدى واقعية التصميم، لذا حاول ألا تؤثر كثيرًا على أي من الطرفين، في كلا الحالتين قد ينتهي الأمر بإضاعة الوقت فقط. اختبر سهولة الاستخدام في تصميماتك سيكون من الجيد أن تمتلك معمل اختبارات، لكن إن لم تكن تمتلك واحدًا، فبناء معمل جديد ليس بالأمر الصعب إذا ما حرصت على إنشاء بيئة مريحة تمنع تشتت المستخدمين. يشمل الاختبار عادةً عددًا من المستخدمين مع فردين من فريقك يسأل الأول الأسئلة والآخر بكتابة الملاحظات. يشمل الإعداد الجيد للاختبار استخدام تطبيق لتسجيل تفاعلات المستخدمين مثل تطبيق Hangouts. سيكون هذا الأمر جيدًا إذا أردنا أن يراقب بقية أعضاء الفريق عملية الاختبار من غرف أخرى، وتُعَد هذه العملية مخيفةً لنا بصفتنا صانعي تطبيقات، وذلك لأن تطبيقاتنا تختبر في بيئة واقعية ومن الممكن أن تكون تجربةً ممتعةً واقعيةً. التصميم القصصي يعمل على جمع الأفكار مع مخطط الصفحة الشبكي في تدفق مثالي متكامل. أسئلة ليجاب عليها عند بدء اختبار تطبيقك، اطلب من المستخدم أداء مهامه من خلال التطبيق، وأثناء ذلك فليتحدث بصوت عالي عن الذي يفعله حاليًا ولماذا يفعله. قد يكون هذا غريبًا لكنه يساعد في سماع الأفكار التي تجول في بال المستخدم، وهنا حاول ألا تقاطعهم أو تساعدهم على تخطي المشاكل التي يواجهونها، اسألهم ببساطة لماذا اتبعوا هذه الطريقة لتنفيذ مهامهم بعد إكمالها أو قبل. الأشياء التي تحتاج إلى اكتشافها: ما الذي يعجبهم في النموذج الأولي؟ ما الذي لا يعجبهم في النموذج الأولي؟ ما هي نقاط الضعف؟ لماذا عمل التدفق؟ لماذا لم يعمل التدفق؟ ما الذي يرغبون في تحسينه؟ هل التصميم أو التدفق العام يلبي احتياجاتهم؟ راجع التصميم مرة أخرى وأعد إجراء الاختبارات لديك تغذية راجعة حصلت عليها من اختبار النموذج الأولي، وقد حان الأوان الآن لمراجعة التصميم وتحليل الجوانب التي نجحت والجوانب التي لم تنجح. لا تفزع من إنشاء مخطط شبكي جديد وآخر قصصي ومن ثم نموذج أولي آخر، إذ قد يكون البدء بالتخطيط من جديد أفضل للحصول على تدفق أفضل للبيانات من الذي سنحصل عليه إذا نقلنا التعديلات على النموذج الأولي الذي صممناه سابقًا، وهنا حاول ألا تمنحه قيمةً كبيرةً لأنه مجرد نموذج أولي. عندما تكون مسرورًا من تصميماتك فسيمكنك اختبارها مرةً أخرى وتحسينها لتصبح أفضل في الحالات التي لم يبلغ فيها النموذج الأولي النتيجة المرغوبة. قد تعتقد للوهلة الأولى أن تصميمك فشل، لكنه في الحقيقة لم يفشل لأن الوقت الذي قضيته في تطوير النموذج الأولي هو أقل من الوقت اللازم للتصميم الكامل، وأنت من خلال المعلومات التي حصلت عليها، ستعرف الأشياء التي يحبها المستخدم فعلًا ويمكنك إضافتها، إذ لدينا في نهج التصميم sprints الذي نتبعه فلسفةً وهي أما ربح العمل أو التعلم، لذا لا تضغط على نفسك إن لم تفعل الفكرة كما خطط لها. اصنعه إذا اختبرت أفكارك وأعجبت المستخدمين وحزت على التمويل من أصحاب المنفعة لأنهم كانوا معك منذ البداية، فقد حان الوقت لتصنع الشيء الذي تعمل عليه منذ البداية، فقد باتت لديك فكرة واضحة الآن عما يجب عليك فعله وما هي أولويات التجربة. قد تكون هناك في كل مرحلة انتقالية في المشروع حاجةً لاختبار قابلية استخدام للتحقق من أن العمل يسير وفقًا لما هو مخطط له. لا يمكننا وصف كم هو من المهم التعرف على أكبر قدر ممكن من المعلومات حول العمل، قبل أن تبدأ بالالتزام بإنجازه وتضيع الوقت والجهد في فكرة قد لا تمثل الحل الصحيح. بعد اطلاعك على المقالة، يفترض أن تكون قد أخذت الأسس الأسس المتينة في تجربة المستخدم وأهميتها، فتجربة المستخدم ليست عمليةً خاصةً بالمصممين والباحثين فقط، بل هي مسؤولية كل فرد مشارك في المشروع، لذا يُنصح بالمشاركة في إنشاء تجربة المستخدم في كل وقت ممكن. ترجمة وبتصرف للمقال Basics of UX من موقع developers.google. اقرأ أيضًا أساسيات البحث في تصميم تجربة المُستخدم مهام مصممي تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه هندسة المعلومات في تجربة المستخدم

يحتاج مديرو المواقع المصممة بنظام إدارة المحتوى ووردبريس، إلى اختبار التغييرات على الموقع دون ظهورها المباشر للزوار. حيث ينعكس إجراء التغييرات على الموقع بعد إطلاقه سلبًا على ثقة الزوار، ولذا يوفِّر نظام الووردبريس عدة آليات لاختبار التغييرات على الموقع دون التأثير على ظهور المحتوى الفعلي للزوار: إنشاء بيئة اختبارية sandbox: تُستخدَم هذه الآلية لاختبار التغييرات المطبقة على قالب الووردبريس وملف التنسيق الخاص به، حيث تسمح بتعديل القالب على الحاسوب دون الإخلال بالموقع الأساسي. وهذه البيئة تُقيِّد خيارات التعديل على الموقع، بحيث لا يمكن التعديل إلا على ملف CSS، أما بقية الإضافات البرمجية والأدوات في الووردبريس، فلا يمكن التعديل عليها، مما يعني أنّ هذه الآلية مخصَّصة فقط لتعديل مظهر صفحات الموقع. إخفاء منطقة الاختبار: حيث يُقيَّد الوصول للموقع المخصَّص لاختبار التغييرات، والموجود على خادم موقع الويب، وهذا يتطلب المعرفة المسبقة بملفي htaccess.، وApache، وتسمح هذه الطريقة بتطبيق التغييرات على الإنترنت مباشرةً دون ظهورها للعامة. تثبيت الووردبريس على الحاسوب: يٌثبَّت الووردبريس وهو في موضع الاختبار، على الحاسوب الشخصي مع إجراء بعض التعديلات، بحيث يُختَبر محليًّا قبل رفعه على خادم الويب. وتسمح هذه الطريقة بالتحكم الكامل بالووردبريس، حيث تُستَخدَم الإضافات البرمجية، وملفات القالب template files، والقوالب themes، ويعاد تصميم كلّ شيء بطريقة تحاكي العمل على الإنترنت، دون اللجوء إلى استخدام عرض الحزمة bandwidth، أو المعاناة من سرعة الإنترنت. ويوجد طريقتان للتثبيت، وهما: تثبيت نسخة جديدة على الحاسوب، أو تثبيت موقع ووردبريس موجود حاليًّا. وسنتطرق لآلية نقل الووردبريس إلى موقع الويب بعد الانتهاء من هاتين الطريقتين. إنشاء بيئة اختبارية يُطلق مصطلح البيئة الاختبارية على الصندوق الرملي الذي يلعب الأطفال بداخله، ويشكّلون القلاع الرملية فيه. بحيث يكمن وجه الشبه بين هذا الصندوق والبيئة الاختبارية، في أنّ كلّ ما يحدث داخل الصندوق لا يؤثِّر أبدًا على الواقع. والبيئة الاختبارية في نظام الووردبريس هي نسخة طبق الأصل من صفحة موجودة فعليًّا، حيث تُحفَظ هذه النسخة على القرص الصلب hard drive، وتطبّق عليها التعديلات لتغيير شكلها الخارجي، دون ظهور هذه التعديلات على الموقع مباشرةً، وتُرفع هذه التغييرات على الموقع بعد التأكّد من ملاءمتها. يستخدِم نظام الووردبريس عدّة ملفّات قالب template files لإنشاء مجموعة عروض views على الموقع. ويوجد عمومًا، قالب لعرض الصفحة الرئيسية، وقالب لعرض منشور مُنفرِد، وقالب لعرض منشورات متعدِّدة. حيث تُستخدَم هذه القوالب الثلاثة في التصنيفات، و صفحات البحث، وصفحات الأرشفة. كما يوجد ملف CSS خاص بكل قالب من القوالب السابقة، وهو مختلِف عن الآخر، لذلك لابد من إضافة الملفات الثلاثة في صندوق الاختبار عند تغيير المظهر العام للموقع، وذلك يتحقق باتباع الخطوات التالية: اختيار القالب theme المراد تعديله، من لوحة التحكم، من ثم اختيار تبويب المظهر Appearance. عرض أحد القوالب التالية: قالب عرض الصفحة الرئيسية. قالب عرض المنشور المنفرِد. قالب عرض المنشورات المتعدِّدة. التوجه إلى المتصفح، واتباع الخطوات التالية: اختيار ملف file، ومن ثم اختيار حفظ باسم save as. تسمية الصفحة المراد حفظها باسم القالب الذي اُختير عرضه في الخطوة الثانية. حفظ ملف الصفحة في المجلد الخاص بالبيئة الاختبارية. نسخ ملف التنسيق style.css الموجود في مجلد القالب theme، إلى المجلد الخاص بالبيئة الاختبارية. فتح الملفات الثلاثة بمحرر نصوص، وإجراء التعديل التالي: <style type="text/css" media="screen> @import url('/wp-content/themes/yourtheme/style.css'); </style> إلى: <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> بعد هذه الخطوة تُنسَخ العناصر المرتبطة بالصفحات، مثل: الأيقونات، وصور الخلفية، وعلامات التنقيط bullets، وغيرها من العناصر، إلى المجلد الخاص بالبيئة الاختبارية، ويمكن الوصول لتلك العناصر من خلال فتح ملف التنسيق CSS، واتباع روابط العناصر الموجودة بداخله، ومن ثم تنزيلها، وحفظها في مجلد فرعي داخل مجلد البيئة الاختبارية، مثل: header { margin:5px; padding:10px; background:url(images/background.jpg).... } لاختبار نجاح العملية تُفتح إحدى الصفحات الموجودة في هذا المجلد بنقرتين لتُُستعرض في المتصفح، فإذا عُرضت العناصر بتناسق كما في الأصل فهذا يعني نجاح العملية، أما إذا عُرضت العناصر بطريقة غير منسقة فهنا يجب التأكد من ربط صفحات التنسيق css. أصبحتَ الآن تمتلك نسخةً خاصّةً للتعديل عليها واختبار التغييرات الخاصة بالمظهر. وتحتاج للبدء باستخدام البيئة، إلى فتح برنامجين، وهما: محرر النصوص لفتح ملف style.css، والمتصفِّح لفتح الصفحة التي ستعمل عليها في العرض (الصفحات الثلاثة التي حُفِظت في البداية). حيث تُطبَّق التغييرات اللازمة على الملف style.css، ومن ثم يُحفَظ الملف، وأخيرًا تُحدّث الصفحة في المتصفح لمشاهدة التغييرات. وتُكرَّر الخطوات السابقة من أجل الصفحتين الباقيتين. نصائح لاستخدام البيئة الاختبارية تحتوي النقاط التالية على بعض النصائح للعمل في البيئة الاختبارية. انسخ الملفات نسخا احتياطيا دوريا انسخ الملفات نسخًا احتياطيًّا إلى مجلد احتياطي قبل أيّ تعديلٍ مهم، أو اضغط المجلد الذي يحوي الملف قبل تعديله، باستخدام برنامج ضغط لملفات بصيغة zip مثلًا. يُعَدّ المجلد المضغوط بمثابة نسخة احتياطية لكامل المجلد الأصلي، وفي حال حصل خلل في الملفات، فمن السهل استرجاع النسخة السليمة. تعقب عناصر HTML في الملف الخاص بالقالب افتح ملف الصفحة المراد تعديلها، في محرر النصوص، وأضف تعليقًا عند بداية ونهاية كلّ عنصر من عناصر لغة HTML، وذلك لتصبح عملية التعديل والتنسيق أكثر دقةً وسهولة. دون الملاحظات يُنصَح بتدوين ملاحظات حول التعديلات المحورية قبل تطبيقها، فإذا حدث خطأ ما بعد تطبيق التعديلات، فيصبح من السهل مراجعة الملفات المُعدَّلة، وفهم طبيعة التعديل. دون الملاحظات داخل الملفات يُنصَح بكتابة ملاحظات وتعليقات أمام كل كود عند تعديله في الملف البرمجي، وذلك لتسهيل فهم التعديل وتتبعه لاحقًا. اجعل التعديلات على مراحل صغيرة نسبيا تصبح عملية استكشاف مكان الخطأ أبطأ وأطول عند تطبيق عدد كبير من التعديلات دفعةً واحدةً، ولهذا يُنصح بتطبيق تعديلات قليلة، ومن ثمّ تفقُّد تأثيرها على الصفحة لضمان نجاحها، ونُكرر هذه العملية من أجل باقي التعديلات. تجنب التعديل على ملف القالب عدل في البداية على ملفات التنسيق فقط ولا تُجري أية تعديلات على ملف الـ HTML، أما إذا كنت تنوي انشاء قالب جديد لإطلاقه للعامة، فيجب عليك عند تعديل ملفات القالب تعديلها بكل دقة وعناية؛ أما إذا كان التعديل فقط لموقعك فعدِّل على الملف في البيئة الاختبارية ثم انقله لملف القالب في النظام. نقل الملفات من البيئة الاختبارية إلى القالب في النظام تُنقَل التغييرات بعد اختبار نجاحها، إلى قالب الووردبريس، وذلك باتباع الخطوات التالية: ارفع ملف style.css المعدَّل إلى مجلد القالب، واستبدل القديم به. ارفع كل الصور والرسوم إلى مجلد القالب، أو إلى مجلد فرعي بداخله. افتح موقعك من المتصفح، إذ ستُطبَّق التعديلات تلقائيًّا. اعكس التعديلات على ملفّات القالب في موقعك المقابلة لأي ملفات تعدلها في البيئة الاختبارية. تثبيت مدونة أخرى ثبِّت نظام الووردبريس مجددًا، وغيّر البادئة في ملف wp-config.php، وهي البادئة التي تبدأ بها أسماء الجداول ضمن قاعدة البيانات table prefix. انتقل إلى الخيارات options، ومن ثم كتابة writing، وبعدها أزل علامة الاختيار من حقل تحديث الخدمات Update Services. لا تخبِر أحدًا بعنوان صفحتك الجديدة. في حال الانتقال من المدونة الجديدة إلى موقع آخر، سيكتشف هذا الموقع عنوان مدونتك بسبب المتصفح، ولتخطي هذه المشكلة، اخرج من موقعك، ثم ادخل لمدونتك الأساسية، ومن ثم انتقل منها إلى الموقع الذي تريده. حيث أن هذه الطريقة فعالة عند اختبار الموقع من متصفحات مختلفة وأشخاص آخرين، بعد الانتهاء من تعديله. إخفاء منطقة الاختبار تُستَخدَم ملفات htaccess. على خادم الويب أباتشي Apache، لإخفاء مجلد الاختبار عن العامة. حيث يخزِّن ملف htaccess. الأوامر، والتنقلات اللازمة عند حدث معيّن، ويمكن استخدام ملف إعدادات أباتشي httpd.conf في الأباتشي، أو أي أداة أخرى، كما يُطبَّق ملف htaccess. فقط على المجلد المراد إخفاءه، حيث سيختفي هو وكل المجلدات الفرعية الموجودة بداخله، مما يسمح لك بتقييد الوصول إلى مجلد مخصص. ويجب التنويه إلى أنّ هذه الطريقة صالحة فقط مع الخوادم التي تدعم ملفات htaccess.، أما في حال عدم تيقّنك من دعم موقعك لهذه الخاصية، تواصل مع شركة الاستضافة، فمن المحتمل أن تكون موجودة ولكنك لا تملك صلاحيات استخدامها، وبالتالي عليك التواصل مع شركة الاستضافة أيضًا. تحتاج عند استخدام ملف htaccess.، إلى إدخال التعليمات الإرشادية للخادم، وإعلامه بآلية التعامل مع الأحداث، ليستطيع من خلالها تقييد ومنع الوصول إلى موقع الاختبار، وذلك بتطبيق خطوات مرتّبة ضمن المجلد أو المكان الذي يحوي تثبيت الووردبريس، كما يأتي: أنشِئ ملفًا فارغًا باستخدام محرر النصوص، وعدّل اسمه ليكون htaccess. تحتاج إلى المعلومات التالية: المسار الكامل للمجلد الذي لا يمكن الوصول له من العامة، فمثلًا المسار http://example.com/public_html/ يمكن الوصول له، أما المسار http://example.com/privatel/ فلا يمكن الوصول له، لذلك ستستخدِم المسار الثاني. اسم المنطقة المحمية secured area، مثل: Enter Password، أو Secure Area، وهذه ليست ضرورية. اكتب في ملف htaccess. ما يلي: AuthUserFile /full/path/of/directory/.htpasswd AuthName "Security Area" AuthType Basic require valid-user وبعدها غيّر كلًا من المسار الكامل للمجلد /full/path/of/directory/، والمنطقة المحمية Security Area، بما يقابلهما في موقعك وِفقًا للملعومتين المذكورتين. احفظ ملف htaccess.، وارفعه إلى المجلد المراد إخفاءه، ويكون هذا مكان تثبيت الووردبريس أو المدونة، مثل: /wordpress/، أو blog. استخدِم لوحة التحكم cPanel، أو البرتوكول Telnet، أو أي أداة أخرى، للوصول للوحة موجه الأوامر command panel الخاصة بالخادم، واذهب إلى المسار المعرف ضمن AuthUserFile. أَدخِل الأمر التالي: htpasswd -c .htpasswd user_name، حيث أن user_name هو اسم المستخدم المصرح له بالوصول. أَدخل كلمة المرور بعد تنفيذ الأمر السابق، وتحقق منها بإدخالها مرةً ثانية. احفظ اسم المستخدِم وكلمة المرور في مكان آمن. احذف كلمة المرور وملف htaccess. عندما يصبح الموقع جاهزًا لإطلاقه للعامة، ويُنصَح بحذف رابط الوصول الافتراضي لخدمة Ping-o-Matic، حيث ستتسبب هذه الخدمة بنشر المنشورات الاختبارية للعامة ولكن دون الوصول للموقع. تثبيت نظام الووردبريس على حاسوبك التثبيت على الماك اتبع التعليمات الموجودة في هذا المقال لإعداد بيئة الخادم المحلي، من أجل اختبار الووردبريس وتطويره على الماك. التثبيت على نظام الويندوز يجب التأكد من صلاحيات الوصول لكل من خادم أباتشي، وMySQL/MariaDB، وphpMyAdmin، وذلك عند البدء بتشغيل نظام الووردبريس. ولتثبيت هذه الأدوات نلجأ إلى برنامج XAMPP، والذي يُثبِّت هذه الأدوات دفعةً واحدة، أي أنّ كل ما نحتاج إليه لتشغيل الووردبريس على الحاسوب هو تثبيت برنامج XAMPP، ومن ثم تشغيله. يوجد إصداران من برنامج XAMPP، إحداهما أساسي Basic والآخر مُخفف Lite، حيث يفي الإصدار المخفف هنا بالغرض. ويتطلب تشغيل الووردبريس على الويندوز، إجراء الخطوات التالية: نزّل برنامج XAMPP وثبّته. يصبح المسار C:/xampplite، أو المسار C:\xampp هو المسار الافتراضي لبرنامج XAMPP بعد تثبيته. شغِّل برنامج XAMPP من المسار: C:/xampplite، أو من المسار C:\xampp. قد تحتاج لإعادة تشغيل الحاسوب لتبدأ خدمات أباتشي بالعمل. أَدخِل الرابط http://localhost/xampp في المتصفح، للدخول إلى الخادم المحلي. اضغط على phpMyAdmin الموجودة في العمود الأيسر تحت الأدوات Tools. سجِّل الدخول على أنك مدير admin. أَدخِل wordpress في حقل إنشاء قاعدة بيانات جديدة Create new database. -أَدخِل utf8 unicode ci في الحقل المجاور للحقل السابق. -اضغط على إنشاء create. فُكّ ضغط الملف الذي يحوي نظام الووردبريس في مجلد htdocs، أي الموجود في المسار c:\xampp\htdocs. افتح من داخل مجلد htdocs، ملف wp-config-sample.php، باستخدام محرّر النصوص. تحتاج إلى تفاصيل الاتصال MySQL settings، وهي كما يأتي: define('DB_NAME', 'wordpress'); // اسم قاعدة البيانات define('DB_USER', 'root'); // اسم المستخدِم لقاعدة البيانات define('DB_PASSWORD', ''); // كلمة المرور لقاعدة البيانات define('DB_HOST', 'localhost'); // اسم الاستضافة المحلية، وغالبًا تترك هكذا احفظ الملف باسم wp-config.php. ثبِّت الملف المعدل، وذلك بالذهاب إلى الرابط. ملاحظة: يبقى الحاسوب الشخصي هو الخادم المستضيف للموقع بعد إنشاءه عليه، وذلك بتوفُّر شرطين أساسيين، وهما: سرعة الإنترنت، وزيادة مستوى حماية الحاسوب. تثبيت موقع ووردبريس موجود حاليا يقدِّم XAMPP تسهيلات تُمكنك من تثبيت الووردبريس على الحاسوب الشخصي، وبهذه الطريقة يصبح من السهل التعديل على الووردبريس الموجود حاليًّا، دون أن تظهر هذه التعديلات لزوار الموقع، حيث ستُطبق التعديلات على النظام المثبَّت على الحاسوب الشخصي، ومن ثم يُرفَع النظام بعد الانتهاء من التعديلات إلى الخادم، وبذلك تصبح التعديلات متاحةً لزوار الموقع. ويتطلب تثبيت ووردبريس الموقع على الحاسوب الشخصي، تحقيق المتطلبات التالية: إمكانيّة الوصول لقاعدة بيانات الخادم. إمكانية تنزيل نسخة ووردبريس على حاسوبك. الإصدار الأساسي من XAMPP الخاص بالويندوز. مساحةً فارغةً لاحتواء المكونات المذكورة في الأعلى. نسخ الووردبريس نسخا احتياطيا نبدأ بعملية النسخ الاحتياطي لنظام الووردبريس، والملفات، وقاعدة البيانات، وبذلك تتكون لدينا نسخة كاملة قد نحتاجها في حال حصول خلل ما. ومن ثم نأخذ نسخةً احتياطيةً من قاعدة البيانات الموجودة على الحاسوب الشخصي، ويجب هنا تطبيق إجراءات احترازية لعدم وصول أيّ شخص إليها. ستكون عملية النسخ الاحتياطي بطيئة، وذلك بسبب وجود قاعدة بيانات افتراضية مرفقة مع الووردبريس، والتي تحتوي على العديد من القراءات الإحصائية، مما يزيد حجم قاعدة البيانات. وأنت لست بحاجة إلى حذف هذه القراءات، ولكنها تُعَدّ فكرةً جيدة. يمكن أخذ نسخة احتياطية من قاعدة البيانات باتباع الخطوات التالية: سجّل دخول إلى PHPMyAdmin على خادم الموقع. اختر قواعد بيانات Databases من واجهة التسجيل الرئيسية. اختر اسم قاعدة البيانات المرتبطة بنظام الووردبريس الخاص بك. اختر تصدير Export من التبويبات الموجودة أعلى الشاشة. ستُعرَض قائمة من جداول قاعدة البيانات الخاصة بموقعك، في الإطار المحيط بأعلى منطقة التصدير. حدِّد الجداول التي تحمل البادئة المخزّنة في ملف wp-config.php، أما في حال كان نظام الووردبريس هو المثبت فقط، فيمكنك استعمال خيار تحديد الكل select all من العمود الأيسر من اللوحة. تأكد من اختيار زرّ SQL. تأكد من تحديد الحقول الموجودة في الجانب الأيمن من اللوحة، وهي: Structure، وAdd AUTO_INCREMENT value، وEnclose table and field names with backquotes، وData. حدِّد زر حفظ باسم Save as file، واترك حقل اسم القالب template name كما هو، واختر لا شيء None من أجل الضغط Compression، ومن ثمّ اضغط على اذهب Go، بعدها ستظهر لك إمكانية حفظ الملف. احفظ الملف على الحاسوب الشخصي، وستستغرق عملية الحفظ هذه بعض الوقت، اعتمادًا على حجم قاعدة البيانات. تنزيل نظام الووردبريس يُستخدم برنامج FTP client لتنزيل نظام الووردبريس على حاسوبك الشخصي. حيث يجب عليك التأكد من وجود جميع ملفات النظام الأساسية، بما فيها index.php، داخل مجلد الجذر أو داخل مجلد الووردبريس، ليُصبح في الحاسوب الشخصي بعد هذه العملية، عنصرين، وهما: نسخة احتياطية واحدة أو أكثر من قاعدة البيانات. كلّ ملفات ومجلدات الووردبريس. وعليك الأخذ بنسخة احتياطية من الملفات وتضعها في مكانٍ آمنٍ على الحاسوب، ومن ثم تبدأ العمل على هذه النسخة في المرحلة التالية. تثبيت XAMPP الأساسي ثبِّت XAMPP على الحاسوب، حيث سيُثبَّت افتراضيًّا على المسار: c:\xampp. اذهب إلى المسار C:\xampp\apache\conf، وافتح بمحرر النصوص، ملف httpd.conf. ستجد في السطر 166 من ملف httpd.conf، التالي: #LoadModule rewrite_module modules/mod_rewrite.so. احذف المحرف #، واحفظ الملف، وهذا يُفعّل mod_rewrite. أنشِئ مجلد داخل المسار C:\xampp\htdocs، حيث سيُخزَّن بداخله ملفات الووردبريس. انقل جميع ملفّات الووردبريس المٌنزَّلة (ليس النسخة الاحتياطية لقاعدة البيانات) إلى المجلد الذي أنُشٍئ في الخطوة السابقة. عدل تفاصيل الاتصال بملف MySql، وذلك كما يأتي: define('DB_NAME', 'wordpress'); // اسم قاعدة البيانات -- made define('DB_USER', 'root'); // اسم المستخدِم لقاعدة البيانات، دعها هكذا -- define('DB_PASSWORD', ''); // كلمة المرور لقاعدة البيانات، دعها فارغة هنا -- define('DB_HOST', 'localhost'); // اسم الاستضافة المحلية، وغالبًا تترك هكذا -- خزّن ملف index.php الرئيسي في مجلد htdocs، أو في مجلد فرعي بداخله، مثل: /htdocs/wordpress/. شغّل برنامج XAMPP، وذلك من خلال النقر على الأيقونة البرتقاليّة، والتي تحمل اسم xampp_start.exe، أو باستخدام برنامج console الموجود في: Program Files\ApacheFriends\XAMPP\XAMPP Control Panel. اضغط على الرابط في الجانب الأيسر من phpMyAdmin. أنشِئ قاعدة بيانات، ويجب أن يتوافق اسمها مع الاسم الموجود في ملف wp-config.php. استيراد النسخة الاحتياطية لملف الـ SQL نحتاج قبل البدء بعملية استيراد ملف الـ SQL، إلى تعديله ليتلائم مع الخادم المحلي، وذلك باتباع الخطوات التالية: نفتح بمحرر النصوص، الملف ذو الامتداد sql.، والخاص بالنسخة الاحتياطية لقاعدة البيانات. نستبدل جميع الروابط القديمة بالروابط الجديدة، مثل: استبدال الرابط القديم: http://example.com/wordpress/ بالرابط الجديد: http://127.0.0.1/wordpress/. نضغط على حفظ (save) وليس على حفظ باسم (save as). تُستَورد قاعدة البيانات بعد تطبيق الخطوات السابقة، باستخدام لوحة myphpadmin الموجودة على الحاسوب، حيث نضغط على اسم قاعدة البيانات، ومن ثم نختار تبويب SQL، بعدها نضغط على Browse، ونختار مكان لتخزين ملفات قاعدة البيانات على الحاسوب، ثم نضغط على GO، وقد تستغرق هذه العملية بعض الوقت. تصبح قاعدة البيانات الخاصة بك عند انتهاء العملية السابقة، جاهزةً ومتصلةً بالنظام. وإذا ظهر أي خطأ، فهذا يعني وجود خلل في عملية النسخ الاحتياطي بأي شكل من الأشكال، أو وجود خللٍ في قاعدة البيانات نفسها، ويجب حفظ ملفات قاعدة البيانات في مكان آمن، وذلك لمنع وصول الآخرين إليها. وإذا سار كل شيء على ما يرام، فيمكنك الدخول إلى مدونتك من الحاسوب الشخصي، وذلك بكتابة http://127.0.0.1/wordpress/index.php في المتصفح، أو اسم المجلد الذي يحوي ملفات الووردبريس. وإذا ظهر الخطأ 404، فتأكد من إدخالك المسار الصحيح لملف index.php، حيث لا يجب وضع htdocs أو xampp بعد http://127.0.0.1/، وإنما فقط اسم المجلد الذي يحوي ذلك الملف. حيث سيظهر الووردبريس على الحاسوب كما لو أنه على الويب، ولست بحاجة هنا إلى استخدام محرر الووردبريس لتعديل الملفات، بل يكفي فقط استخدام محرر النصوص الخاص بك، ومن ثم التعديل كما لو كنت تُعدّل أي ملف آخر، وستظهر التغييرات بعد الانتهاء من التعديل عند تحديث صفحة الويب من المتصفح. ترجمة وبتصرف للمقال Test Driving WordPress من موقع wordpress

تُعَدّ ووردبريس منصةً قويّةً للنشر الإلكتروني، حيث تتمتّع بالعديد من المميّزات التي صُمِّمت لجعل تجربتك في النشر على الإنترنت سهلةً، وممتعةً، وجذّابةً قدر الإمكان. ولنا الفخر بأن نقدِّم لك نظامًا لإدارة المحتوى، والذي يتميّز بأنّه حرُّ، وسريعُ، وخفيفُ، ومتوافقُ مع المعايير، إلى جانب احتوائِه على إعدادات وميّزات افتراضيّة يمكن إعادة تخصيصها وفقًا لمتطلّبات المستخدِم. وسنتطرق في القسم التالي لمجموعة من المميّزات الأساسيّة في الووردبريس، وهناك حرفيًّا عشرات الآلاف من الملحَقات أو الإضافات التي توسِّع عمل الووردبريس، وبالتالي يمكننا القول أنّ الوظيفة الفعليّة للووردبريس لا حدود لها تقريبًا. ويمنح الووردبريس الحريّة في التعامل مع الكود المصدريّ الخاصّ به، إما بالزيادة أو التعديل بأيّ طريقةٍ كانت، أو استخدامه لمشاريع تجاريّة دون أيّ رسوم ترخيصٍ على الاستخدام. يتجلّى جمال البرمجيّات الحرّة، ومفتوحة المصدر، في أنّ كلمة حرّة لا تعني مجانيّة السعر فحسب، بل الحريّة في التحكّم، والسيطرة الكاملة. لمحة سريعة أثبت لقد أُثبت أنّ نظام الووردبريس يعمل على تشغيل أكثر من رُبع المواقع التي تُنشَئ حديثًا، وأنّه نظام إدارة المحتوى المختار تقريبًا من قِبَل نصف مليون موقعٍ من المواقع الأكثر شهرةً على الإنترنت، فهو موثوقٌ لدى ناشري المحتوى ذوي الانتشار الواسع أو الضيق، بما في ذلك شبكة سي إن إن CNN، وصحيفة نيويورك تايمز NY Times. حيث يُستخدَم في أكثر من خمسين مليون موقع عالميّ، ولديه ثلاثة عشر عامًا من التاريخ المُثبَت، ولهذا فمن المؤكَّد حصولك على أفضل نظامٍ يؤدّي الوظيفة الموكلة إليه. سهولة الاستخدام تتكوّن التركيبة الأساسيّة للووردبريس من واجهةٍ بسيطةٍ تشبه إلى حدٍّ كبير تلك الواجهات الموجودة في برامج النشر، والتي تعمل على سطح المكتب، والتي تستعملها اليوم، حيث ليس هناك حاجةٌ إلى خبرةٍ في البرمجة، أو إلى خبرةٍ عاليةٍ في الاستخدام، إذ يتَّسِم منحنى عمليّة التعلُّم بالقِصر، ويُقدَّر بمدى إدخال عنوان الموقع وتسجيل الدخول، بعدها سيصبح الموقع جاهزًا لعمليّة النشر. وفي الحقيقة، يمكن لأيّ مستخدِمٍ جديدٍ تعلُّم الأساسيّات دون أيّ جهدٍ في التدريب. وتُعَدّ الواجهات محسَّنةً وسهلة الاستخدام، وهي نتيجة التحسين المستمر لسنوات، بالإضافة إلى أنّها تجمع بين قوّة مايكروسوفت وورد، وسهولة استعمال الآيفون واستخدامه المميَّز. الهدف من إنشائه هو النشر يُسهِّل النظام عمليّة مشاركة المحتوى وجذب القرّاء إلى موقعك، إمّا من خلال نشر المحتوى على وسائل التواصل الاجتماعيّة (مع التأكّد من موافقة موقعك لشروط التنسيق المُثلى، حتّى يظهر في أُولى نتائج البحث بعد النشر مباشَرةً)، أو من خلال توفير نشراتٍ إخباريّةٍ ذات محتوى مُحدَّدٍ للمستخدِم، ليطّلع عليها من خلال برنامج قراءة الأخبار الذي يفضّله، أو من خلال إرساله بالبريد الإلكترونيّ. ومن خلال ما سبق يتّضح أنّ الووردبريس ليس موقع ويبٍ بسيطٍ فقط، بل هو منصّةً لنشر المحتوى، حيث سيكون لديك ما يمكن التعبير عنه مجازًا بمكبّر صوت قويّ لبث رسالتك للعالم، وذلك بمجرّد نقرةٍ واحدةٍ منك. مدعومة من مجتمع تقني يدعم الووردبريس حاضنةً تقنيّةً (مجتمع حيويّ من المستخدِمين التقنيين) حلّت العديد من المشاكل المحوريّة، ونشرت التفاصيل حولها، وحصدت بالإصدار 4.9 وحده أكثر من 160 مليون عمليّة تنزيل من لحظة إطلاقه قَبل عِدّة أشهر. وتحوي بعض المكتبات أكثر من خمسين ألف مُلحقٍ برمجيٍّ (حرٍّ، ومفتوح المصدر)، وقوالب themes تنمو يومًا بعد يوم، وهناك أيضًا مئات من المساهِمين في كلّ إصدار دوريّ. ويهدف مجتمع الووردبريس إلى الإبقاء على حيويّة هذه المنصة ووجودها، وإثبات مدى فعاليّة ونجاح النظام بما أنّه ecosystem، أي يندرج تحته كل ما يتعلق بأطر العمل من مكتبات، وأدوات تطوير، …إلخ. متعدد المواقع يمكن تفعيل خاصيّة تعدُّد المواقع، والتي تستطيع من خلالها تطوير وصيانة مواقع متعدِّدة عبر نظام ووردبريس واحد. حيث سيمكِّن تعدُّد المواقع الافتراضيّة المتعدِّدة، من مشاركة نسخة ووردبريس واحدة، فعند تفعيل خاصيّة تعدّد المواقع فسيُحوَّر نظام الووردبريس الأصليّ لدعم شبكةٍ من المواقع. المحتوى هو الجوهر تسيير العمل بأكمله يدير نظام الووردبريس ويسيّر عمليّة النشر من بدايتها، انطلاقًا من إنشاء المسوّدة الأوليّة، إلى حين الوقت الذي تُقرِّر فيه النشر، وذلك من خلال عدّة ميّزات، منها: مراقبة التهجئة، وقواعد اللغة، والمراجعة. لذا فهو يُغني عن استعمال رسائل البريد الإلكتروني للتعديلات، والإضافات، أو حتى استعمال محرِّرات نصوص ذات تكلفة عالية. منح الموقع الحيوية يعمل كلّ شيء في النظام على جعل الموقع أكثر حيويّةً وفاعليّةً، وذلك من خلال إضافة الصور، والفيديوهات، والموسيقى، والمستندات، والتي بدورها ستولِّد شعورًا بالراحة وأنت داخل نظام الووردبريس، إلى جانب الخواصّ المتعدِّدة، مثل: خاصيّة السحب والإفلات التي تَستخدِم أحدث التقنيات للتأكُّد من وصول ملفّك بأمانٍ إلى صفحة الويب في كلّ عمليّة، ومُستعرِض الوسائط الذي يساعِد في عمليّة حفظ، وترتيب الملفات، والبحث عنها عند الضرورة. حيث يستضيف النظام هذه الملفات التي تلزَم لرفع موقعك. إزالة المشتتات في خضم العديد من المشتّتات على الويب، من: بريدٍ إلكتروني، وتغريدات تويتر، وتحديثات الحالة في المواقع المختلفة، كان لابدّ من بناء هذه المنصة، لكي لا يتشكّل تشتيتٌ إضافيٌّ للمستخدِمين، حيث تختفي عند البدء بتحرير فكرتك، وذلك بهدف التركيز على كيفيّة صياغتها لا كيفيّة نشرها. لن يضيع عملك يعمل نظام الووردبريس على عمليّة الحفظ التلقائيّ أثناء الكتابة، وبالتالي لن تقلق على العمل في حالة تَعطُّل الحاسوب أو ارتكاب أيّ خطأ. هل تريد العودة للنسخة السابقة من عملك؟ لا مشكلة، سيُنشِئ الووردبريس عند كل عمليّة حفظ، نسخةً أو لقطةً snapshot من العمل يمكن استعادتها بأي وقتٍ بنقرة واحدة. السفر عبر الزمن ليس بالمعنى الحقيقي للعنوان، ولكنّه صورةٌ تقريبيّةٌ لما توفِّره الووردبريس، حيث تُتيح لك النشر في الوقت المناسب من خلال النشر في الماضي، أي وضع التاريخ ليبدو وكأنّه نُشر بالماضي، أو جدولة منشور ليُنشَر في وقتٍ ما من المستقبل. انشر من أي مكان أصبح الإنترنت منتشرًا في كلّ مكانٍ حولنا، فلماذا لا تكون عمليّة النشر أيضًا من كل مكان؟ يمكنك متابعة عمليّة النشر والتحكّم من الهاتف بنظام آندرويد، أو نظام آي أو إس iOS الخاص بآبل. أي كلّ شيءٍ في متناول يدك حرفيًّا، وإذا لم ترغب بذلك عن طريق الهاتف، فلا تقلق، إذ يمكنك النشر من خلال البريد الإلكتروني. الحماية بكلمة مرور يمكنك حماية المنشورات بكلمة مرورٍ لحمايتها من العرض أمام الأشخاص غير المخوَّلين، كما يمكنك أيضًا إنشاء منشوراتٍ خاصة لا يمكن استعراضُها إلا من قِبَل مؤلِّفها. منشورات في صفحات متعددة تُقسَّم المنشورات ذات الطابع الطويل إلى عدّة صفحات، لتوفير وقت التمريرعلى القارئ. الحفاظ على المسودات يمكنك حفظ المقالة الغير منتهية، وتحسينها في وقت لاحق، ونشرها عند الانتهاء منها. معاينة المنشورات يمكنك معاينة المقالة قبل نشرها وإخراجها للجمهور، وذلك للتحقُّق من وجود كلّ شيء كما هو مطلوب، ويمكن القيام بهذه العملية في أيّ وقت كان من تحرير المقالة، لأن المعاينة تكون معروضةً فعليًّا. نقاط القوة الثمانية الكامنة في النظام 1- تصميم مناسب لجميع أنواع المحتوى يستحق محتواك الأفضل دائمًا، لذلك يجب أن يتلاءم الموقع مع محتواك، لا أن يتلاءم المحتوى مع الموقع، وهذا ما يوفره نظام الووردبريس، حيث يأتي بنظام قالب كامل full theme system، والذي يجعل التصميم بمنتهى السهولة ابتداءً من المواقع البسيطة، وصولًا إلى البوابة الأكثر تعقيدًا. 2- تنظيم دقيق لا تهم كمية المحتوى إذا لم يتمكن الزوار من العثور عليه، لكن لا داعي للقلق، إذ يعمل نظام الووردبريس على ترتيب المحتوى وفقًا لـ: السنة، والشهر، واليوم، والمؤلف، والفئة (أيَّ طريقة يمكن وصفها)؛ وتُنشَئ أرشيفات قابلة للتصفُّح بآلية ديناميكية لضمان أن كل شيءٍ محدَّث طيلة الوقت. 3- البحث الشامل من خارج النظام أو داخله يمتلك نظام ووردبريس خاصية بحث تُعَدّ الأفضل من نوعها، فكل كلمة تُدخَل في صندوق البحث في أعلى كل صفحة تُعَدّ كلمةً ذات طابع بحثي، أي يمكن البحث بها، وفي حال أراد الزوار البحث من محرك بحث خارجي مثل جوجل، فسيعرض النظام المحتوى الخاص بك بطريقة شاملة مع ضمان أن يكون أول النتائج في كل مرة. 4- حتى عناويين الموقع منسقة في بعض الأحيان عند دخولك لموقع لا يعمل بالووردبريس، وتنظر إلى رابط الصفحة التي دخلتها، فستجد أنّ الرابط عبارة عن أحرف وأرقام مبعثرة، أما في الووردبريس، فيعلم مطورو النظام أنّ الذين يعملون على النظام، ويتصفحون مواقعه بشر وليسوا حواسيب، لذلك تظهر عناوين ذات معنى يمكن قراءتها، وليس عناوين الصفحات في قاعدة البيانات. 5- بشرى للكتاب مستخدمي الويب للنشر من المعلوم أنّ صياغة كلّ ما يُنشر يجب أن تكون متوافقةً مع قواعد الويب، وذلك عن طريق استخدام الأدوات المناسبة. وعلى الرغم من أنّ نظم إدارة المحتوى تُخصِّص وتُحوِّل النصوص لتتلاءم مع قواعد الويب المختلفة، إلّا أنّ بعضها لا يراعي كافة التفاصيل، وهنا تأتي أهميّة نظام الووردبريس على أساس مديرٍ للمحتوى، حيث يُستخدم محرّك خاص لإدارة هذه العمليّة ويدعى محرك التركيب Texturize engine. يتعامل هذا المحرك مع جميع التفاصيل التي أدخلها الكاتب من علامات التنصيص، وعلامات الاقتباس، والرموز الرياضية، وغيرها من الرموز؛ عن طريق تحويلها إلى ما يناسبها من وسوم وكيانات لغة برمجة صفحات الويب HTML. 6- مرحبا بالجميع في ووردبريس من المميزات العظيمة في ووردبريس أنه تُرجم ليتلاءم مع أكثر من 180 لغة حول العالم، لذلك وبأي لغة حول العالم يمكن النشر فورًا، بالإضافة إلى أنّه يمكنك إنشاء موقع بلغتك المحليّة، ويمكنك تغيير لغة الموقع وتعريبِه باستخدام GetText. 7- التحكم الكامل بخصائص الموقع من خلال السحب والإفلات لا تتطلب إدارة موقع الووردبريس تخصص المدير بعلوم الحاسوب، حيث تُدير أدوات التحكّم بالسحب والإفلات كل ما يريده المستخدِم، ابتداءً من القوائم وصولًا إلى الأدوات التفاعلية في كل صفحة وبطريقة بسيطة. 8- صلاحيات متعددة يُنشِىء النظام أدوارًا roles مختلفةً لكل مستخدِم -في حال وجود عدد من المستخدِمين داخل النظام-، ويعطي الصلاحيات المناسبة لكل مستخدِم، تمامًا كما يحدث عند توزيع المهام في الحياة الواقعية، كما يسمح للمستخدِمين الجدد بالتسجيل تلقائيًّا دون تدخُّل من المدير، حيث يُدخِل كل مستخدِم المنشور الذي يريده، ثم يرسله لمدير النظام، ويطّلِع الأخير عليه، ومن ثم يقبله أو يرفضه. خصائص عاينها المستخدمون وأثبتها المحترفون قوة الإبداع يعمل نظام الووردبريس على توفير أدوات كبيرة وبأفكار إبداعية، وعند استخدام هذه الأفكار، فهناك حاجة للقليل فقط من التخصيص لكي تتلاءم مع الاستخدام الخاص بكل مستخدِم. وتتطلب الأنظمة الأخرى لإدارة المحتوى، بذْل المستخدِم لجهد كبير للبحث عن قائمة كبيرة من الإضافات، وتثبيتها، وضبط إعداداتها، للحصول على الميّزات التي يقدِّمها الووردبريس على طبق من ذهب للمستخدِم، ومن الأمثلة على هذه الميزات التي تُعَدّ أساسيةً في الووردبريس: التعليقات، وموجزات الأخبار، والتنقيحات…إلخ. في حين تعتمد الأنظمة الأخرى على مبرمجين لإيجاد تلك الميزات من خلال كتابة الكود الخاص بها من الصفر، وبهذا يتولد سؤال مهم، وهو: لماذا نعيد اختراع العجلة في حين أنه يمكننا الحصول على أفضل عجلة في العالم؟ نظام مفتوح المصدر وشفافية عالية بُنِيَ نظام الووردبريس بتعاونٍ بين خبراء من المطوِّرين المحترِفين، والأكاديميين، والهواة. حيث أُصدِر نظام مفتوح المصدر للجميع، ليبني كل شخص عليه أو يُحسّنه وفقًا لاحتياجاته. ويميز النظام التطوير المتواصل، والذي يُبرز حقيقة أنّ التحديثات دورية، مما يجعله مواكبًا للتطور، وقد أُجرِيَ كل ما سبق دون أي رسوم ترخيص أو كُلفَةٍ مباشرة، وبدعم مهني واسع النطاق من المجتمع الدولي الموجود في كل مكان. إنها بياناتك تُقيِّد بعض أنظمة إدارة المحتوى نوع البيانات التي يمكنك جلبها وتشغيلها على المنصة، في حين يعمل نظام الووردبريس وفق معايير مفتوحة تمكنك من جلب البيانات بأي شكل كان، كما يُوفّر أدوات لجلبها من مصادرها المتعددة. ويمتلك نظام الووردبريس في الوقت الحالي، الأدوات اللازمة لجلب البيانات الخاصة بالمستخدِم من أي نظام إدارة محتوى كان يعمل عليه سابقًا، مثل: b2، وBlogger، وGreymatter، وTextpattern، وMovable Type. وحاليًّا، يُعمَل على زيادة الدعم في المنصة لتستطيع التعامل مع منصات أخرى، مثل: Nucleus، وpMachine. إنه نظامك صُمِّم النظام ليعمل على خادم الويب الخاص بك، أو حتى على السحابة، أو على أي استضافة. ويعطي النظام حق التحكم الكامل بكل شيء، على عكس الأنظمة التجارية أو خدمات الاستضافة من الطرف الثالث، ويمنح هذا شعورًا بالثقة أنه بإمكانك الوصول إلى ما تريده في موقعك وتعديله كما تريد. وعمومًا، يمكنك تثبيت نظام الووردبريس على حاسبك الشخصي أو أي شبكة شركة داخلية. إدارة موقع أو مليون موقع يوفِر النظام تقنية تعدُّد المواقع. هذه الآليّة ذاتها مستخدَمة في أكثر من عشرين مليون موقع على WordPress.com، ومواقع عالميّة، مثل: CNN، وNew York Times. حيث تتيح آلية تعدُّد المواقع للمستخدِمين التحكم الكامل بمواقِعهم الخاصة دون أي قيود أمنية، كما يملك كل موقع قوالب وإضافات خاصة به، ويدير مستخدِميه دون المساس بالمواقع الأخرى في النظام نفسه، إلى جانب تطبيق سياسات نطاق الشبكة والتحديثات الأمنيّة على جميع المواقع دفعةً واحدة، وبنقرة واحدة. إنشاء صفحات ديناميكية لست بحاجة لإعادة بناء صفحاتك بعد كلّ عمليّة إضافة جديدة على موقعك، أو بعد التعديل على موضوعٍ سابق، حيث تتولّد جميع الصفحات في كلّ مرةٍ يطلب فيها المشاهد صفحةً من موقعك، وذلك باستخدام قاعدة بياناتٍ وقوالب، وهذا يعني أنّ تصميم موقعك أو تحديثه، سيكون أسرع ما يمكن، كما سيُوفِّر أكبر مساحةٍ من التخزين. قالب يتحكم بالتصميم يُنشِئ نظام الووردبريس الصفحات تلقائيًّا باستخدام القوالب، ويمكنك التحكم في عرض المحتوى من خلال تعديل القوالب باستخدام المحرر الذي تفضله، أو عن طريق بيئة التطوير المتكاملة IDE، كما يمكنك أيضًا عن طريق المحرر الموجود في النظام بصفة أساسية. وتُسهِّل وسوم القالب Template tags تصميم المحتوى، والمعلومات المعروضة على موقعك، وبالتالي ليس هناك حاجة لتكون خبيرًا وبارعًا بلغة البرمجة PHP لجعل تصميم موقعك مطابِقًا لرؤيتك. نظام متكامل ومحترم لمحتوى آمن ومضمون موقعك هو قلعتك يمتلك نظام الووردبريس ثماني سنوات من الخبرة المتراكمة بإدارة المواقع بثباتٍ وأمان، حيث تُكتشَفت الثغرات بسرعة كبيرة وذلك بفضل مجتمع المستخدِمين الكبير، والتقنيين المهتمين بالنظم مفتوحة المصدر، ثم تُصحَّح تلك الثغرات وتُكتب بما يسمى بالترقيعات patches، ليُرسِلها الفريق الأمني بتحديث يضاف إلى النظام. يأتي نظام الووردبريس بنظام التحديث الأساسي المدمج integrated core-update system، مما يساعد على إطلاق الترقيعات بنقرة زرّ واحدة. ولتحقيق الأمان، يُرشِّح النظام جميع مدخلات المستخدِم، ويُقيّد الوصول لعناوين الويب، ويملك نظامًا متكاملًا لمنح الأذونات، ولا يخزِّن كلمات المرور دون تشفير، وذلك لحمايتها من السرقة. ويستخدِم الووردبريس أكثر من عشرين مليون مستخدِم في WordPress.com، إصدارات اختبار بيتّا Beta test releases قبل إطلاقها رسميًّا، مما يعطي المُستخدِمين الآخرين الثقة بأن النظام مستقر . واجهات برمجة التطبيقات واسعة يعتمد لُبّ النظام على واجهة برمجة تطبيقات API الخاصّة به، والمعروفة باسم "dogfooding"، مما يساعد المطوِّرين على تحوير وتخصيص التطبيق ليتلاءم مع متطلباتهم. ويمكن تعديل العديد من الخصائص الأساسية في الووردبريس من خلال مرشحات filters وخطافات hooks يصنعها المطوِّر. وبالتالي، تمنح هذه الواجهات لووردبريس القدرة على التلاؤم مع النظم الموجودة، وهي ضرورية في البيئات الغنية بـالمداخن stove-pipe، والتي تملك عدة مهام، بحيث يعمل كلّ منها باستقلالية، ويؤدي وظيفةً معينة لحل مشكلة محدَّدة؛ كما تحتوي على بيانات خاصة بالمستخدِمين لا يمكن أن تكون مشتركةً مع أنظمة أخرى مناسب للشركات يُعَدّ أي تحدي قد تواجهه الشركة فرصةً لمعرفة إن واجه شخص آخر هذه المشكلات من قبل، وكتب حلًّا برمجيًّا لها. عُدِّل النظام ليتلاءم مع العديد من البيئات المختلفة، ممّا منحه خياراتٍ واسعة للتعامل مع المؤسَّسات، وتوفير آلية للمصادقة، وإدارة المستخدِمين، والحفاظ على سير العمل بكفاءة، والاحتفاظ بنُسخ احتياطية مجدوَلة؛ وهذه الخيارات هي جزء من الخيارات المتعلقة بالمؤسسات في النظام. التوافق هل أنت بحاجة لربط نظام الووردبريس بنظام آخر؟ يستخدِم نظام الووردبريس تقنيات تسمح للأنظمة المختلفة بالتواصل فيما بينها، مثل: المعايير المفتوحة للغة الترميز الممتدة XML، وXML-RPC. فقد صممت XML-RPC لتكون بسيطة قدر الإمكان، وقادرة على أداء المهام الصعبة والمعقدة في الوقت نفسه. ويدعم النظام أيضًا مجموعةً واسعةً من الواجهات البرمجية، مثل: MovableType، وMetaWeblog API، وBlogger API، بالإضافة إلى أنه بإمكانك استخدام المنصات المبنية على منصات أخرى، مثل: منصّة زيمبت Zempt المبنية على منصة Moveable Type. عملية صيانة بسيطة تُعدّ عمليتي التثبيت والتحديث في نظام الووردبريس من أسهل العمليات على الإطلاق، حيث يمكنك إنهاء التثبيت خلال خمس دقائق وبنقرة واحدة، وستعلم عند استخدامك للنظام أنك تستعمل أفضل وأسهل نظام، وتتساءل لماذا كل البرامج ليست بهذه البساطة. التوافق مع المعايير قطع فريق النظام شوطًا طويلًا للتأكد من توافُق كل الكود البرمجي مع معايير قياسيّة لرابطة شبكة الويب العالمية W3C، وتُعَدّ أهمية ما سبق، ليس التحقق من التوافق مع المتصفحات الحالية فقط، وإنما ليتلاءم مع أدوات الجيل القادم من المتصفحات. أكثر من مجرد مدونة بل أكثر بكثير كل من يقول أنّ نظام الووردبريس عبارة فقط عن منصة تدوين، يؤكِّد تمامًا أنه لم يتابع النمو المتفجر لنظم إدارة المحتوى خلال العامين الماضيين؛ وقوله هذا أشبه بقول أنّ شركة بي إم دبليو BMW مجرد شركة لصناعة المراوح. وفي الواقع أغلب استخدامات الووردبريس لم تكن في التدوين، وبإمكان الووردبريس تحويل حلمك إلى حقيقة، من خلال الدعم الداخلي لأشكال متنوعة من المنشورات، والتحكم بالتصنيفات. انشر افكارك على أوسع نطاق الموجزات يدعم الووردبريس كل من التقنيات: ATOM، وRSS 1.0، وRSS 2.0، وهذه التقنيات مستَعمَلة للحصول على الأخبار والمعلومات من المواقع تلقائيًّا دون الحاجة إلى زيارة المواقع التي استُمِدّت منها هذه المعلومات، حيث تمتلك كل صفحة في موقعك موجزًا يمكن للقُرّاء الاشتراك به، كما تمتلك موجزًا بأحدث المنشورات في المدونة، والتصنيفات، والتعليقات، ولأي شيءٍ تريده. وكلما زادت الخيارات المتاحة للقُرّاء لتتبُّع الأقسام المختلفة من موقعك، كلما كانت عملية نشر أفكارك حول العالم أسهل. وبدعم ووردبريس الكامل لتقنية RSS 2.0 ستتمكن من إضافة المقاطع الصوتية podcasts بسرعة. التواصل بين المواقع يأتي نظام الووردبريس مُجهزًا بأحدث تقنيات الاتصال بين المواقع وهي PingBack، وTrackBack. وكمثال على ذلك، إذا كتب أحمد مقالةً ما، واستضاف محمد هذه المقالة على موقعه، -والتي حصل عليها مثلًا من RSS-، وعلّق شخص ما على تلك المقالة من مدونة محمد، فسيصل تنبيه لأحمد، ليُعلمه بذلك التعليق، وذلك لأنه صاحب المقالة. كما يدعم النظام أداة Ping-O-Matic والتي تعمل على زيادة نسبة ظهور موقعك في محركات البحث. تنمية مجتمع المدونة بناء المجتمع نظام الووردبريس ليس جمعيةً عامة، وإنما يعمل على بناء مجتمعات حول المواقع من خلال التعليقات، والربط باستخدام تقنيتي PingBacks، وTrackBacks اللتان تُستَعملان لربط الأحداث بين المواقع المختلفة، ومساعدتك لتبقى على تواصل مع الجمهور، وتعزيز الصداقات. التعليقات يترك زوار الموقع تعليقاتهم إما من داخل موقعك أو من مواقعهم من خلال تقنيتيّ PingBacks، وTrackBacks، ويمكنك تفعيل أو تعطيل التعليقات لكل منشور. الحماية من الرسائل المزعجة يملك الووردبريس أدوات قويةً لتوفير جدار الحماية، مثل: القائمة السوداء المدمجة integrated blacklist، ومدقِّق البروكسي المفتوح open proxy checker، وذلك لإدارة وحذف التعليقات المزعجة على المدونة. وهناك سلسلة طويلة من الإضافات التي بإمكانها الارتقاء بالمدونة في هذا الجانب. نظام تسجيل كامل للمستخدمين يمتلك الووردبريس نظام تسجيل داخلي للمستخدِمين، حيث يمكنك تفعيله والسماح للمستخدِمين بتعديل ملفاتهم الشخصية، وإضافة تعليقات موثوقة في مدونتك، ويمكنك إيقاف التعليقات أمام المستخدِمين غير المسجَّلين. وهناك ملحقات تحجب المنشورات عن المستخدِمين ذوي المستوى الأدنى في النظام. وسوم لغة HTML المسموح بها ليس كل الأشخاص سيئين، لكن يجب الحذر من أولئك السيّئين في موقعك، وذلك من خلال تحديد وسوم لغة HTML المسموح بها في موقعك. والوسوم الافتراضيّ المسموح بها في الووردبريس خيار عاقل للسماح باستخدام لغة HTML في التعليقات دون المساس بسلامة البيانات أو الاستضافة. الأذونات يوفر النظام مجموعةً من الأدوات الإدارية التي تُبقِي المزعجين والمخرّبين تحت الضبط والمراقبة، حيث تمكنك من إدارة كل مما يأتي: التعليقات قبل نشرها على المدونة. التعليقات التي تحتوي على كلمات ميّنة حُدِّدت مسبقًا. التعليقات التي نُشِرت من عناوين بروتوكول الإنترنت IP addresses محددة سابقًا. التعليقات التي تحتوي على أكثر من العدد المسموح به من الروابط. التنبيهات يُبقِي نظام الووردبريس مديري المدونات على اطلاع دائم بالتعليقات الجديدة، والتعليقات التي تحتاج لإذن، حيث يرسِل التنبيهات إلى البريد الإلكتروني. الترخيص وبيئة التشغيل والفلسفة العامة للنظام الترخيص نظام الووردبريس مرخص تحت رخصة جنو العمومية ذات الإصدار الثاني GPLV2، أو الإصدار الأحدث، والتي تعطي المستخدِم سلسلةً من الحريات، وهي: حرية تشغيل البرنامج لأي هدف كان. حرية دراسة آلية عمل البرنامج، وتحويره لأهداف خاصة. حرية إعادة التوزيع. حرية توزيع نُِسخ من نسختك المعدَّلة من النظام. بيئة التشغيل صُمِّم الووردبريس بلغة PHP إصدار 7.2، أو الإصدار الأحدث، وبقواعد بيانات MySQL إصدار 5.6، أو الإصدار الأحدث، ووحدة إعادة كتابة العناوين mod_rewrite الموجودة في خادم الويب Apache. فلسفة النظام طُوِّر نظام الووردبريس اعتمادًا على مجموعة من المبادئ الثابتة، وهي: الإبداع. التصميم للجميع. يعتمد على القرار المناسب وليس هناك تقيد بالخيارات. نظيف، ومتكامل، وسلس. المحافظة على البساطة. المواعيد النهائية ليست عشوائية. الإنصات للطلبات ذات الجمهور القليل. يمتلك النظام وثيقة الحقوق. ترجمة -وبتصرّف- للمقال WordPress Features من موقع WordPress.org