Mohamad Ibrahim3

يمكن أن يكون العمل مع مصممي الويب عملًا يشوبه بعض التعقيد، خاصة إن لم يتمّ التعامل مع مصمم ويب من قَبل، وعليه ستقدّم لك هذه القائمة من النصائح أفضل السُبل في بناء علاقة مثاليّة بينك كعميل وبين مصمم الويب. كنت أفكّر مطوّلًا مؤخرًا حول طبيعة العلاقة مع العملاء الذين أتعامل معهم في أحد شركات التصميم، محاولًا تحديد السبب الذي يجعل بعض المشاريع تعمل بسلاسة ويسر على خلاف أخرى، الأمر الذي يُنتج مواقع أكثر احترافية بطبيعة الحال، وتوصلت في نهاية الأمر إلى أن سبب الاختلاف يعود غالبًا إلى طبيعة العلاقة والتواصل بين المصمم والعميل. يوجد من دون شك مهارة في الحصول على أفضل النتائج من مصممي الويب، وعليه فكّرت في مشاركة بعض الأفكار والحيل من خلال هذا المقال وعلى شكل قائمة من عشرة نصائح مستخلصة من واقع التجربة والخبرة. 1. لا تستعجل التصميم أصبحت مشاريع الويب بشكل متزايد مقيّدة إما بالميزانية المحدودة أو بالمهلة المحدّدة لإتمام المشروع، وهذا الأمر من شأنه أن يؤثّر على جودة العمل التي ستحصل عليها من مصمم الويب، فالمنتج عالي الجودة يتطلّب وقتًا، ولا يُحصر هذا الوقت في العمل الفعلي الإجرائي على المشروع، حيث يحتاج مصمم الويب وقتًا للتفكير حول الطرق المختلفة المتاحة، واختيار أنسبها بما في ذلك الأدوات المطلوبة، بمعنى آخر كلما أفسحت المجال للمصمم، كلما زادت جودة العمل. أنا لا أقلّل من العمل الإجرائي الخاص بالتصميم، فلن يخرج التصميم بأبهى حلّة بدونه، والشيفرة التي خلف الستار ستفشل ولن تدوم طويلًا قبل أن تظهر المشاكل والعلل البرمجيّة فيها. 1. تابع سير عملية التصميم على مراحل يميل مصممو الويب إلى العمل بنوع من الكتمان عند يتعلّق الأمر بتصميم الموقع، حيث يحبّذون العمل على التصميم إلى حين الانتهاء منه، ولا يتحدّثون عن التصميم وحيثياته مع عملائهم حتى هذه المرحلة، للأسف يقود هذا الأسلوب إلى مشاكل لا يُحمد عقباها في الأغلب. إن لم يفهم مصمم الويب لأي سبب كان الاتفاق الأوّلي الذي أجراه مع عميله، فمن الممكن جدًا أن يقضي أيامًا إن لم أقل أسابيع يغرّد خارج السرب ويعمل على تصميم غير ملائم بالمرّة للمتطلّبات العميل، وما يزيد الطين بلّة أن المصمم سيكون راضيًا عن التصميم عند هذه النقطة ومقتنع بإتمامه المهمة الموكلة إليه على أكمل وجه، فمن وجهة نظره هذا هو الحلّ والتصميم المطلوب، وهو لا يستطيع ولن يرضى بإضاعة وقته في التعديل أو التنقيح، وسيقود هذا الأمر الطرفين إلى خلاف. يوجد أسلوب أفضل للتعامل، وهو عبر متابعة العمل مع مصمم الويب من البداية ومنذ اللحظة الأولى، يجب عليك رؤية المسودة الأولى التصميم، والإطارات الهيكليّة، وسيؤكّد هذا الأمر أن التصميم النهائي قد تمت الموافقة عليك من قِبل الطرفين، لأن كلا الطرفين ساهما في خروج هذا التصميم ليرى النور، ومنذ المراحل الأولى في إنشائه. 3. قم بالاختبار عند الحيرة أو الشك ستختلف أنت ومصمم الويب على بعض الجزئيات لا مناص من ذلك، وعلى الرغم أن مصممي الويب هم الخبراء هنا وأصحاب النظرة التصميمية الأقوى إلا أنهم ليسوا معصومين عن الخطأ، خاصة وأنه عليك أن تكون واثقًا من التصميم بالقدر الكافي لتعتمده تصميمًا للموقع. إن كان الشك يعتريك فيما إذا كان المصمم على حق في نصحه أم لا، فمن المستحسن اختبار التصميم، فمن غير المناسب تجاهل وجهة نظر المصمم، فمن المحتمل جدًا أن تكون وجهة نظرك هي الخاطئة، بدلًا من ذلك اختبر التصميم مع مستخدمين حقيقيين لتحصل على رأيٍ حياديٍ وموضوعي. 4. لا تطلب أكثر من نموذج للتصميم يصرّ بعض العملاء على الحصول عل أكثر من نموذج للتصميم في بداية المشروع، بهدف أن يكون لديهم أكثر من خيار لتصميم الموقع النهائي، وبجانب ما أسلفت حول وجوب متابعة التصميم أوّل بأوّل، فإن فكرة العمل على أكثر من تصميم من الأساس تشوبها شائبة ولا تعطي نتائج مرضية لكلا الطرفين. تكمن المشكلة مع التصّورات المتعدّدة للتصميم أنها حتمًا ستقود إلى تصميم مقيت، بمعنى آخر، عندما يتمّ عرض أكثر من تصميم عليك كعميل صاحب القرار النهائي، فسترى حتمًا عناصر تعجبك من كل تصميم، وفي معظم الأحيان يقود هذا الأمر إلى اختيار أجزاء من التصميمين لتكون في التصميم النهائي، ولكن وكما سيخبرك أي مصمم أنّه لا يمكنك جمع عناصر أو أجزاء من تصميمين مختلفين بسهولة ويُسر، وما سيؤول إليه الأمر في النهاية الخروج بتصميم هو أبعد ما يكون عن الإبداعية والجمالية التي كنت تتمناها. اتبع بدلًا من ذلك نصيحتي السابقة وذلك بالعمل جنبًا إلى جنب مع المصمم للوصول بالتصميم إلى بر الأمان. 5. وضح رؤية التصميم قبل عرضه على أحدهم يمكن أن يكون التقرير في الشكل النهائي للموقع أمرًا ليس بالهين خاصّة إن كانت هذه تجربتك الأولى، فغالبًا ستقوم باستشارة أحد الزملاء أو ربما صديق ما أو فرد من أفراد العائلة لتحصل على الرضا التام حول التصميم. على الرغم من أن الرغبة في عرض التصميم على عديد الأشخاص هو أمرٌ يمكنني تفهمه، ولكنه ليس من باب الحكمة فعل ذلك، فقدرتنا على الحكم على التصميم السيء أو الجيّد ستكون عبارة عن رأي شخصي لا غير، وتختلف هذه الآراء بين الآخرين بطبيعة الحال، وبدلًا من طمأنة نفسك في عرض التصميم على هذا وذاك سينتهي بك المطاف حيرانًا في التصميم أكثر من ذي قَبل. لا أنكر وجوب عرض التصميم على البعض، لا بأس في ذلك، ولكن على الأقل لا ترسل لهم التصميم وتطلب آراءهم فحسب، فلكي يستطيعوا تقديم رأيهم الموضوعي، عليهم أوّلًا فهم خلفية المشروع وكيف تمّ اتخاذ القرار وعلى أي أساس، فبدون هذه المعلومات كل ما يستطيعون تقديمه هو آرائهم الشخصية لا أكثر ولا أقل، وبطبيعة الحال هو مجرّد آراء شخصية لا تسمن ولا تغني من جوع. 6. تأكد من تحديد أهداف ومهمة الموقع التي سيمثلها التصميم مع المصمم قد تسوء الأمور حتى عند العمل بشكل متواصل وتعاوني مع المصمم، خاصة عندما يكون لكلٍ منكما وجهة نظر مختلفة عن الآخر بما يخص الهدف المنشود للتصميم النهائي، لهذا من المهم على جميع الأطراف أن تمتلك نظرة واضحة عن أهداف ومهمّة الموقع، وهذه الأهداف ستكون بمثابة الموجّه والمساعد في اتخاذ القرارات خلال مسيرة تطوير الموقع. 7. تأكد من أن الفئة المستهدفة محددة ومتفق عليها بين الطرفين حاول جاهدًا نقل الصورة الصحيحة عن مستخدمي الموقع المستهدفين إلى المصمم، وهنا يأتي دور المصمم في إجرائه اختبارات قابلية الاستخدام usability testing، لا بل الأفضل حضّ مصمم الويب على تطبيق اختبار قابلية الاستخدام على الفئة المستهدفة مباشرةً، وبهذه الطريقة سيعرف المصمم بالضَّبط ما هو المناسب وغير المناسب للفئة المستهدفة. سيقدّم مصمم الويب تصميمًا لا يمت بصلة بهدف ومهمّة الموقع عند عدم فهمه الفئة المستهدفة بالشكل الصحيح. يجب ملاحظة أمر مهمً مع ذلك، ليس فقط المصمم من هو بحاجة إلى فهم الفئة المستهدفة، أنت أيضًا، قد تعتقد أنك تعرف ذلك، ولكن إلا إذا كنت على تواصل مستمر ويومي مع المستخدمين، فمن الجدير الاطلاع على أي اختبار لقابلية استخدام usability testing ينفذه مصمم الويب، وقد تتفاجأ كيف يختلف المستخدمين عن الفكرة المبلورة والمتصوّرة عنهم. 8. لا تبالغ في العمل على التصميم توجد مشكلة شائعة في العديد من مشاريع التصميم وهي إفراط أصحابها في بذل أقصى ما في جهدهم على التصميم، وهذا شيء قد تعلّم أغلب مصممي الويب أن يتجنبوه بناءً على تجاربهم السابقة، ولكن ولأن معظم أصحاب المواقع ليس لديهم هذه المعرفة والخبرة ستجدهم يقعون في هذه الحفرة. نتّفق جميعًا أن التصميم هو أمر عائد للآراء الشخصيّة، بمعنى لن تستطيع بأي حالٍ من الأحوال الحصول على التصميم المثالي، ولكن رغبتك في تحقيق الكماليّة ستقودك من تحسين إلى تحسين آخر، ومن تعديل إلى تعديل آخر بغرض الحصول على أفضل تصميم، وهنا المشكلة، أنت لن تحصل على أفضل تصميم مهما حاولت، ربما تحصل على تصميم يعجبك أنت شخصيًا، ولكن لن تحصل على تصميم كامل متكامل ومُرضي للجميع فهذا هو المحال بعينه. توجد مشكلة أخرى مرتبطة بسابقتها، وهي اعتقاد أصحاب المواقع أن لديهم فرصة وحيدة للحصول على أفضل تصميم، وهذا ليس بالصحيح، بل في الواقع وفي معظم الأحيان إن أفضل طريقة لإيجاد ذلك التصميم المنشود هو عبر وضع التصميم تحت الاختبار الفعلي ليتفاعل معه المستخدمين مباشرةً، عندها يُمكن التنقيح والتحسين اعتمادًا على ردود فعل وآراء حقيقة بدلًا من الآراء الشخصيّة. 9. احرص على بناء علاقة مستمرة مع المصمم يكلّف معظم أصحاب المواقع مصممين لإعادة تصميم مواقعهم، ومن ثم يتوارون عن الأنظار، سيمنع هذا الأسلوب من تطوير الموقع بناءً على متطلّبات المستخدم، بدلًا من ذلك، يجب على أصحاب المواقع العمل على تحسين مواقعهم شهريًا، للحصول على جملة من التعديلات والتحسينات المتواترة والمتتابعة لتجنّب التعديلات الكبيرة والمكلفة. 10. ركز على المشكلة واترك الحل للمصمم أعتقد أنّه من المهم معرفة كل شخص دوره والتزام به بالضبط، فمهمّة أصحاب المواقع هي تحديد المشكلة، وحلّها يقع على عاتق المصممين. ولكن وفي العديد من الحالات الأمر ليس بهذه البساطة، حيث يُلاحظ صاحب الموقع مشكلة ما في الموقع (مثلًا عدم ملائمة لون الموقع مع الفئة المستهدفة) فيخبر العميل المصمم بضرورة التغيير (لنقل تغيير اللون من الوردي/الزهري إلى الأزرق)، ولكن مصمم الويب هنا غير مدرك لحقيقة المشكلة أو دواعيها، فكل ما يعرفه أن العميل يرغب باللون الأزرق، وبالتالي سيكون من شبه المستحيل على المصمم أن يقترح حلولًا بديلة، والتي قد تكون أفضل من تلك التي طلبها العميل، بمعنى آخر، أصبح صاحب الموقع المصمم، وأصبح المصمم مجرّد تقني يطبّق التصميم. يُقيّد هذا الأسلوب من موهبة المصمم من جهة، ويتلف العلاقة بين المصمم والعميل من جهة أخرى، فأصبح المصمم لا يلعب في أرض ملعبه التي يبرع فيها، وقد جُرّد من حقّه في الإبداع، وربما قد فقد الاهتمام في المشروع من الأساس. خاتمة ستزيد تطبيق هذه المقترحات بشكل ملحوظ من فعاليّة موقعك من خلال تحسين العلاقة بينك وبين المصمم، طبعًا هذه المقترحات ليست شاملة بطبيعة الحال، لذلك تنس مشاركة ما في جعبتك حول هذا الموضوع لتغطية ما غفل عنه المقال. ترجمة وبتصرّف للمقال 10tips for working with web designers لصاحبه Paul Boag.

استيقظت ذلك اليوم وبدأت بالتقلّب يمينًا وشمالًا، ومن ثم فتحت هاتفي ومباشرةً إلى بريدي الإلكتروني، "يا فتّاح يا رزاق". وبالتدرّج إلى أسفل القائمة واختيار مجلّد "المشتريات" بدأت بالانتظار: "جاري تحميل ستة رسائل"… "يا سلام يا سلام!". تَطلّبَ مني الأمر ستّة أشهر لأحصل على هذا العرض/السعر، وبعد أن قمنا بإرسال زهاء 70,000 رسالة إلى عملائنا، هذا ما أحصل عليه من مبيعات، ستة فقط! طيب، ماذا عن تعليقات العملاء: "ما هذه الأسعار الخرافيّة يا نصابين اتّقوا الله"، الوفي منهم وهو من الزبائن الدائمين لدينا خاطبنا على النحو التّالي: "خاب أملي بك يا نوح، حبّذا لو يكون السعر أفضل في المرات القادمة". بعد الإفطار، استكملت قراءة أحد الكتب التي كنت قد بدأت بها مؤخرًا، ومن ثم أنهيت تصفّح باقي الرسائل الإلكترونيّة. أدركت فيما بعد وبعد الظهيرة أني أشعر بالإحباط الشديد، حيث أنّي لا أطيق التفكير بالعمل أبدًا، لا بل لا اهتمام لي أبدًا بأي شيء له علاقة في AppSumo، ورغم أن فريق العمل كان يدردش في المجموعة الخاصّة بنا، إلا أني لم أرغب أبدًا بالتحدّث مع أحد. هل أصابك هذا الحال من قبل؟ تبادر الأمر إلى ذهني في الأسابيع القليلة اللاحقة، وكيف أن شعوري اليومي وحالتي النفسية تتقلّب مع أرقام المبيعات الخاصّة بنا، يا له من أسلوب حياة تعيس، لم يكن حالي على هذا المنوال من قبل، ولكن الآن أجد أن الدنيا اسودت في وجهي وتمر أيامي من دون أن أفعل أي شيء ذي نفع. هذه الحالة ليست بالحالة التي يمكن الكتابة عنها في تويتر أو فيس بوك، فهي ليست حالة عابرة لتستطيع تجنبها بالذهاب إلى المقهى أو إلى الحديقة أو أي مكان ترفيهي آخر. لماذا أنا مكتئب؟ حدثت هذه الكآبة لي من قبل، وذلك بعد أن وصلنا إلى ما نصبو إليه مع ألعاب الفيس بوك قبل سنوات قليلة مضت، ومن ثم تلاها انحدار مفاجئ، وفي ذلك الوقت قمت بتقييم ذاتي للعشرين السنة الأوّلى من حياتي وصحة الخيارات التي اتخذتها طوال تلك الفترة، وأبرز ما كنت أفكر فيه هو كيف انتهى بي المطاف في بناء تلك الألعاب السخيفة من أجل بعض المهووسين، كل هذا أبعدني كل البعد عن العمل. هل راودك هذا الشعور من قبل؟ غير متحمّس للقيام بأي شيء له علاقة بعملك الذي تحبه. هذه ليست سحابة صيف وتمر، لأن هذا النوع من الإحباط يُحل مع مرور الوقت، مع الاسترخاء والراحة، ولكن القصة مختلفة هنا، شعور خانق يجثو على الصدر ويثقل الكاهل. وما فاجئني أني عندما أخبرت صديقي المقرّب كيف أنّني بين الحين والآخر أُصاب بهذا الإحباط وكرهي لعملي، أجابني بأن هذه الحالة تصيبه أيضًا، ومن خلال حديثي مع باقي روّاد الأعمال وجدت أن هذا الشعور ليس فقط شائعًا بينهم، لا بل قد يكون مطلوبًا. ملاحظة من محرّر المقال الأصلي: من الجيّد رؤية نوح يقول كل هذا، لأنه من الأشخاص المعروفين بثقتهم بنفسهم وحبهم للتحدي والمغامرة وأخذ زمام المبادرة، بعبارة أخرى، هو آخر رجل على وجه المعمورة ستفكّر به على أنّه شخص كسول أو فاشل، وهو ليس من النوع الذي يترك الظروف تتحكم به، بل هو من يتحكم بالظروف. إن كان وحدث الأمر لنوح، فقد يحدث الأمر مع أي شخص آخر، ولذلك فإني أتعجّب من الناس الذين ينكرون شعورهم بهذا النوع من الإحباط، وأعتقد أنهم لم يصلوا إلى مرحلة من الثقة بالنفس تجعلهم مرتاحين في تقبّل أنفسهم والاعتراف بنقاط ضعفهم. حمدًا لله أني لم أكن الوحيد الذي يشعر بهذا الشعور، ورغم أني أعلم بأن هذا هو حال الحياة، وأن الحياة صعبة وتتطلّب العمل والجهد، لكن الحديث عن الأمر مختلف عن الخوض في ثناياه. وصلت إلى قناعة مؤخرًا، وهي أن رائد الأعمال الحقيقي والناجح هو الذي يستطيع التعامل مع الأوقات الحرجة والصعبة بكفاءة. اكتسبت بعض الخبرة بعد خوض هذه التجربة، والتي ساعدتني في التعامل مع هذه الإحباط والكآبة، وأرغب في مشاركتها ليستفيد منها الجميع: ابتعد قليلا استيقظت قبل أسابيع وأنا بحالة مزرية، كتب بعض الرسائل الإلكترونية ولكني لم أستطع متابعة النظر إلى شاشة الحاسب، عندها ذهب لممارسة الرياضة لبعض الوقت، عدت لأجد نفسي في ذات الشعور ولم أستطع العمل، بعدها قرّرت الذهاب للقاء بعض الأصدقاء، ولدى عودتي في اليوم التالي شعرت برغبة في العمل وتابعت عملت وتجنبت الغوص في كآبة اليوم السابق. فرق تسد عندما أشعر بالعسر أو اللامبالاة، أحاول تجربة فعل الأشياء على مراحل وأجزاء، ومن ثم أقيّم ما أشعر به بعد ذلك، حيث يعطيني هذا الأمر إحساسًا بأني قد أنجزت شيئًا ما ويحثني على المتابعة، طبعًا قد لا يُجدي هذا الأسلوب نفعًا دائمًا ولكن من المجدي تجربته. استعراض قائمة المهام يجب أن تمتلك قائمةً من المهام التي يجب إنجازها في كل يوم، فخلال أيام العمل أشعر في بعض الأحيان بعدم الارتياح حول مجريات سير العمل، وكان ذلك يؤثّر بشكل مباشر على حالتي النفسية وبالتالي على مستوى الإنتاجيّة، ولكن مع وجود قائمة بالأشياء التي فعلتها في ذلك اليوم ورؤيتها مكتملة، قلّل هذا الأمر من الإحباط الذي كاد أن يقتل اليوم. العوائق ما أدركته أنّه في بعض الأوقات ما يمنعني من العمل هو وجود مهمّة واحدة تقع كالحاجز تمنعني من القيام بأي شيء آخر، فبدلًا من تشتيت نفسي باستعراض البريد الإلكتروني أو مواقع التواصل الاجتماعي محاولًا تجنّب المشكلة، حاولت معالجة هذه المهمّة بشكل مباشر وبإصرار، وبالفعل كانت النتائج طيبة، وفي معظم الأحيان كان بمقتضى أن المهمّة بالأساس لا تتعلّق بجوهر وصميم عملي. فمثلًا، لم أرغب في التعامل مع الضرائب في سنة 2010 وما يتعلّق بها، فقد كانت معقّدة، بالإضافة إلى أني كنت وحيدًا في الشركة قبل التوسّع، في نهاية المطاف نصحني أحد المرشدين بتوظيف محاسب خاص بالضرائب لإتمام هذه المهمة، وعليه حلّت المشكلة وزال الضغط وارتاحت نفسيتي. استعن بمرشد عرّفني أحد الأصدقاء ("مارك" وهو من روّاد الأعمال) على مرشدة قدّمت له العون والمساعدة من خلال تقديم آراء موضوعية صبّت في مصلحة عمله، وبالفعل هذا ما كان، حيث أنها ساعدتني بشكل فاق تصوّري من خلال الحديث عن نفسيتي ومشاكل العمل والإجراءات التي من الممكن أن اتخذها في سبيل تطوير شركتي. معرفة سبب وأصل المشكلة لماذا شعور الكآبة والكسل؟ ما هو أصل المشكلة؟ يجب الإجابة بشكل مباشر على هذا السؤال، فبالنسبة لي، كان يصيبني هذا الشعور من أرقام المبيعات اليومية الخاصّة بشركتنا، وما ساعدني على الحد من هذا الشعور هو معرفة ما الذي أدى إلى تدني الأرقام، والكتابة عن الأمر من أجل المرات القادمة، ليس هذا فقط بل أصبحت أركز على الأرقام والرسوم البيانية الإيجابية بدلًا من الغرق في بحرٍ من الأحزان مع الأرقام السلبية. المرشدون أصبح للمرشدين دور فعال في الشركة ولا يمكن الاستغناء عنهم، ولم يقتصر الأمر على مستوى الشركة، بل ساعدوني شخصيًا في الحفاظ على سلامتي العقلية، وهذا شيء قد لا يتحدّث عنه الناس بالقدر الكافي، ففي مشاريعي السابقة، كان لدينا مرشد وكان من المحترمين في عملهم، ولكنّي لم أتمكن من إيجاد الوقت لتحدّث معه. إن كنت تبحث عن مرشد، إليك بعض النصائح التي يجب أخذها بعين الاعتبار: اسأل الأشخاص الذي تحترمهم وتُعجب بهم واطلب مساعدتهم، فهذا ما قدّمه لي "مارك" عندما زكّا لي تلك المرشدة والتي كانت خير ناصحٍ لي، فمن الصعب الحصول على الاهتمام والمساعدة من أي شخص، ولكن من السهل الحصول على النصيحة المناسبة من أُناسٍ يعيشون ويجنون قوت يوميهم من تقديم النصائح والإرشادات. تأكّد من أن الشخص الذي سيساعدك يملك الوقت الكافي لك ولمشاكلك. جِدْ الأشخاص الذين يمكن لك أن تقدّم لهم شيئًا مقابل مساعدتهم لك، قد يبدو ذلك غريبًا، ولكن عليك أن تتأكد من أنهم سيحصلون على شيء ما في المقابل، أي يجب أن تكون العلاقة متبادلة وقائمة على منفعة للطرفين. المحرّر: ما أشار إليه نوح نقطة في غاية الأهمية، وكثيرًا ما أجد العديد يرتكب هذا الخطأ، حيث يقوم أحدهم بإرسال رسالة لي من دون سابق إنذار يطلب النصيحة، قد أبدو جحودًا بعض الشيء ولكن ما مصلحتي، وما الذي سأجنيه بالمقابل، ولا أقصد المال هنا طبعًا، على الأقل ليكن السؤال سؤالًا فريدًا، سؤالًا لم يجب عنه الجميع في الإنترنت، سؤالًا لم أجب عنه في مدونتي، سؤالًا يكون من الممتع الإجابة عنه. جرّب واختبر، ليس بالضرورة أن يكون الشخص الناصح عارف بخفايا عملك، المهم على هذا الشخص أن يفهمك، تحدّث معه مرّة أو مرتين لترى كيف ستشعر بعد هذا الحديث، لا تبالغ في عدد المقابلات، حيث أن لقاءً واحدًا سيكون كفيلًا لأخذ فكرة مناسبة. امتلك هدفًا واضحًا عند السؤال، فمن الرائع أن يقدم المرشد النصيحة التي لم تدرك وجودها بنفسك، ولكنه من الجيد أيضًا لو نبعت هذه النصيحة من قضايا وأمور محددة، بمعنى آخر، من الأفضل على النصائح والإرشادات أن تحل مشاكل تعانيها بالفعل بدل أن تكون نصائح عامّة. المحرّر: أيضًا هذه نقطة هامة للرسائل الفاترة، فمن السهل مساعدة شخص ما قادر على التواصل بأقل الجمل والكلمات لشرح مشكلته وما هو بالضَّبط مراده، فغالبًا سيكون من السريع والسهل إما تقديم النصيحة أو الإشارة له إلى بداية الطريق، أو حتى الدفع به نحو الأسئلة التي يجب أن تُسأل. البارحة وقُبيل الانتهاء من كتابة هذه المقالة كنت أشعر ببعض العُسر، حيث كنت أجد صعوبة في التركيز، لذا ما كان مني سوى مغادرة المكتب، ركضت بعض الشيء، ومن ثم تحدّثت مع أحد المرشدين، وأخيرًا أنهيت يومي بعشاءٍ فاخر مع خطيبتي. أظن أن ما أحاول قوله هو أنّه لا مهرب من ضغوطات العمل، ولكن من الحكمة تجهيز نفسك إلى هذه المواقف والعقبات والأوقات العصيبة، والتي ستنال منك لا محالة، وقد يكون من الصعب التحدّث عن مشاكلنا النفسية، وهو أمرٌ أستطيع تفهمه تمامًا، ولكن ما رأيك بتحدّي نفسك، ما هو أسوء شيء من الممكن أن يحدث؟ روّح عن نفسك ولو بتعليق. ترجمة -وبتصرّف- للمقال Fighting micro-burn-out لصاحبه JASON COHEN. حقوق الصورة البارزة: Designed by Freepik.

أصبح من المعروف أهمية العناوين (URLs) في تهيئة المواقع لمُحركات البحث SEO، ولكن ماذا عن تأثيرها على تحليل المواقع analytics؟ وهل يجب الاهتمام بها؟ ولماذا؟ هذا ما سيجيب عنه المقال. كنت أراجع أحد الملخصات التحليلية والتي قد كنت قمت بها منذ فترة، ما لفت نظري أن حصولي على نتائج وتقارير مُجدية كان من قبيل الصُدفة ولم أعد له بشكل جيّد، بعبارة أخرى، إن كانت بنية روابط الصّفحات URL قد نُفّذت بطريقة منطقيّة لكان الحصول على هذه النتائج أسهل بكثير. مثال حول أهمية بنية الروابط مع تحليل المواقع Analytics سأقوم بتوضيح الفكرة بمثال، لنفرض أنه لدينا موقع لشركة استشارية (أو شركة خدمات) والتي تعتمد بشكل أساسي على خبرة كل فرد من الأفراد في مجاله، ومن أهداف الموقع الرّئيسية هي تسهيل مهمة الزّائر في معرفة الأشخاص المُناسبين ضمن الفريق ممن يستطيع تقديم المُساعدة أو الخدمة التي يبحث عنها. بعض الأشخاص في الشركة شهيرون جدًا في مجالات تخصّصاتهم، لذلك سيصل بعض المستخدمين إلى الموقع عن طريق البحث عن أسمائهم على مُحرّكات البحث، أما باقي أفراد الشّركة فيصل الزّوار إلى صفحاتهم عبر تصفّح مُختلف صفحات الموقع. يأتي الزّوّار إلى الموقع لأسباب عديدة، وليس فقط بغرض البحث عن بيانات حول أعضاء الفريق، ومن أجل ذلك كان المطلوب إنشاء شريحة تحليلية باستخدام Google Analytics، والتي ستُحدّد المستخدمين الذين يبحثون عن أفراد الفريق (الأشخاص)، حيث كان المطلوب استقصاء صفات وميزات هؤلاء الزوّار لتحسين تجربتهم في استخدام الموقع. إن الشريحة segment ما هي إلّا مجموعة جزئية subset من البيانات، والتي توافق معايير معيّنة، وعليه كيف لنا أن نُحدّد هذه المجموعة الجزئية في Google Analytics؟ كيفية إعداد شريحة في Google Analytics الخطوة الأولى: تحديد الصفحات تحديد جميع الصفحات التي تمثل أية زيارة لها إشارة على أن الزائر يَقع ضمن الشريحة التي أتت إلى الموقع بحثًا عن أحد أعضاء الفريق (والتي ستعرّف لاحقًا) وهذه الصفحات هي التالية: صفحة الفريق الرئيسية People، والتي تتضمّن صندوق بحث، وروابط لصفحات تعرض الأشخاص بحسب الترتيب الأبجدي، وجميع هذه الروابط تشترك في الجزء المُتمثل في example.com/people/ (أي أن جميع هذه الرّوابط تحتوي هذا الجزء ضمنها). تملك صفحات التدريب المتخصّصة بالشركة صفحة فرعية تعرض الأشخاص المتخصصين في هذا المجال، جميع هذه الصفحات تحت المسار /services/، وتحتوي سجلّات الأشخاص هذه على detail=people& في آخر العنوان URL، وبالتالي هذا يُسهّل من عملية إضافتها إلى الشريحة، ولو كان العنوان على الشكل /services/servicename/ كان سيكون الأمر أفضل مع محركات البحث SEO وأوضح في القراءة للمستخدم. صفحات الملف الشخصي profile لكل شخص، وهنا نواجه مُشكلًا، حيث أن هذه المسارات/العناوين URLs تكون على الشكل example.com/name_of_the_user/ وهي صفحات هامّة تُحيل إليها محركات البحث، لذلك لا يمكن تجاهلها في تعريف الشريحة، ولكن يوجد عدد كبير من الأشخاص ليتم إضافتهم بشكل يدوي وصريح، إذًا نحتاج شيئًا يميّز هذه الصفحات عن غيرها، وهذا ما كان، حيث أن عناوين titles هذه الصفحات هي من الشكل "User Name | People |"، وعليه يمكن استخدام هذه العناوين في تعريف الشريحة. الخطوة الثانية: استخدام Google Analytics لإنشاء الشريحة سيتمّ اختيار "إضافة شريحة" من صفحة "إعداد التقارير"، ومنها اختيار "شريحة جديدة"، واختيار اسم مُناسب لها في "اسم الشريحة"، وليكن "الباحثون عن أشخاص" (People seeker). سيتمّ بعد ذلك إضافة المعايير التي من شأنها تحديد الزيارة في الشريحة، فعندما يزور المستخدم واحدة من صفحات التي تحتوي في مسارها URL على /people/ أو detail=people& أو الصفحات التي تحتوي في عنوانها على "| People |" ستكون هذه الصفحة مطابقة لتعريف الشريحة، ولذلك تمّ استخدام أو لجمع المعايير الثلاث، أي أحد هذه الشروط الثلاث سيُجّل من ضمن الشريحة. يُلاحظ كيف تمّ استخدام "عنوان الصفحة" (المعيار الثالث) لاختيار صفحات الملفّ الشخصي لكل شخص. تصميم أفضل يؤدي إلى تحليل أفضل تمّ استكمال المثال السابق عبر استخدام "عنوان الصفحة" كمعيار في تعريف الشريحة، وهذا الأسلوب قد لا ينجح دائمًا، فمن المحتمل جدًا ورود "people" في عناوين باقي الصفحات فمن الضروري وجود اختلاف ولو بسيط مثل "|" لتمييز هذه الصفحات عن بعضها، وإلا فلا يوجد طريقة لتمييز هذه الصفحات. يُهمل المطّورون الوسم title غالبًا، لذا قد يكون من غير الحكمة الاعتماد عليها كاستراتيجيّة في التحليل في المواقع المتوسطة والكبيرة، الأمر الذي يؤدي إلى نتائج غير دقيقة في التحليل. يُنصح من أجل ذلك بالتخطيط المسبق وفي مرحلة التطوير فعلى سبيل المثال، حال مثالنا السابق سيكون أفضل بكثير لو كان المسار URL على الشكل التّالي/people/name_of_the_user/، لكان من الممكن عندها ببساطة المطابقة باستخدام تعبير نمطي regular expression مثل /people/[a-zA-Z0-9]+/. خاتمة كما أسلفت سابقًا، إن بُنية المسار URL ليست من أجل محركات البحث فقط، فالاهتمام به والتخطيط له مسبقًا في مرحلة التطوير أمر حتمي ولا يُمكن تجاهله، وذلك من أجل الحصول على تحليل أفضل ونتائج دقيقة تُمثّل الواقع بالفعل. ترجمة -وبتصرّف- للمقال URL structures and analytics لصاحبه Chris Scott.

إن الهدف المنشود لأي موقع هو تلبية زوّاره الدعوة إلى الإجراء (call to action)، سواءً كانت الدعوة هي طلب سلعة/منتج، أو ملء نموذج ما (form)، أو حتى الاشتراك في النّشرة البريديّة، ويركّز معظم أصحاب المواقع على هذه الخطوة، ولكن ماذا عن الخطوة التي تلي تلك الدعوة؟ ما الذي سيحدث؟ وما مدى أهميتها؟ دعني أخبرك بأمر، إن المواضيع التي تتحدّث عن الدّعوة إلى الإجراء CTA هي من أكثر المواضيع اهتمامًا التي تجذب المسوّقين عامّةً، ولا عجب في ذلك في الحقيقية، فالدعوة إلى الإجراء CTA هو جوهر الصفحات والمواقع، ويُدرك معظمنا مدى أهميتها، وبالتأكيد سنعمل ما بوسعنا لجعلها فعّالة ومجدية قدر المستطاع، ولكن المشكلة أننا نشجّع الزوّار على اتخاذ الإجراء، ونهمل ما بعد الإجراء، وهذا هو محور وهدف هذا المقال. كن واضحا مع المستخدم في نجاح العملية أو فشلها هل سبق لك وكنت في أحد المواقع وطلبت سلعةً ما أو أرسلت معلومات نموذج (form) وتساءلت عن نجاح العمليّة أم لا؟ لا بدّ وأن حدث ذلك، حيث تَفشل معظم المواقع في التوضيح والتأكيد للمستخدم أو الزائر فيما إذا كان طلبه قد تمّ بالفعل أو لا. تأكّد من أن موقعك واضح في كل خطوة يخطوها المستخدم، وبيّن له ما الذي حدث وما الذي سيحدث، قد تبدو الأمور بسيطة وغير معقدة بالنسبة لك، ولكن الأفضل هو القيام باختبار الموقع مع مستخدم حقيقي للتأكّد من هذه البساطة التي تفترضها. وضّح موقع Panic للمستخدم استكمال الدعوة إلى الإجراء بوضوح ومن دون أي مجال لأي التباس من أي نوع. كن دقيقًا في كيفيّة تأكيدك لاستكمال العمليّة، فإرسال بريد إلكتروني ليس بالأمر الكافي، فقد لا يكون المستخدم يتابع بريده في الوقت الحالي، وعليه سيبقى حائرًا في أمره، ناهيك عن احتماليّة ضياع الرسالة بين الرسائل المُزعجة spam. يجب توضيح نجاح العملية حتى عندما تكون ضمن الموقع، خاصّة إن كانت الدعوة إلى الإجراء call to action ستستكمل بدون تحديث الصّفحة، فمن المحتمل جدًا أن يفوّت المستخدم التنبيه الذي يشير إلى استكمال العملية عند نقره على زر الدعوة إلى الإجراء، وعليه يجب أن يكون التنبيه في أقرب موضع ممكن لتفاعل المستخدم الأخير. معالجة الأخطاء إنّ أحد أبرز الأسباب التي تؤدي إلى فشل المستخدم في استكمال الدعوة إلى الإجراء call to action هو الصدام مع خطأ ما، وسواءً كان هو من سبّب هذا الخطأ أو كان السبب علّة ما في الموقع، سيبقى ذلك مضيعة كبيرة في التحويل. يجب عليك دائمًا الحرص على التقليل من الأخطاء قدر الإمكان، على سبيل المثال، إن كانت الدعوة إلى الإجراء CTA تتطلّب من المستخدم رمزه البريدي للمتابعة، فلا تجبره على إدخاله بصيغة معيّنة، قم بتحويل الرّمز البريدي إلى الصّيغة التي تريدها بعد أن تستقبلها، سيُساعد هذا الإجراء من التقليل من الأخطاء من دون شك. إن كان من الصعب تجنّب هذه الأخطاء، فيسّرها على المستخدم ولا تعسّرها، فعند ملئ نموذج، تأكّد من عدم إزالة المعلومات المدخلة لدى حدوث خطأ ما في الإدخال (يعني بعد أن تعيد تحميل الصّفحة وتُخبره بوجود أخطاء في مُدخلاته)، فأكثر ما قد يزعج المستخدم هو إعادة إدخال بياناته مرّة أخرى، وقد يحجمه هذا الأمر عن المتابعة. أخطاء 404 الأكثر شيوعًا، ومع ذلك فإن صفحات أخطاء 404 تهتم بالجمالية على حساب مساعدة المستخدم. اعرض على المستخدم حلًا بديلًا لاستكمال الدعوة إلى الإجراء CTA في حال مواجهته خطأ من أي نوع، ربما عبر التواصل المباشر هاتفيًا، أو إرسال رسالة إلكترونية، بمعنى آخر، افعل ما بوسعك لدفعه على المُضي قدمًا. أخيرًا، تأكّد من أن المستخدم يُدرك الخطأ، كما هو الأمر مع تنبيه الاستكمال الذي أسلفت الحديث عنه، فعلى التنبيه الذي يشير إلى حدوث الخطأ أن يكون ضمن المجال الذي ينظر إليه المستخدم حاليًا، في اختبار قابلية الاستخدام usability testing، دائمًا ما أرى العديد من المستخدمين تصيبهم الحيرة بسبب عدم تمكنهم من معرفة ما الذي حدث أو ما الذي أدى إلى حدوث المشكلة. الدعم والمساعدة إن استكمل الزائر الدعوة إلى الإجراء CTA بنجاح أو لا، من المهم له دائمًا الحصول على الدعم والمساعدة، حيث أرى أن أغلب المواقع تصعّب من مهمة الزوّار في التواصل معهم، وأفضل ما لديهم هو الأسئلة الشائعة FAQs، مواقع أخرى تحدّد التواصل من خلال البريد الإلكتروني، ولسوء الحظ، فالمستخدم نافذ الصبر ولا يرغب في الانتظار للحصول على رد. عندما قمنا ببناء أحد مواقع الأغذية من معلّبات وخلافه، أدركنا وجود فئة كبار السّن ولاحظنا أن لها أسئلة خاصة بها وترغب بالتحدّث مع شخص تفهم عليه ويفهم عليها، ولذلك وفّرنا جميع خيارات التواصل الممكنة. سيساعد عرض رقم الهاتف أو نظام محادثة مباشر المستخدم بشكل كبير في اتخاذ قراره في استكمال الدعوة إلى الإجراء CTA، فليس من مصلحتك أن يندم المستخدم على قراره. تجنب ندم المشتري هل سبق لك أن اشتريت شيئًا ما ومن ثم ندمت بعد ذلك؟ هل انتابك شعور أنك قد اتخذت القرار الخاطئ؟ يُشار إلى هذا الشعور بـِ "ندامة المُشتري" buyer’s remorse، ويحدث هذا الشعور عندما تتخذ قرارًا لا يمكنك الرجوع عنه بالسهل، أي أنك بعد أن اتخذت قرارات قمت بالتفكير مرة أخرى وأصابك شيء من الوسوسة حوله. ينتاب الزوّار هذا الشعور من دعوات الإجراء أيضًا، سواءً كان الإجراء عملية شراء أو تسليم البيانات الشخصية أو الاشتراك في القائمة البريدية، ويمكن حتى للأشياء الصغيرة أن تسبب هذا الشعور، ومن المحتمل أن تدفع المستخدم إلى إلغاء طلبه والرجوع عن قراره الذي كان قد اتخذه بالفعل. ضع في حسبانك أهمية طمأنة المستخدم، ربما من خلال التأكيد على المنافع التي سيحصل عليها من استكمال الدعوة إلى الإجراء CTA أو من خلال تقديم هدية شكر بسيطة، ويمكن السر دائمًا في تجاوز توقعات العملاء بدل الاكتفاء بالحد الأدنى. رفع سقف التوقعات إن أفضل ما يمكن عمله لحضّ المستخدم على متابعة الدعوة إلى الإجراء CTA هو إبهار المستخدم وتجاوز سقف توقعاته وتقديم خدمة استثنائيّة تتحدّث عن نفسها وتتحدّث عنك. هذا بالضَّبط ما فعتله شركات مثل Zappos بشكل ملفت، حيث قلبت الطاولة على جميع المنافسين وسبقتهم مع سياسة الاستعادة المجانية ذات 365 يوم. يوجد عديد الفرص التي يمكن استغلالها لإبهار المستخدم/الزائر، ويمكن أن تكون على الشكل التالي: تقديم خدمة عملاء مباشرة من دون فترة انتظار. تقديم دعم محادثة مباشر على مدار الساعة وفي كامل الأسبوع. تحمّل تكلفة الشّحن في حال الاستعادة return. منح مشتركي القائمة البريدية محتوى حصريًا أو هدايا. شكر المستخدمين بشكل شخصي عند تزكيتهم الخدمة على الشبكات الاجتماعيّة. يوجد العديد من الخيارات لإبهار المستخدمين حتى مع حدوث الأخطاء، على سبيل المثال Jawbone، عندما قاموا بطرح الإصدار الأوّل من منتجهم، كان يحتوي على علّة، والتي من شأنها أن تسبب المشاكل لعدد كبير من المستخدمين. عندما أدرك فريق Jawbone حقيقة المشكلة وما قاموا به من خطأ، قاموا بتجاوز سقف توقعات مستخدميهم بسياسة إرجاع مبهرة. لم يقوموا بإعادة كامل المبلغ المدفوع فقط، بل بتبديل الجهاز أيضًا، كل ذلك وبدون أن يتمّ إرجاع الجهاز أو إثبات أن الجهاز يُعاني من المُشكل. لا تسعى معظم الشركات للأسف لإبهار مستخدميها وتجاوز سقف توقعاتهم إلا القليل منها، لا بل يفشل منهم بتقديم الحد الأدنى. تجنب مفاجأة المستخدم قد يقود استكمال الدعوة إلى الإجراء call to action إلى نتائج غير متوقعة، فعندما يقوم أحدهم بالتسجيل في القائمة البريدية متوقعًا بريدًا إلكترونيًا في الأسبوع يجد نفسه غارقًا في بحر من الرسائل المزعجة، أو ربما عندما يقرر شراء منتج ما يتفاجأ بتكلفة شحن عالية، وما يزعج في الأمر هو محاولة الشركات إخفاء هذه الأمور عن المستخدم، وفي أحسن الأحوال ستذكرها ولكن تكتبها بحروف صغيرة تحتاج إلى مكبّرة لمشاهدتها. قام ASOS بعمل جيّد في توضيح تكلفة التوصيل قبل شروع المستخدم في قيامه بالشراء. إن لم تكن صادقًا من البداية ستخسر رضا العملاء، هذا الرضا هو الذي يدفع بالمستخدم لاستكمال الدعوة إلى الإجراء CTA، خصوصًا مع مسألة التسليم delivery. التوصيل Delivering إن كانت الدعوة إلى الإجراء مرتبطة مع تسليم منتج من نوع ما (فيزيائي أو إلكتروني) فمن المهم تولّي عملية التوصيل بعناية. أولًا، ضع نصب عينيك ملاحظتي السابقة حول مفاجأة المستخدم، فإن حدث وكان عليك فرض رسوم على التوصيل، كن واضحًا تمام الوضوح في ذلك مقدّمًا، فلا تنتظر حتى يقوم المستخدم بتقديم كامل معلوماته قبل أن تخبره بذلك، صحيح أن المستخدم سيتابع الدعوة إلى الإجراء، ولكنك بلا شك أزعجته، الأمر الذي كان بإمكانك تجنبه. ثانيًا، الوقت من ذهب، وقتك ووقت العميل، فعندما يستكمل المستخدم الدعوة إلى الإجراء هو لا يريد أن يعرف ما الذي سيحدث في الخطوة التالية فقط، بل يرغب أيضًا في معرفة متى ستحدث أيضًا، فإن استكمل المستخدم نموذج التواصل contact form فهو يَرغب في معرفة متى سيتم الرد عليه، وإن اشترى منتجًا فهو يَرغب في معرفة موعد التسليم. إن حدث وفتحت تذكرة دعم في موقع Basecamp، سيُشير الموقع وبوضوح إلى المدة المُتوقّعة للرد. يجب أن تكون واضحًا حول تسليم المنتجات/السلع الإلكترونية، فمثلًا، هل سيتم تسليم المنتج مباشرةً أم يجب الانتظار إلى حين الموافقة؟ إن لم يتم توصيل المادة/المنتج كما يتوقّع المستخدم، فقد يتسبب ذلك في خسران رضا الزبون، وهو أمرٌ لا يمكن استرجاعه بسهولة، كما أنك بحاجة رضا الزبون إن كنت ترغب منه استكمال دعوات إجراء CTAs مستقبليّة. دعوات الإجراء الثانوية نادرًا ما يأخذ مدراء المواقع في الحسبان ما على المستخدم فعله بعد استكماله الدعوة إلى الإجراء الرئيسيّة CTA، ففي اعتقادهم أن الإجراء قد تم، وبالتالي فقد انتهى الأمر وليفعل المستخدم ما يحلو له. تحتوي صفحات تأكيد طلب الشراء في المواقع التجاريّة رابط "continue shopping" (تابع التسوّق)، لا داعي لهذا الرابط ولماذا سأحتاجه؟ لماذا سأرغب في متابعة التسوّق عندما أكون قد انتهيت لتوّي؟ إن كان المستخدم قد أنهى لتوّه شراء حاسب محمول، فمن المفترض الطلب منه متابعة الموقع على تويتر مثلًا. لا تترك المستخدم تائهًا، بل وجّهه نحو دعوة إجراء جديدة، على سبيل المثال، إن كان المستخدم قد أنهى لتوّه التسجيل في القائمة البريديّة، فاقترح عليه متابعتك على فيس بوك، وإن أنهى طلب إحدى السلع، اقترح عليه التسجيل في القائمة البريديّة للحصول على حسم حصري مثلًا. يوجد دائمًا شيء من الممكن أن يفعله المستخدم، عليك الطلب فقط، ولكن، ماذا إن لم يستكمل المستخدم الدعوة إلى الإجراء CTA الرئيسية/الأساسيّة بالشكل المطلوب؟ العودة من بداية خاطئة قرّر ابني مؤخّرًا التبرّع إلى أحد الجمعيات الخيريّة، قمنا باستخدام جهازي اللوحي iPad للقيام بالتبرّع، ولكن ولسوء الحظ لم نستطع استكمال العملية لسببٍ ما، وعليه قررنا تأجير الأمر إلى حين. استلمت في اليوم التالي بريدًا إلكترونيًا من الموقع يشكرني لمحاولتي القيام بالتبرّع وتشجيعي لاستكمال العملية، حيث قاموا بتخزين بريدي الإلكتروني، مدركين عدم متابعتي دعوتهم إلى القيام بإجراء CTA، فقاموا بالتواصل معي. عليك دائمًا أن تسعى إلى حثّ المستخدم على إنهاء الإجراء كما قام به موقع Charity Water. إن المثال السابق هو خير مثال في تشجيع المستخدم وحثّه على المتابعة واستكمال الدعوة إلى الإجراء CTA والتي قد بدأها المستخدم ولكنّه لم يتسنّ له إنهاء العملية. يستخلص أيضًا من المثال السابق وجوب الحصول على معلومات الاتصال مبكرًا من المستخدم، حيث سيمكنك هذا الأمر من متابعة من لم يستكمل الإجراء، سواءً كان الإجراء هو الشراء أو تكملة نموذج ما. إن كان المستخدم في منتصف عملية الدعوة إلى الإجراء، خزّن المعلومات المدخلة حتى وإن لم يُتابع الإجراء إلى النهاية، وبهذا في حال عودته لاحقًا لإنهاء عملية الشراء أو استكمال نموذج الاتصال، لا يتوجّب عليه البداية من جديد. خاتمة يمكن القول إن زبدة وخلاصة المقال هي عدم اعتبار الدعوة إلى إجراء call to action نقطة النهاية، بل هذه الدعوة هي بداية علاقتك مع المستخدم، فعندما يستكمل المستخدم الدعوة إلى الإجراء CTA فهو بذلك يمنحك ثقته بماله ووقته ومعلوماته الشخصيّة، فلا تخذله، لأن الدعوة إلى إجراء ما هي إلا بداية العلاقة. ترجمة وبتصرّف للمقال What happens after the call to action لصاحبه Paul Boag. حقوق الصورة البارزة: Designed by Freepik.

تطرقنا في أكاديمية حسوب سابقًا إلى أساسيات الصندوق المرن Flexbox وكيف يُمكن للمطوّر استخدام هذه الخاصية الرائعة في CSS3، وفي هذا المقال سنكمل مع الأساسيات ولكن بتركيز على الأمثلة بعيدًا عن الكلام النظري، وللحصول على الفائدة المطلوبة من هذا الأمثلة من الضروري قراءة المقال الآنف الذكر، وتحديث المتصفح إلى آخر إصدار متوفّر لتطبيق وعرض الأمثلة بالشكل الصحيح. إنشاء حاوية مرنة Flex Containerإن الخطوة الأولى في هيكلة أجزاء الصفحة باستخدام الصندوق المرن flexbox هي إنشاء المستوعبة/الحاوية المرنة flex container، وذلك من خلال إسناد قيمة الخاصية display إلى flex، مع الانتباه إلى إضافة البادئة webkit- من أجل المتصفح ‹‹سفاري›› Safari. .flexcontainer { display: -webkit-flex; display: flex; }توضيع العناصر المرنة Flex Items ضمن صف Rowعناصر الصندوق المرن ما هي إلا أبناء (عناصر فرعية) من الحاوية المرنة flex container، وتتموضع على طول محور رئيسي main axis ومحور جانبي cross axis، المحور الرئيسي هو أفقي افتراضيًا، ولذلك العناصر تتموضع ضمن صف، ومن الممكن تغيير اتجاه المحور الرئيسي من خلال إسناد flex-direction إلى القيمة column، والتي هي افتراضيا row. .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; } توضيع العناصر المرنة Flex Items ضمن عمود Column.flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } نقل العناصر المرنة Flex Items إلى الجهة العلويةيَعتمد نقل العناصر المرنة إلى الأعلى على اتجاه المحور الرئيسي main axis، فإن كان عموديًا vertical، يُمكن استخدام الخاصية align-items، وإن كان أفقيًا horizontal، فيُمكن استخدام الخاصية justify-content. .flexcontainer { -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; } نقل العناصر المرنة Flex Items إلى جهة اليمينيَعتمد نقل العناصر إلى جهة اليسار أو جهة اليمين على اتجاه المحور الرئيسي أيضًا، فإن كان flex-direction معينًا إلى row (صف)، عندها يجب استخدام justify-content، وإن كان مُعيّنًا إلى column (عمود)، عندها يجب استخدام align-items. .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; } نقل العناصر المرنة Flex Items إلى جهة اليسار .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; } .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; } توسيط كافة العناصر باستخدام Flexboxيُعتبر توسيط العناصر في المستوعبة سواء كان عموديًا أو أفقيًا سهلًا للغاية، كل ما يجب فعله هو إسناد justify-content و/أو align-items إلى القيمة center، ويعتمد الأمر دائمًا على اتجاه المحور الأساسي main axis وذلك فيما إذا كان قيمة الخاصية flex-direction مسندة إلى القيمة row أو column. .flexcontainer { display: -webkit-flex; display: flex; -webkit-flex-direction: row /* works with row or column */ flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } تكبير حجم عنصر مرن Flex Item نسبة إلى العناصر المرنة الأخرىيُمكن تحديد كيف لعنصر مرن أن يزداد أو بنقص بالحجم نسبة إلى باقي العناصر الأخرى في المستوعبة، ولتطبيق ذلك يمكن إسناد القيمة المطلوبة ولكل عنصر ومن خلال الخاصية flex، ففي المثال التّالي، تمّ زيادة حجم أحد العناصر إلى ضعف حجم العنصر الآخر. .bigitem { -webkit-flex: 2 0 0; flex: 2 0 0; } .smallitem { -webkit-flex: 1 0 0; flex: 1 0 0; } التفاف العناصر المرنة إلى صفوف Wrap flex items into rowsتأخرت بعض المتصفحات في دعم هذه الخاصية مثل متصفح Firefox، على العموم من المفترض أن تعمل هذه الخاصية في الوقت الحالي مع جميع المتصفحات بإصداراتها الأخيرة. .flexcontainer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; /* You can set flex-wrap and flex-direction individually */ -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* Or do it all in one line with flex flow */ -webkit-flex-flow: row wrap; flex-flow: row wrap; /* tweak the where items line up on the row */ /* valid values are: flex-start, flex-end, space-between, space-around, stretch */ -webkit-align-content: flex-end; align-content: flex-end; } التفاف العناصر المرنة إلى أعمدة Wrap flex items into columns .flexcontainer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-align-content: stretch; align-content: stretch; } إزالة المساحة بين الأعمدة أو الصفوف الملتفةتُقدّم الخاصية align-content للمطوّر إمكانية توزيع المساحة حول الأعمدة والصفوف الملتفة wrapped، وذلك بتقديم الخيارات التالية: flex-startflex-endspace-betweenspace-aroundstretchولإزالة المساحة حول الأعمدة الملتفة، يمكن إسناد align-content إلى center. .flexcontainer { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-align-content: center; align-content: center; } تخصيص مكان العنصر في الحاويةيُمكن للمطوّر التحكم بقيمة align-items لكل عنصر على حِدة باستخدام align-self، وكما يمكن أيضًا استخدام margins لتحريك أي عنصر وفي أي اتجاه من الاتجاهات الأربعة، فمثلًا لتوزيع أعمدة الصّفحة يُمكن تحريك العنصر المرن إلى أقصى يسار مستوعبته من خلال إسناد margin-right إلى القيمة auto. .left { -webkit-align-self: flex-start; align-self: flex-start; } .right { margin-left: auto; } خاتمةخاصيّة الصندوق المرن خاصيّة رائعة ومن الضروري على مطوّر الويب إضافتها إلى أدواته في التطوير خاصة وأنها أصبحت مدعومة بشكل جيّد مع المتصفحات. ترجمة وبتصرّف للمقال The Ultimate Flexbox Cheat Sheet.

سيضفي الحصول على أي مشروع مهما كان في مستهل مشوارك في العمل الحرّ بظلاله على نفسك بلا شك، ولكن قد ينتهي بك الأمر إلى العمل على مشاريع لا تحبّذ العمل عليها لسبب أو لآخر. وأفضل سبيل لتحاشي العمل مع هذا النوع من المشاريع هو الحرص على عدم الموافقة على عرض العميل في المقام الأول، لكن كيف كان لك أن تتبين هذا النوع من العملاء؟ وعلى فرض أنك عرفت، كيف لك أن ترفض العرض بأفضل أسلوب ممكن؟ فيما يلي بضعة أفكار يمكن لك الاستعانة بها لاكتشاف فيما إذا كان العميل مناسب لك أو لا وكيف لك أن تقول: ‹‹لا››. غربل العملاء بناء على تفضيلاتك الخاصةخذ بعين الاعتبار اختياراتك الشخصية، فبالنسبة لي لا أستلم مشاريع مرتبطة بالمُسكرات أو بشركات التبغ أو المواقع المخلّة بالآداب العامة، ولا مواقع القمار وما شابهها، وهي خطوط حمراء بالنسبة لي، لذا أنصحك بتحديد خطوطك الحمراء، والتي قد تختلف عن الحدود التي رسمتها لنفسي. مهما كانت أسبابك ودوافعك في الرفض أو القبول، يجب عليك دائمًا أنت تدرك ما لك وما عليك، وما يمكن لك التغاضي عنه وما لا يقبل النقاش، وسيساعدك التفكير بهذا المنطق على اتخاذ القرار الحكيم والصائب في اللحظة التي يدق بابك فيها عميلٌ بحفنة عارمة من النقود. استقصي عن العميللا أقصد أن تبحث عنه في فيس بوك وتتعدّى على خصوصيته أو شيء من هذا القبيل، ما أعنيه هو البحث عن تجارته ومنتجاته لا أكثر، فمثلًا: هل أعماله تتماشى مع معتقداتك؟ هل هي شرعية/قانونية؟ هل منتجه/مشروعه/موقعه يٌقدّم الجودة التي يَعد أن يٌقدّمها؟ تيقظ من العلامات المنذرةهل يقدّم العميل المعلومات والتفاصيل التي تسأله عنها؟ هل يقدّر وقتك ويحترمه؟ هل قرأ المعلومات التي قدّمتها له؟ ماذا عن أسلوبه في التواصل، هل هو صريح وسريع في الرد. سألني مرة من المرات أحد العملاء عن توضيحٍ ما كنت بالفعل قد أرسلته له بجانب توفّره على موقعي وبالخط العريض، وهذه واحدة من العلامات المُنذرة بالنسبة لي. كيفية رفض طلبات العملاء غير الملائمينالزبدة والخلاصة التي توصلت إليها للتعامل الأفضل مع هذا النوع من العملاء هي ثلاث نقاط: تقديم سبب مقنع، الودية والدماثة في الرد، وعدم ترك أي مجال للتفاوض. نموذج لرسالة لرفض طلب العميل لأسباب شخصيةإليك نموذج رسالة يمكن لك أن تستخدمها من أجل عميل لا ترغب العمل معه لأسباب شخصية: النزاهة والصدق في التعامل أمر أساسي دائمًا وأبدًا، وعليه يجب مراعاة ذلك عند تقديم أعذارك للعميل. بالنسبة لي عادةً ما أخبر العميل بأن تجارته/أعماله تُصنّف من الأصناف الأربعة من المشاريع التي لا أقبل العمل عليها نظرًا لأسباب شخصية. بالمجمل لا يستاء أحد من ذلك، خاصة إن أشرت لهم بمستقل آخر كفء وعلى استعداد على إتمام مشروعهم، ودائمًا ما تؤول الأمور إلى رضى جميع الأطراف. رسالة لرفض مشروع عميل أظهر علامة منذرة: بهذا الأسلوب بدون زيادة أو نقصان فخير الكلام ما قلّ ودلّ. رفض مشروع عميل بعد الشروع في العمل ليتبين لك فيما بعد عدم ملائمته لمعاييركتعتبر هذه الحالة بلا شك أصعب من الحالتين السابقتين، على كلٍ أسلوب الرفض هو ما سيساعد على تسهيل المهمة. تذكر دائمًا استخدام الأسلوب الودي واحترام العميل مهما كانت أسباب الرفض. خاتمةبطريقة أو بأخرى، رفض عروض العُملاء ليس بتلك المشكلة الكبيرة لا بل إن لها إيجابيات إذا نظرت إلى الجزء المملوء من الكأس؛ تعزيز شخصيتك كمستقل واكتساب الخبرة اللازمة في التعامل مع المواقف المحرجة. ترجمة -وبتصرف- للمقال: Client not a good fit? Here’s how to say no to them. لصاحبه: Samar Owais. حقوق الصورة البارزة: Designed by Freepik.

ماذا لو كانت تجارتك في العمل الحرّ ناجحة بنجاح وفعالية متجر ‹‹أمازون›› العالمي؟ نعم جديًّا وبدون مزاح، يمكن ذلك من خلال الاعتماد على أتمتة التسويق Marketing Automation، المصطلح ليس بجديد ولا هو بخزعبلات تسويقية، الفكرة ممكنة، وقانونية بالكامل، ليس هذا فقط، ستسوّق وأنت نائم، وأنا أعي تمامًا ما أقول لأني عندما انظر إلى الأيام الخوالي من عملي كمستقل، فإني أعزو نجاحي إلى أمرين لا ثالث لهما: أتمتة التسويق marketing automation.البطانة الفطنة/الحكيمة التي من حولي التي تساعدني على الاستمرار. كنت قبل عام من الآن مهمومًا مغمومًا كحال معظم المستقلين المبتدئين في العمل الحرّ، وكانت الهموم تثقل كاهلي وتشغل فكري، وما إن أفرغ من مصاريف الشهر الحالي حتى يبدأ الشهر التالي، والأسوأ من هذه كله أني كنت متقبّلًا هذا الوضع ومقتنع بأن هذه هي طبيعة عملي ولا مفرّ منها. قُلبت الأمور رأسًا على عقب هذه الأيام، وأصبحت أجمع الكثير من الزبائن المحتملين جدًا (leads) يوميًا - الزبون المحتمل جدًا هو شخص قام بإجراء يدل على اهتمامه بخدمتك/بمنتجك ويُطلق على هذه الفئة leads في التسويق المؤتمت- هذا ما عدا مبيعات منتظمة مع عملاء دائمين، كل هذا وبأقل جهد ممكن، وعليه وجدت من الضروري مشاركة تجربتي مع هذا النوع من التسويق. انتقلت إلى استخدام خدمة Drip للتسويق بالبريد الإلكتروني email marketing، والتي أنصح بها وبشدة وذلك لأنها سهلة الاستخدام بصورة لا تتصورها وتقدم نتائج لا تصدّق، قمت في Drip بإعادة طرح بعضًا من المنشورات القديمة على شكل دورة تدريبية مدتها خمسة أيام، ومن ثم تابعت في إضافة سنة كاملة من المحتوى للمتابعين ليصلهم تباعًا وباستمرار، وقمت بإعادة صياغة المحتوى إلى حملة أخرى خاصة بالزبائن المحتملين جدًا leads وتزويدهم بالمحتوى أسبوعيًا. إن أكثر ما يعجبني في أتمتة التسويق بالبريد الإلكتروني أنه لا يتطلب مني التدخل بعد إعداده للمرّة الأولى، سابقًا كنت أُشغل في استكمال المشروع، أما مهمّة التسويق فقد كانت تؤجّل إلى حين، وما كانت تلقى الاهتمام اللازم، ولكن إن لم أسوّق أنا فلن يُسوّق أحدٌ لي، وما حكّ جلدك مثلُ ظفرك كما يُقال، ولكن مع خدمة Drip كل شيء تغيّر والتسويق مستمر بلا كلل أو ملل. ستتكفّل حملة Drip بمرحلة ما قبل البيع من خلال تثقيف/تنوير الزبون المحتمل، وفي الوقت الذي يتواصل معي أحدهم، سيكون قد أصبح لديه أيام أو أسابيع أو ربما أشهر من المراسلات المؤتمتة القيمة، وما أن أبدأ بالمحادثة مع زبون مأمول/مرتقب prospect، فمن المفترض أنه مدرك ومتوقع ما يمكنني تقديمه له، بمعنى لن يكون من الصعب مبيعه والتوصل إلى اتفاق معه، كما إنني قمت بإعداد الحملة بحيث عندما يختار الزبون المأمول التواصل معي سيكون في مرحلة الشراء، وسيكون حديثنا منصبًا على هذا الأمر بالضبط، بمعنى سنناقش الميزانية المتوقعة لا مشاريعي وخبراتي السابقة مثلًا. ولكن ماذا لو قرأ أحدهم صفحة المبيعات وقرّر الرغبة في تخطي الدورة التدريبية والتواصل من أجل العمل معي على الفور؟ لا بد وأنك تعرف هذا النوع، والذي يُراسلك ويُعبر عن حماسه ورغبته في توظيفك ومن ثم يختفي. أملك الحل لهذه الفئة والذين يسألون كثيرًا مع فرصة ضعيفة جدًا ليكونوا عملاء –يُطلق المُسوّقون على هذا النوع المسمى tire-kickers، هذا النوع لا يصل إلي أبدًا، حيث أن نموذج (forms) الاتصال معدّ لكي لا يُرسل لي أي تنبهات لهذا النوع من الرسائل، بل هو فقط يُرسل ردًا بالنيابة عني إلى الزبون المأمول مع بعض الأسئلة المؤهلة (أشبه باختبار)، فإن استجاب الزبون المأمول إلى هذا الرد حينها سأقرأ رسالته وللمرّة الأولى، يَسمح لي هذا الأسلوب بعدم الحماس من أجل زبون ضعيف الاحتمال، أيضًا سيصب هذا الأسلوب في مصلحة العميل، لأنه سيحصل على رد مباشر مني، بدون أي تأخير بعد أن أصبح له أولوية وأثبت احتماليته القوية في أن يكون زبونًا، وسيكون لدي فرصة كبيرة في كسبه كزبون، وعلى مبدأ اضرب الحديد حاميًا. الرسالة المؤهلة: تُغطي الجزئية السابقة أتمتة عملية التسويق للزبائن المحتملين جدًا leads، ولكن ماذا عن الزبائن الحاليين؟ مع هذه الفئة كان لي النجاح الأكبر في التسويق بالبريد الإلكتروني، ففي اللحظة التي يَدفع لي أحدهم، سيُضاف تلقائيًا إلى حملة خاصة بالعملاء، وفيها أتواصل معهم بانتظام وبسلسلة من الرسائل المعدّة مسبقًا تحتوي على القيمة المضافة التي أقدمها في الوقت الراهن، وما يُمكن لي تقديمه مستقبلًا، وذلك في سبيل إقناع الزبون في طلب المزيد من خدماتي، مع العلم أنه في المرة الأولى التي أعددت بها هذه الحملة، كل ما قمت به هو إرسال رسالة لا تتجاوز السطرين، وذلك فقط من باب التواصل، هذه الرسالة أكسبتني ربحًا كبيرًا وبفترة قصيرة جدًا، وعلى الرغم من أن قائمة العملاء الحاليين لدي ليس كبيرة إلا أنها ذهب خالص بالنسبة لعملي، وذلك لأنها تحتوي على الأشخاص الذين هم بالفعل يثقون بي ويقدرون خدماتي. رسالة التسويق الخاصّة بالزبائن الحاليين: تأتي قوة أتمتة التسويق من خلال ما تقدمه من سهولة في تحسين/تطوير مجهودك التسويقي، وإن كان لديك زبائن حاليين أو زبائن مأمولين prospects أو زبائن محتملين جدًا leads، ولم تستخدم أتمتة التسويق بالرسائل الإلكترونية، فقد ارتكبت غلطة الشاطر وراح ما كان سيكون ربحًا لك إلى منافسيك، فقد زادت أرباحي ثمانية أضعاف بعد تطبيقي لتقنية التسويق المؤتمت marketing automation والحكم والفصل لك. ترجمة وبتصرّف للمقال Marketing Automation for Freelancers لصاحبه kurtinc. حقوق الصورة البارزة: Designed by Freepik.

هل تعاني من صعوبة في تطبيق مفاهيم البرمجة الكائنية مع لغة JavaScript؟ إذًا أنت في المكان الصحيح، ففي هذا المقال سنبدأ بمطلع لمفاهيم البرمجة الكائنية (أو الشيئية كما قد يُطلق عليها البعض)، ومن ثم مراجعة نموذج جافا سكريبت في الكائنات، وأخيرًا شرح مفاهيم البرمجة الكائنية في جافا سكريبت، لتحصل على إلمام واف والقصة الكاملة. مراجعة في جافاسكريبت JavaScript يُمكن العودة إلى المقال إعادة تقديم JavaScript لمن أساء فهمها هنا في أكاديمية حسوب للحصول على مراجعة لأساسيات لغة جافا سكريبت وأخذ فكرة عن المغيرات وأنواع الدوال وبقية الأساسيات. البرمجة الكائنية Object-oriented programming إن البرمجة الكائنية (OOP) ما هي إلا نمط برمجي يَستخدم التجريد في إنشاء نماذج/نسخ لتجسيد العالم الحقيقي، وتَستخدم البرمجة الكائنية في ذلك أساليب مُتعدّدة من هذا النمط، فهي تستخدم الوحدات module، وتعدديّة الأشكال polymorphism والتغليف encapsulation، وتجدر الإشارة إلى أن معظم لغات البرمجة تدعم مفهوم OOP أمثال اللغات البرمجية: جافا، بايثون، روبي، وطبعًا جافا سكريبت. يُعالج أو لنقل يَتصور مفهوم البرمجة الكائنية OOP البرنامج كتشكيلة من الأشياء/الكائنات المتعاونة/المترابطة بدلًا من يتصوّره كتشكيلة من الدوال (functions) أو كسرد من الأوامر. ففي مفهوم OOP، كل كائن/شيء له القدرة على استقبال الرسائل، ومعالجة البيانات، وإرسال الرسائل إلى باقي الكائنات، ويُمكن اعتبار أنه لكل كائن object كينونة خاصة به ودور/وظيفة مستقلة عن الكائن الآخر. تُعزز البرمجة الكائنية القدرة على صيانة الشيفرة البرمجية والمرونة في التطوير، وأثبتت جدارتها على نطاق واسع في هندسة البرمجيات الكبيرة، ولأن البرمجة الكائنية تُشدد على استخدام الوحدات module، فإن الشيفرة/الكود المكتوب بمفهوم البرمجة الكائنية هو أبسط في التطوير وأسهل في الفهم مستقبلًا (عند التنقيح والتعديل)، وكما يعزز مفهوم البرمجة الكائنية التحليل المباشر للشيفرة، وفهم الحالات الشائكة فهمًا أفضل من باقي الأساليب البرمجية الأخرى. مصطلحات البرمجة الكائنية المجال في البرمجة الكائنية Namespace ما هو إلا عبارة عن حاوي تسمح للمطوّر بتحزيم جميع الوظائف تحت اسم محدد وفريد. الصنف أو الفئة Class في البرمجة الكائنية يعتني الصنف بكل ما يتعلّق بميزات وخصائص الكائن، والصنف ما هو إلا قالب template تعريفي بخاصيات properties وبطُرق/وظائف methods الكائن object. الكائن Object في البرمجة الكائنية الكائن ما هو إلا حالة/أمثولة instance من صنف class. الخاصية property في البرمجة الكائنية ما هي إلا مميزات وخصائص الكائن، كاللون مثلًا. الطريقة أو الوظيفة Method في البرمجة الكائنية تعتني الطريقة أو الوظيفة كما يُسميها البعض بقدرات الكائن، مثل قدرة المشي مثلًا، وهي دور أو وظيفة مرتبطة مع صنف class. المشيد Constructor في البرمجة الكائنية ما هو إلا طريقة method تُستدعى في لحظة استهلال instantiate الكائن، وعادةً ما يكون له نفس اسم الصنف الذي يحتويه. الوراثة Inheritance في البرمجة الكائنية يُمكن للصنف أن يرث مميزات من صنف آخر. التغليف Encapsulation في البرمجة الكائنية طريقة في تحزيم البيانات data والطُرق methods التي تستخدم البيانات. التجريد Abstraction في البرمجة الكائنية يجب على الاقتران الحاصل من: الوراثة والطُرق methods والخاصيات properties لكائن معقد وشائك التمثيل برمجيًا أن يعكس الواقع المراد محاكاته في البرمجة الكائنية. تعددية الأشكال Polymorphism في البرمجة الكائنية تحمل كلمة Poly بحد ذاتها المعنى "متعدد" وتحمل الكلمة morphism المعنى "أشكال، ويُشير المفهوم ككل إلى أن أكثر من صنف قد يُعرّف نفس الطريقة method أو الخاصية property. البرمجة المعتمدة على النموذج الأولي Prototype البرمجة المعتمدة على النموذج الأوّلي (Prototype-based programming) ما هي إلا نموذج من البرمجة الكائنية OOP ولكنها لا تستخدم الأصناف classes، بل تقوم أولًا بإعداد سلوك أي صنف class ما ومن ثم تُعيد استخدامه، ويُطلق البعض على هذا النموذج: البرمجة بلا أصناف classless، أو البرمجة المَبْدَئِية المنحى prototype-oriented، أو البرمجة المعتمدة على الأمثولة instance-based). يعود أصل اللغة المعتمدة على النموذج الأولي إلى لغة Self، والتي طوّرها David Ungar وRandall Smith، ولكن أسلوب البرمجة بدون أصناف class-less توسّع ونال شهرة كبيرة في العقد الأخير، واُعتمد من قبل العديد من اللغات البرمجية أشهرهم جافا سكريبت. البرمجة الكائنية باستخدام جافا سكريبت المجال Namespace في جافا سكريبت المجال هو أشبه بمستوعب/بحاوية (container) تسمح للمطوّر في تحزيم وظائف تحت اسم فريد، أو اسم تطبيق محدد، ففي جافا سكريبت المجال هو مجرد كائن object كأي كائن آخر يحتوي على طُرق methods، وخاصيات properties، وحتى كائنات objects. ملاحظة هامة: من المهم جدًا الانتباه إلى أنه في جافا سكريبت، لا يوجد فرق بين الكائنات العادية والمجالات namespaces، وهذا يختلف عن اللغات الكائنية الأخرى، الأمر الذي قد يُربك المبرمجين المبتدئين في جافا سكريبت. إن إنشاء مجال namespace في جافا سكريبت بسيطٌ للغاية، فمن خلال إنشاء كائن عام/مشترك/شامل global، ستصبح جميع المُتغيّرات variables والطرق methods، والدوال functions خاصياتٍ لهذا الكائن، ويٌقلل استخدام المجالات namespaces أيضًا من احتمالية تضارب الأسماء في التطبيق، منذ أن كل كائن من كائنات التطبيق ما هي إلى خاصيات كائن شامل/عام معرّفة على مستوى التطبيق. سيُنشئ في الخطوة التالية كائنًا عامًا global وبالاسم MYAPP: // global namespace var MYAPP = MYAPP || {}; يُظهر المثال السابق، كيف تم التأكّد أولًا فيما إذا كان MYAPP معرفًا (سواء في نفس الملف أو في آخر)، ففي حال الإيجاب سيُستخدم الكائن العام MYAPP، وفي حال عدم تعريفه مُسبقًا سيُنشئ كائنًا خالٍ وبالاسم MYAPP والذي سيغلّف encapsulate الطرق methods والدوال functions والمتغيرات variables والكائنات objects. كما يُمكن أيضًا إنشاء مجال فرعي sub-namespaces: // sub namespace MYAPP.event = {}; يوضّح المثال التالي الصيغة المستخدمة في إنشاء مجال namespace وإضافة متغيرات ودوال: // Create container called MYAPP.commonMethod for common method and properties MYAPP.commonMethod = { regExForName: "", // define regex for name validation regExForPhone: "", // define regex for phone no validation validateName: function(name){ // Do something with name, you can access regExForName variable // using "this.regExForName" }, validatePhoneNo: function(phoneNo){ // do something with phone number } } // Object together with the method declarations MYAPP.event = { addListener: function(el, type, fn) { // code stuff }, removeListener: function(el, type, fn) { // code stuff }, getEvent: function(e) { // code stuff } // Can add another method and properties } // Syntax for Using addListener method: MYAPP.event.addListener("yourel", "type", callback); الكائنات الأساسية/القياسية المبنية داخل لغة جافا سكريبت Standard built-in objects تتضمن لغة جافا سكريبت العديد من الكائنات في تركيبتها، على سبيل المثال، يوجد كائنات مثل Math، Object، Array، String، ويُظهر المثال التالي كيفيّة استخدام الكائن Math للحصول على رقم عشوائي باستخدام أحد طُرق method هذا الكائن وهي الطريقة ()random. console.log(Math.random()); ملاحظة: يَفترض المثال السابق وجميع الأمثلة التالية في المقال وجود دالة function بالاسم ()console.log معرّفة تعريفًا عامًا (globally)، مع العلم أن هذه الدالة ليست جزء من اللغة نفسها، ولكنها دالة متوفّرة في العديد من متصفحات الإنترنت لأغراض تشخيص الشيفرة البرمجية debugging. يُمكن العودة إلى مرجع لغة جافا سكريبت: الكائنات الأصلية المعيارية للحصول على قائمة بالكائنات المبينة داخل لغة جافا سكريبت نفسها. كل كائن في جافا سكريبت هو حالة/أمثولة instance من الكائن Object ويَرث كافة خاصياته properties وطُرقه methods. الكائنات المخصصة Custom objects في جافا سكريبت الصنف/الفئة The class لغة جافا سكريبت لغة من النوع prototype-based ولا تحتوي على العبارة class كما هو حال باقي لغات البرمجة الكائنية، كما في روبي أو بايثون، ويُربك هذا الأمر المبرمجين المعتادين على اللغات التي تعتمد على هذه العبارة أو المفهوم، وتستخدم جافا سكريبت بدلًا من ذلك الدوال functions لمحاكات مفهوم الأصناف classes، وتعريف صنف هو بسهولة تعريف أي دالّة: var Person = function () {}; الكائن (أمثولة الصنف class instance) يتطلب إنشاء حالة/أمثولة instance جديدة من كائن obj استخدام العبارة new obj، وتعيين النتيجة إلى متغيّر بغرض الوصول إلى فيما بعد. عُرّف في الشيفرة السابقة صنف class بالاسم Person، وفي الشيفرة التالية، سيُنشئ حالتين/أمثولتين instances من هذا الصنف، الأولى بالاسم person1 والثانية بالاسم person2. var person1 = new Person(); var person2 = new Person(); المشيد The constructor يُستدعى المُشيّد constructor في لحظة الاستهلال instantiation (اللحظة التي يُنشئ فيها الكائن)، والمُشيّد ما هو إلا طريقة method من طُرق الصنف class، وفي جافا سكريبت تعمل الدالة على تشييد الكائن، ولذلك لا داعي إلى تعريف طريقة method من أجل عميلة التشييد، وكل إجراء مصرّح في الصنف class يُنفّذ في لحظة الاستهلال instantiation. يُستخدم المُشيّد في تعيين خاصيات properties الكائن، أو في استدعاء طُرق methods معينة لتحضير الكائن للاستخدام، وأما إضافة طُرق صنف وتعريفها يحدث باستخدام صيغة syntax مختلفة سنتطرّق إليها فيما بعد خلال المقال. تُظهر الشيفرة التالية كيف يُسجّل log (يُرسل رسالة نصية إلى طرفية المتصفح console) مُشيّد الصنف Person رسالة نصية حينما يُستهل instantiated. var Person = function () { console.log('instance created'); }; var person1 = new Person(); var person2 = new Person(); الخاصية The property (خاصية الكائن object attribute) الخاصيات properties ما هي إلا متغيرات محتوات في الصنف class، وكل حالة/أمثولة من الكائن تمتلك هذه الخاصيات، وتُعيّن الخاصيات في دالة مُشيّد الصنف بحيثُ تُنشئ مع كل حالة/أمثولة instance. إن الكلمة المفتاحية this، والتي تُشير إلى الكائن الحالي، تسمح للمطوّر بالعمل مع الخاصيات من ضمن الصنف، والوصول (قراءةً وكتابةً) إلى الخاصية property من خارج الصنف يكون من خلال الصيغة InstanceName.Property كما هو الأمر في لغة C++ (سي بلس بلس) وJava والعديد من اللغات الأخرى، ومن داخل الصنف تُستخدم الصيغة this.Property للحصول على قيمة الخاصية أو لتعيين قيمتها. في الشيفرة التالية، عُرّفت الخاصية firstName للصنف Person وفي لحظة الاستهلال instantiation: var Person = function (firstName) { this.firstName = firstName; console.log('Person instantiated'); }; var person1 = new Person('Alice'); var person2 = new Person('Bob'); // Show the firstName properties of the objects console.log('person1 is ' + person1.firstName); // logs "person1 is Alice" console.log('person2 is ' + person2.firstName); // logs "person2 is Bob" الطرق The methods الطرق methods ما هي إلا دوال (وتُعرّف كما تعرّف الدوال functions)، فيما عدا ذلك فهي تُشبه الخاصيات properties، واستدعاء طريقة method مشابه إلى الوصول إلى خاصيّة ما، ولكن مع إضافة () في نهاية اسم الطريقة، وربما مع مُعطيات arguments، ولتعريف طريقة، تُعيّن دالة إلى خاصيّة مُسمّات من خاصيّة الصنف prototype، ويُمكن فيما بعد استدعاء الطريقة على الكائن بنفس الاسم الذي عُيّن للدالة. في الشيفرة التالية، عُرّفت ومن ثم اُستخدِمت الطريقة ()sayHello للصنف Person. var Person = function (firstName) { this.firstName = firstName; }; Person.prototype.sayHello = function() { console.log("Hello, I'm " + this.firstName); }; var person1 = new Person("Alice"); var person2 = new Person("Bob"); // call the Person sayHello method. person1.sayHello(); // logs "Hello, I'm Alice" person2.sayHello(); // logs "Hello, I'm Bob" إن الطُرق methods في جافا سكريبت ما هي إلا دالة كائن عادية مرتبطة مع كائن كخاصية property، وهذا يعني أنه يُمكن استدعاء الطُرق خارج السياق، كما في المثال التالي: var Person = function (firstName) { this.firstName = firstName; }; Person.prototype.sayHello = function() { console.log("Hello, I'm " + this.firstName); }; var person1 = new Person("Alice"); var person2 = new Person("Bob"); var helloFunction = person1.sayHello; // logs "Hello, I'm Alice" person1.sayHello(); // logs "Hello, I'm Bob" person2.sayHello(); // logs "Hello, I'm undefined" (or fails // with a TypeError in strict mode) helloFunction(); // logs true console.log(helloFunction === person1.sayHello); // logs true console.log(helloFunction === Person.prototype.sayHello); // logs "Hello, I'm Alice" helloFunction.call(person1); كما يُظهر المثال السابق، جميع الإحالات المستخدمة في استدعاء الدالة sayHello تُشير إلى نفس الدالة سواءً الاستدعاء الحاصل مع person1 أو Person.prototype أو حتى في المتغيّر helloFunction وقيمة this خلال استدعاء الدالة يعتمد على الكيفية التي تُستدعى فيها، حيث تُشير الكلمة المفتاحية this إلى الكائن الحالي الذي تُستدعى عليه الطريقة method، بمعنى عندما تم استدعاء الطريقة ()sayHello على الكائن person1 فإن this تُشير إلى الكائن person1، وعند استدعاء sayHello على الكائن person2 فإن this تُشير إلى الكائن person2، ولكن إن تم الاستدعاء بطريقة مختلفة، فإن this ستُعيّن تعينًا مختلفًا، فاستدعاء this من المتغيّر (كما في ()helloFunction) سيُعيّن this إلى الكائن العام global (والذي سيكون window في متصفح الإنترنت)، ومنذ أن هذا الكائن (على الأغلب) لا يملك الخاصّيّة firstName، ستكون النتيجة كما هو الحال في المثال السابق “Hello, I’m undefined”، كما يمكن دائمًا تعيين this صراحةً باستخدام Function#call (أو Function#apply) وهو كما كان في نهاية المثال. الوراثة تُستخدم الوراثة في جافا سكريبت في إنشاء صنف class كمثيل مخصص لصنف أو أكثر (تدعم جافا سكريبت وراثة وحيدة فقط single inheritance)، ويُطلق على الصنف المخصص عادةً ابن (child)، ويطلق على الصنف الآخر عادةً الأب (parent)، وفي جافا سكريبت يتمّ ذلك من خلال إسناد حالة/أمثولة من الصنف الأب إلى الصنف الابن، ومن ثم تخصيصه، وفي متصفحات الإنترنت الحديثة يُمكن استخدام Object.create في تحقيق الوراثة inheritance أيضًا. ملاحظة: لا تتفقد جافا سكريبت مُشيّد صنف الابن prototype.constructor (راجع Object.prototype)، وعليه يجب التصريح عن ذلك يدويًا، لمزيد من التفصيل راجع السؤال التالي على Stackoverflow. عُرّف في الشيفرة التالية الصنف Student كصنف ابن للصنف Person، ومن ثم أُعيد تعريف الطريقة ()sayHello وأُضيفت الطريقة ()sayGoodBye علاوة على ذلك. // Define the Person constructor var Person = function(firstName) { this.firstName = firstName; }; // Add a couple of methods to Person.prototype Person.prototype.walk = function(){ console.log("I am walking!"); }; Person.prototype.sayHello = function(){ console.log("Hello, I'm " + this.firstName); }; // Define the Student constructor function Student(firstName, subject) { // Call the parent constructor, making sure (using Function#call) // that "this" is set correctly during the call Person.call(this, firstName); // Initialize our Student-specific properties this.subject = subject; }; // Create a Student.prototype object that inherits from Person.prototype. // Note: A common error here is to use "new Person()" to create the // Student.prototype. That's incorrect for several reasons, not least // that we don't have anything to give Person for the "firstName" // argument. The correct place to call Person is above, where we call // it from Student. Student.prototype = Object.create(Person.prototype); // See note below // Set the "constructor" property to refer to Student Student.prototype.constructor = Student; // Replace the "sayHello" method Student.prototype.sayHello = function(){ console.log("Hello, I'm " + this.firstName + ". I'm studying " + this.subject + "."); }; // Add a "sayGoodBye" method Student.prototype.sayGoodBye = function(){ console.log("Goodbye!"); }; // Example usage: var student1 = new Student("Janet", "Applied Physics"); student1.sayHello(); // "Hello, I'm Janet. I'm studying Applied Physics." student1.walk(); // "I am walking!" student1.sayGoodBye(); // "Goodbye!" // Check that instanceof works correctly console.log(student1 instanceof Person); // true console.log(student1 instanceof Student); // true فيما يخص السطر ;(Student.prototype = Object.create(Person.prototype في الإصدارات القديمة من جافا سكريبت والتي لا تدعم Object.create يمكن إما استخدام بعض الحيل في خداع المتصفحات –هذه الخدع معروفة إما بالاسم polyfill أو shim—أو استخدام دالة تحقق نفس النتيجة كما في المثال التالي: function createObject(proto) { function ctor() { } ctor.prototype = proto; return new ctor(); } // Usage: Student.prototype = createObject(Person.prototype); التأكّد من أن this تُشير إلى الكائن المطلوب بغض النظر عن كيف للكائن أن يُستهل يمكن أن يكون صعبًا، ومع ذلك يوجد صياغة أبسط من شأنها أن تسهّل الأمر. var Person = function(firstName) { if (this instanceof Person) { this.firstName = firstName; } else { return new Person(firstName); } } التغليف Encapsulation ليس بالضرورة أن يعلم الصنف Student كيف تمّ تنفيذ/تعريف الطريقة ()walk للصنف Person لكي يستطيع استخدام تلك الطريقة، ولا يحتاج الصنف Student إلى تعريف تلك الطريقة صراحةً إلا إذا كان المطلوب التعديل عليها، ويُطلق على هذا الإجراء مفهوم التغليف encapsulation، والذي فيه يَحزم كل صنف البيانات والطُرق methods داخل وحدة/كينونة وحيدة. إخفاء المعلومات سمة شائعة في باقي اللغات البرمجية وعادةً ما توجد كخاصيات/كطُرق إما بالاسم private أو protected، وعلى الرغم من أنه يُمكن مماثلة/محاكاة ذات الأمر في جافا سكريبت، إلا أن هذا الأمر ليس مطلبًا من متطلبات البرمجة الكائنية. التجريد Abstraction التجرير ما هو إلا ميكانيكية تسمح للمطوّر في تجسيد جانب من المشكلة التي يُعمل عليها، إما من خلال الوراثة inheritance (التخصيص specialization) أو التركيب composition، وتُحقق جافا سكريبت التخصيص من خلال الوراثة، والتركيب من خلال السماح لحالات/أمثولات الصنف لتكون قيمًا لخاصيات attributes الكائنات الأخرى. الصنف Function في جافا سكريبت يرث من الصنف Object (وهذا يوضّح التخصيص في هذا النموذج) والخاصية Function.prototype ما هي إلا حالة/أمثولة من الصنف Object (وهذا يوضّح جزئية التركيب composition). var foo = function () {}; // logs "foo is a Function: true" console.log('foo is a Function: ' + (foo instanceof Function)); // logs "foo.prototype is an Object: true" console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object)); تعددية الأشكال Polymorphism كما أن جميع الطُرق methods والخاصيات properties معرّفة ضمن الخاصية prototype، فيُمكن لبقية الأصناف أن تُعرِّف طُرقًا methods بنفس الاسم، وستكون الطُرق في نطاق الصنف الذي عُرفت به، إلا إذا كان الصنفان على علاقة من نوع أب وابن parent-child، بمعنى آخر أحد الصنفان يرث من الآخر خاتمة إن الأساليب التي تم التطرُّق إليها ليست الأساليب الوحيدة التي يمكن استخدامها في تطبيق مفاهيم البرمجة الكائنية في جافا سكريبت، والتي هي مرنة إلى حد كبير في هذا الصدد، ولم تلجئ إلى أي خدع في تطبيق هذه المفاهيم، ولم تقلّد أيضًا الأساليب والنظريات المستخدمة في اللغات الأخرى، وفي جعبة جافا سكريبت العديد من الأساليب الأخرى لتطبيق مفاهيم متقدمة في البرمجة الكائنية التوجّه، ولكن هذه الأساليب المتقدمة هي خارج إطار مقالة تمهيدية، ربما نتطرّق إليها لاحقًا في الأكاديمية. ترجمة وبتصرّف للمقال Introduction to Object-Oriented JavaScript.

لا أعرف ما السبب ولكن يبدو لي أن المستقل يعمل ويستمر في العمل إلى أن يَخمد بغتة، وقد تعتقد أن هذا الخمود لن ينال منك على اعتبار أنك مستقل يعتز بعمله ويتقنه، ومنسجم مع الضغط والإجهاد المصاحب له، ولكني سأخبرك وبكل أسف خلاف ذلك: سيُصيبك هذا الخمود شئت أم أبيت، وقد انتاب هذا الخمود عموم المستقلين الذين أعرفهم مرة واحدة على الأقل، ولكن الحل موجود ويمكن تحاشي هذا المصير المشؤوم. كيف يمكن تفادي خمود المستقل؟نسمع ونقرأ بين الحين والآخر ومن العديد من الأشخاص عن طرق مختلفة في تجنّب خمود المستقل، ولكن ومن خلال تجربتي لا يوجد سوى طريقة واحدة ناجعة على المستوى البعيد، وهي جدولة مشاريع العملاء، ثلاث كلمات بسيطة قد لا توحي بالكثير، ولكنها نقيض ذلك تمامًا. ليست المسألة فقط عبارة عن جدولة المشاريع من خلال التيقّن من عدم تقاطع أوقات التسليم deadlines بين المشاريع، بل القضية أصعب من ذلك، حيث يوجد بعض الكيفيات الواجب أخذها بعين الاعتبار عند جدولة المشاريع في قائمة المهام. امنح فترة التنفيذ مدة احتياطيةنميل نحن المستقلين إلى المبالغة في تقدير قدراتنا ومهاراتنا، فقط لأنك تعتقد أنه بإمكانك استكمال المشروع في ثلاثة أيام لا يعني أن ستفعل ذلك، فقد تمرض، قد يتطلّب المشروع مزيدًا من البحث، قد يطرأ أي أمر جلل في حياتك الشخصية ولا يحتمل التأجيل، هذه أمور تحدث بين الحين والآخر ويجب التعامل معها، فإن لم امنح نفسي أريحية في وقت التنفيذ، سأتخلف عن الموعد النهائي للتسليم بلا شك، وعليه قسّم المشروع إلى واجبات صغيرة وأعطِ نفسك المزيد من الوقت لاستكمال هذه المهام أكثر مما تظن أنها تحتاج. لا تبالغ فلن تصل عنان السماءنميل أيضًا نحن المستقلين إلى المبالغة في حماسنا عندما يأتي الأمر إلى الوعود التي نقطعها على أنفسنا فيما يخص النتائج النهائيّة، ومن الهين جدًا السقوط في هذا الشرك، فقد تنقلب تدوينة إلى فاجعة، وذلك فقط لأن الكاتب المستقل أكّد للعميل أن التدوينة ستنتشر كالنار في الهشيم على مواقع التواصل الاجتماعي، ما أريد قوله، لا تحمّل نفسك ما لا طاقة لك به ولا تزد من الأعباء غير الضرورية على كاهلك، ولا تقطع وعودًا لا قدرة لك على ضمانها، فأنت كمستقل الشيء الوحيد الذي تستطيع ضمانه هو جودة عملك. التزم بجدول المواعيد ولا تحيد عنه البتةفقط لأن منزلك هو مكتبك ويتيسّر لك العمل بملابس النوم، لا يعني أن تفعل ذلك. لا يهم إن كنت تفضل نور الصباح أو عتمة الليل، ما يهم هو إعداد جدول زمني للمشروع والالتزام به، وبالتالي إن كان هذا يعني العمل من الساعة الثالثة بعد منتصف الليل، إذا عليك الالتزام بهذا الموعد إلى حين استكمال المشروع الحاضر بين يديك، إلا إذا تدخلت مشقات الحياة بالأمر، حينها ستحتاج مزيدًا من الوقت المقدر، وهنا تأتي نقطة الأريحية في موعد التسليم النهائي، والتي ستقطف ثمارها وابتسامة تملأ وجهك. تيقظ من وجود بيان نطاق المشروع scope creepتُعتبر هذه الحالة الوحيدة التي لا يستطيع المستقل النجاة منها إن راح ضحيتها، والطامة الكبرى أن العميل غالبًا لا يُدرك أنه يُثقل على المستقل: من فضلك، هلا كتبت تعريفًا للمقال الذي تعدّه من أجل النشرة البريدية newsletter حتى يتسنى لنا إرساله إلى قائمة المتابعين بأسرع وقت ممكن عند نشر المقال؟ الطلب بسيط، وبالأخص أنك صاحب المقال، ولن يستغرق كتابة التعريف الوقت الطويل، لا بل من الممكن استخدام مقدمة المقال نفسه، ولكنه غاب عنك وجوب إما تعديل المقدمة لتلائم طول تعريف المقال ليناسب مع النشرة البريدية أو كتابة واحدة جديدة كليًا، طبعًا في كلتا الحالتين هذا عمل إضافي يجب الاهتمام به، ومع العمل الإضافي يأتي الوقت الإضافي. بناءً عليه، في المرة القادمة التي يطلب فيها العميل تعديلًا بسيطًا أبلغه بعدم وجود أي إشكال في ذلك، مع وجوب تأجيل الموعد النهائي بضعة أيام بالإضافة إلى التكلفة الإضافية لقاء هذا التعديل، ومن المستحسن أن تُضمّن بندًا خاصًا بهذا الشأن في العقد أو اتفاقية الاستخدام التي تستخدمها، والذي يُمكن الرجوع إليه عندما يطلب العميل طلبًا إضافيًا. أتمت المهام أو عهدهاتناولنا قضية الوقت من جانب الأريحية في تنفيذ المشاريع، ولكن ماذا عن توفير الوقت؟ هنا يأتي دور أتمتة المهام أو تفويضها لأحدهم، فيمكنك إما البحث عن الأدوات التي من شأنها المساعدة في أتمتة بعض المهام في عملك، أو يمكنك توظيف أحد المستقلين في إنجاز المهام التي تستنزف ساعات من العمل أو تلك المهام التي لا تستسغ التعامل معها، وبهذه الطريقة سيكون لديك وقت إضافي لتستغله في رفع جودة المشروع. زبدة الكلاملا نحتمل كمستقلين الخمود، فهو لا يؤثر على الرزق والمدخول الشهري فقط، بل أيضًا يمنعنا مع العمل على ما نحب، بالإضافة إلى ما يعقب الأمر من كآبة في نفسيتنا، وسيكون هناك مطبات لا يمكن تجاوزها مهما كنت يقظًا، ولكن تذكّر دائمًا أن جدولة المهام بالطريقة المناسبة وتوزيع الوقت بين المشاريع وإعطاء متسع من الوقت لكل مشروع هو أفضل سبيل في مقاومة الممل والخمود. ترجمة وبتصرّف للمقال The smart freelancer’s guide to avoiding burning out (Hint: schedule client work) لصاحبته Samar Owais. حقوق الصورة البارزة: Designed by Freepik.

أصبحت قابلية الوصول accessibility من أبرز المواضيع والنقاشات تداولًا بين مطوّري الويب، وازداد اهتمام أصحاب المواقع حول قابلية الوصول ومدى تكيّف مواقعهم مع أغلب الأجهزة والشاشات، وأعطى هذا الاهتمام المتزايد المجال لبزوغ شكل جديد كليًا من أشكال التصميم وحمل الاسم ‹‹تصميم المواقع المتجاوبة Responsive Web Design››، فمع زيادة حصّة أجهزة الهاتف والأجهزة اللوحيّة، أصبح من الضروري التأكّد من تجاوبيّة وتوافقيّة الموقع مع أي جهاز يستطيع الوصول إلى الإنترنت. يهتم كل من التصميم الُمتلائم AWD والتصميم الُمتجاوب RWD في كيفيّة عرض صفحة الموقع على مختلف الأجهزة والشاشات، إذا ما الذي يجعل لكل منهما كينونة خاصة به؟ هذا ما سيُجاب عليه في السطور القادمة في توضيح للفروقات الجوهرية بين التصميم المتجاوب RWD والتصميم المتلائم AWD. ما هو التصميم المتلائم (Adaptive Web Design (AWD؟يَستخدم التصميم المُتلائم الخادوم server في تحديد الجهاز المستخدم في تصفّح الموقع، بمعنى آخر، سيُستخدم الخادوم في تحديد فيما إذا كان الموقع يُعرض على جهاز سطح مكتب أو هاتف ذكي smartphone أو جهاز لوحي tablet، وكما سيُستخدم قالب template منفصل لكل جهاز على حِدة، بمعنى سيختلف القالب template المعروض على شاشة الحاسب المحمول عن القالب المعروض على شاشة الهاتف الذكي، وبما أن الموقع المصمم باستخدام التصميم المتلائم مستضاف على مجال domain خاص به، فإن صفحات الموقع تحمّل بسرعة عالية نسبيًا. ما هو التصميم المتجاوب (Responsive Web Design (RWD؟يَستخدم التصميم المُتجاوب شيفرة CSS محدّدة لتعديل مظهر الموقع وفقا للجهاز الذي يستعرض الموقع، والبيانات المرتبطة بكل جهاز تُحمّل بصرف النظر فيما إذا كانت تُستخدم أم لا، وتمامًا عكس المواقع المصممة باستخدام التصميم المتلائم، فإن المواقع المصممة باستخدام التصميم المتجاوب تُحمّل بسرعة منخفضة نسبيًا. ما هو الفرق إذا؟يكمن الاختلاف الجوهري بين التصميم المتلائم والتصميم المتجاوب في أن المتلائم سيتغيّر تغيّرًا كليًّا لكي يُلائم أبعاد الشاشة المختلفة، بينما المتجاوب سيتغيّر بانسيابية ليتجاوب مع مجموعة من الأجهزة وقياسات الشاشات، وعليه سنستعرض بقيّة الفروقات التفصيليّة بين التصميم المتلائم AWD والتصميم المتجاوب RWD: يَستوجب استخدام التصميم المتلائم تطوير موقع منفصل إما عن طريق عناوين URLs منفصلة أو عن طريق تطوير شيفرة HTML/CSS منفصلة، وبالمقارنة بالمثل، فإن التصميم المتجاوب RWD يعتمد على HTML/CSS3 و جافا سكريبت كليًّا، مما يوفّر على المطوّر تطوير وصيانة عناوين URLs منفصلة و/أو HTML/CSSs.إن صُمّم الموقع باستخدام التصميم المتلائم، فإن إجراء التعديلات سيَستوجب مراجعة SEO (تحسين محركات البحث) والمحتوى وبُنية الموقع، وبعكس ذلك فإن صُمّم الموقع باستخدام التصميم المتجاوب، فإن إجراء التعديلات سيكون سهلًا للغاية لأن إجراءات تحسين محركات البحث والمحتوى والروابط links موجودة جنبًا إلى جنب مع HTML/CSS وجافا سكريبت JavaScript.بينما يَعتمد التصميم المتلائم على قياسات الشاشة المحددة مسبقًا، فيعتمد التصميم المتجاوب على شبكة grid مرنة وسلسة، بمعنى آخر، يتطلّب التصميم المتجاوب مزيدًا من الشيفرة البرمجية ليلائم صفحات الويب مختلفة القياسات، بينما يملك التصميم المتلائم تصميم معدّ مسبقًا تحدده برمجية معينة من جهة الخادوم في سبيل ملائمة قياسات الشاشة المختلفة.يقع الحمل الأكبر على عاتق الخادوم في معالجة تجاوبيّة الصفحات مع التصاميم المتلائمة، بينما يقع الحمل الأكبر على عاتق المُتصفّح (جهة العميل) في معالجة تجاوبيّة الصفحات.يستغرق التصميم المتلائم وقتًا أطول في التطوير، على عكس التصميم المتجاوب والذي يتطلّب وقتًا أقل نسبيًا.إن المواقع المصممة باستخدام التصميم المتلائم AWD تتعامل مع صور محسنة ومعدّلة لكل جهاز وقياس شاشة، بينما المواقع المصممة باستخدام التصميم المتجاوب RWD تحمّل الصور أوّلًا على المتصفّح ومن ثم يُعاد تحجيمها لتُلائم الجهاز الموافق لها.خاتمةبصرف النظر فيما لو اختير التصميم المتلائم Adaptive Web Design أو التصميم المتجاوب Responsive Web Design، فمن المهم وجود استراتيجية معينة من أجل أجهزة الهاتف، والتأكّد دائمًا من أن محتوى الموقع مُحسّن للزوّار مهما كان الجهاز المستخدم في تصفّح الموقع، طبعًا مع الحفاظ على موقع جميل ومتناغم الألوان والعناصر. ترجمة وبتصرّف للمقال Responsive Web Design vs Adaptive Web Design - Whats the Difference لصاحبه Mike Swan.

يُثير مصممي مواقع الإنترنت الجدل من حولهم، فهم على قدر عالي من الإبداع وقادرين على بناء وتصميم كل ما قد يخطر على البال، ولكن وخلف الكواليس يرتكبون العديد من الأخطاء، أخطاء من شأنها أن تهدد مستقبلهم الوظيفي. لا يهم إن كنت مصمم مواقع مبتدئ أو خبير، هذه الأخطاء الخمس لا بد من النظر في أمرها، فهي لا تميز بين أحد والجميع عرضة للوقوع فيها. 1. حضور ضعيف على الشبكة العنكبوتيةيجب عل مصمم مواقع الإنترنت إن يُثبت وجوده في الشبكة العنكبوتية، ويكون له من اسمه نصيب، وتجاهل ذلك هو من أكبر الأخطاء التي قد يقع بها المصمم، فنحن الآن في عصر الإعلام الاجتماعي social media، حيث تُبنى الثقة وتتشكّل من خلال عدد الأشخاص الذين يعرفون ويقدرون أعمال المصمم وإبداعاته، بمعنى آخر لا تتوقّع استلام المشاريع أو الانضمام إلى فريق من المحترفين إن لم يكن لك صفحة أعمال قوية تتحدث عنك وعن خبراتك. يوجد المئات من الآلاف من مصممي المواقع في الشبكة العنكبوتية بلا شك، ولكن من يعرفهم؟ القلة فقط من يَستمتع بمهنة التصميم، وذلك لأنهم أصحاب مهارات تواصل وقادرين على بناء شبكة من العلاقات والتي ستخدمهم في عملهم وستصب في مصلحتهم. يَلجأ بعض مصممو المواقع إلى التدوين لسد هذه الفجوة، أو بناء شبكة من المُتابعين على مواقع التواصل الاجتماعي، أو حتى إنشاء معرض أعمال فريد من نوعه ولا نظير له، استعرض موقع Deviant Art وبالأخص قسم Web Interfaces وسترى ما أقصده، أو ربما متجر التصاميم بيكاليكا، فمن المجدي جدًا تقديم تصاميمك إلى هذا النوع من المواقع في سبيل الحصول على المزيد من الاهتمام ونشر أعمالك إلى أكبر شريحة ممكنة. وعليه وباختصار فإن الحلول المقترحة لحل هذه المشكلة تتلخّص بالتالي: إنشاء مدونة والبدء بالتدوين أو على أقل تقدير المشاركة بالمجتمعات التقنية مثل مجتمع حسوب I/O ومنه مجتمع التصميم وقابلية الاستخدام.استفد من مواقع الإعلام الاجتماعي، وحاول أن تبدع في مجالك وليكن لك شخصية تميزك عن أقرانك من المصممين، فالجميع يحب اللمسة الإبداعية، المصممون وغيرهم، والشبكات الاجتماعية خير منصة وأكبر شبكة للانتشار.انضم إلى مجتمعات تعنى بالتصميم وما يدور في فلكه مثل أو Dribbble أو Behance.خذ بعين الاعتبار إنشاء صفحة أعمال portfolio مركزية شاملة لجميع أعمالك.قد تبدو هذه النصائح مملة في التطبيق وخاصة للمبتدئين، ولكنها الأساسات التي ستضمن للمصمم الانتشار والشهرة. 2. عدم تعلم مفاهيم جديدةلا يكلّف بعض المصممون أنفسهم بتعلّم البرمجة أو على الأقل أساسياتها، وذلك بحجة أنهم مصممين وليسوا مبرمجين، وهذا خطأ لا يُغتفر في رأيي، فلم يعد يقتصر احتراف تصميم مواقع الإنترنت على احتراف برنامج الفوتوشوب فقط، حيث يبحث أصحاب المشاريع والمواقع عن المصمم الشامل، ويعتقدون أنه بما أنك تستطيع التصميم وتملك الحس الفني في ذلك فمن المفترض أن تكتب الشيفرة التي تحوّل فيها تصميمك إلى شيفرة برمجية، بمعنى آخر، مهنة تصميم المواقع تغيّرت وتطوّرت ولا يمكن تجاهل هذا الأمر، وهذه حقيقة قد لا تعجب البعض، وأصبح من يَبرع في أكثر من مجال هو من له نصيب الأسد مقارنة بالذي يُركّز على شيء واحد فقط. إن كنت مصممًا لا يعرف أساسيات البرمجة، فأنصحك بالتعلم من الآن وعدم إضاعة المزيد من الوقت، ولمن يعرف أساسيات البرمجة ولكنه يهاب تعلم تقنيات مثل jQuery وجافا سكريبت أو لغة التوصيف HTML5 أو تقنيّة مثل CSS3، ستخطو خطوة كبيرة في مسيرتك المهنية لو تعلمت الأساسيات فقط، فالمسألة مسألة وقت قبل تجد نفسك مجبر على تعلّم هذه التقنيات، ويمكنك الاستفادة من الأكاديمية في هذه الجزئية فيوجد العديد من الدروس والمقالات في هذه الصدد. تتلخّص الحلول لهذا الخطأ القاتل بالنصائح التالية: تعلّم كتابة الشيفرة أو على الأقل اقرأ وافهم الأساسيات، الأمر الذي سيسمح لك بالنظر للأمور بمنظور مختلف.تابع المدونات التي تهتم بتصميم المواقع وآخر تقنياتها ومستجداتها.نصيحة أخيرة: لا يدوم شيء في عالم التكنولوجيا وما فات مات، وسيتميّز فقط من هم قادرين على التكيّف والتلاؤم وتقبّل كل ما هو جديد. 3. الطموح الزائد عن حدهوقعت في هذا الفخ سابقًا، وذلك من خلال قبول العديد من المشاريع، طبعًا يعود السبب إلى الطمع، والعواقب كانت وخيمة، فإن كنت تعمل بمفردك من دون فريق عمل كامل فلا يمكنك بأي شكل من الأشكال قبول جميع المشاريع والطلبات، لذا يجب أن تعتمد على جدول زمني بالمشاريع والمهام التي تعمل عليها وليكن عملاؤك بصورة الوضع، لكيلا يتوقعون استلام مشاريعهم بسرعة لا تستطيع الالتزام بها، بالمختصر إن تحميل نفسك أكثر مما يجب واستلام مشاريع من كل صوب وحدب هو مغامرة محفوفة بالمخاطر وعليك تجنبها والمسألة مسألة وقت قبل أن ينقلب السحر على الساحر. ستقود المبالغة والطموح الزائد عن حدّه دائمًا إلى عواقب لا يُحمد عقباها، فمثلًا مشكلة الحضور الضعيف على الشبكة العنكبوتية لا يُحل من خلال المبالغة وتحميل نفسك ما لا طاقة لك به، لا بل قد تزيد الطين بلّة، واليد الواحدة لا تصفق، فمن الصعب الموازنة بين التدوين وتنفيذ المشاريع وكتابة كتاب إلكتروني، ولذلك يجب التركيز على هدف واحد والتقيد بجدول زمني لا تحيد عنه. تتلخّص حلول هذه المشكلة كما في التالي، وذلك من خلال اتباع خطة محكمة قادر على تطبيقها والالتزام بها يوميًا: استخدم تطبيقًا يسمح لك بمتابعة مهامك وتصنيفها، أنصح بـِ Trello فهو خيار جيّد ويعتمد عليه الكثير من المصممين.خذ قسطًا من الراحة، ربما السفر إلى مكان لطالما رَغبت بزيارته وفكّر بما تريد التركيز عليه في المستقبل القريب.وتذكّر دائمًا أنه لا يمكنك حمل بطيختين بيد واحدة. 4. لا طموح أبدانجد البعض يبحث هنا وهناك ويريد التهام الأخضر واليابس وطموحه لا يقف عند حد معيّن، وبالمقابل يوجد ممن لا يحرّك ساكنًا في سبيل التغيير والتجديد، ما أقصده لا يجب على المستقل قضاء أكثر من سنتين في العمل على نفس النمطية، قد لا يكون هذا بالخطأ القاتل والذي قد يُهدد مسيرتك المهنية، ولكن من الممكن أن يكون سببًا يدعوك إلى الندامة في المستقبل جراء الملل والروتين القاتل، وعليه اطلب تظفر ومفاتيح الأمور العزائم. خذ زمام المبادرة، وابحث عن الجديد وتعلمه وفكّر خارج الصندوق، واعمل على أشياء جديدة كنت تخشى الخوض فيها: اكتب كتابًا إلكترونيًا عن الأشياء التي تبرع بها واطرحه للبيع ليكون لك دخلًا إضافيًا.سجّل فيديوهات تعليمة تخصصية في مجالك واطرحها بين مجاني وبين مدفوع.إن كنت تعمل بمفردك، ابحث عمن يشاركك ميولك واهتماماتك واعمل على بناء فريق للشروع في قبول مشاريع كبيرة ما كان لك لتقبل بها بمفردك.ابدأ بتعلّم تقنيّة جديدة.يمكنك تنفيذ النصيحة الأولى والثانية حتى لو كنت تعمل بوظيفة دوام كامل. 5. الحساسية الزائدةهذا من أكثر الأخطاء القاتلة التي أخشاها، حيث يَعتقد المصمم بأنه صاحب النظرة التصميمة المبدعة والصائبة، وعلى العميل الأخذ بها وعدم التشكيك فيها، ولكن وفي كثير من الأحيان هذا ليس الحال ومن المستحسن المثول لرغبة العميل وطلباته. عندما تتحدّث مع العميل، لا تخلط الأمور الشخصية بالعمل، بمعنى من الطبيعي جدًا أن يُشير لك العميل إلى علّة ما في التصميم، ويطلب تعديل/تنقيح منك، لا بل قد يرفض التصميم ككل ويطلب آخر، وهذه أمور شائعة وتحدث بين الحين والآخر، وإن تعاملت مع هذه الأمور بشيء من الغضب والغيظ فستكون الحلقة الأضعف والخاسر الأكبر. يمكن التغلّب على هذه العادة من خلال التروي والتفكير بالأمر وقبول حقيقة أنه ليس كل ما تفعله هو الحل الأمثل، وطلبات التعديل والانتقادات لا مفر منها، وستساعدك هذه الأمور على النضج كمصمم مواقع لا العكس. لا أقصد أن المستقل دائمًا هو المخطئ والعميل دائمًا على حق، ولهذا يوجد بعض الإرشادات والأفكار عليك أخذها بعين الاعتبار لتتجنّب شخصنة الأمور بينك وبين العميل: لا تغتر بنفسك وتعتقد أنك الأفضل في مجالك.تقبّل الانتقاد بصدرٍ رحب وتعامل معه بروحٍ رياضية.النقاش وتبادل الآراء هو المفتاح لفهم العميل.يجب على الجميع التغلّب على مسألة الحساسية تجاه الانتقاد، فالجميع معرّض له، والفطن هو من يعرف كيف يتجاوز الأمر بعيدًا عن تضخيم الأمور. هل هذا كل شيء؟لا تُعتبر مهمّة تصميم المواقع بالمهمة السهلة شئنا أم أبينا، ويوجد العديد من المطبات هنا وهناك، وباعتبار أن مسألة التصميم مرتبطة ربما بذوق الشخص وإبداعه لذلك نجد أن المصمم قد يأخذ الأمور على محمل جدي بعض الشيء، ولكن الالتزام بالنصائح السابقة سيتكفّل بالمطلوب والتقليل من الأضرار، ما رأيك هل يوجد أخطاء قاتلة أخرى يمكن لك أن تضيفها إلى القائمة السابقة شاركنا بها؟ ترجمة وبتصرّف للمقال C5Career-Threatening Mistakes Web Designers Make and How to Fix Them. حقوق الصورة البارزة: Designed by Freepik.

ما الذي يجعل من موقع الإنترنت سهل الاستخدام؟ يتردد هذا السؤال في الشبكة العنكبوتية كثيرًا، ومع ذلك لم يحصل هذا السؤال على إجابة شافية ووافية حتى الآن، حيث أنه لا يوجد خلطة أو وصفحة سحرية لتحقيق هذه السهولة. يتمحور مفهوم قابلية الاستخدام في عالم الويب حول جعل موقع الإنترنت قابلًا للفهم سهلًا للاستخدام، وقد تطوّر هذا المفهوم ليصبح فرعًا له قواعد وأسس، ولم يعد الأمر مجرّد اتباع تصميم دارج/شائع أو موضة جديدة، بل الأمر متعلّق بخواص ومميزات يجب على كل موقع امتلاكُها. يوجد هدفان رئيسيان خلف قابلية استخدام في مواقع الويب: توفير الوقت على المستخدم من خلال توضيح كل شيء في الموقع وتسهيله قدر الإمكان على المستخدم النهائي.زيادة رضا الزوّار من تجربة الموقع والتقليل من الأخطاء وردود الفعل السلبية من الزوّار.يجب إجراء دراسة في قابلية الاستخدام تخص موقعك والزوّار المستهدفين من الموقع للحصول على أفضل النتائج، ولكن يوجد مبادئ عامة يمكن تطبيقها على أي موقع: وضح الغرض الجوهري من موقعك لا يقتصر هذا الأمر على صفحة البداية homepage فقط، بل على أي صفحة هبوط في الموقع، وذلك لكي يملك المستخدم فكرة واضحة لا تشوبها شائبة عن مقصد الموقع، بمعنى على صفحات الموقع أن تجيب عن أسئلة المستخدم لا أن تطرح أسئلة جديدة، من الحلول الشائعة الاستخدام هو استخدام العبارات tagline ("في مهمّة لتطوير الويب العربي" مثلًا) والشعارات logo، ولكن وعند الرغبة في صنع انطباع مثالي ولا يُنسى فمن الممكن استخدام الإنفوجرافيك أو حتى خلفيات الفيديو background video والتي ستدعم فكرة الموقع بشكل أفضل. أرشد المستخدم في أرجاء الموقع رويدا رويدا إن المهم مساعدة المستخدم على إيجاد ما يَبحث عنه بأقل جهد ممكن، بمعنى حاول دائمًا أن تكون واضحًا باستخدام الكلمات والتعابير والصياغة اللغوية، وتجنّب استخدام العناوين الغامضة والمبهمة، ولا تجعل المستخدم يُمعن في التفكير، وإن توفّر بنية من المعلومات وتصفح سلس بين الصفحات هو من العوامل الأساسية لتحقيق قابلية استخدام ناجحة، وإن كان لديك فيض من المحتوى ولا يمكن الوصول إليه بالبحث وبالسهولة المطلوبة، إذًا يوجد مشكلة ويجب حلّها على الفور. قلل من الأخطاء وحاول تقديم الحلول لا يُلام المستخدم على أخطاء الموقع بأي حال من الأحوال، حتى لو كان هو مُسبب الخطأ، ولذلك من واجب صاحب الموقع التقليل من العوامل المسبّبة للأخطاء قدر الإمكان، فمن المجدي جدًا استخدام التلميحات المرئيّة والإرشادات النصيّة والتي من الممكن أن تقلّل من أخطاء ملئ النموذج form مثلًا، مع ذلك ستبقى هناك أخطاء لا يُمكن تجنبها، وهنا يمكن الاستفادة من صفحة منسقة ومرتبة لتعرض الأخطاء المتوقعة والتي قد يتعرّض لها المستخدم وكيف له تجنّبها. أبق المستخدم على إطلاع بحالة الموقعتُعتبر هذه النصيحة من أهم النصائح في قابليّة الاستخدام، والتي اقترحها Jacob Nielsen عام 1995، وهي ذات تأثير وفعالية ليومنا هذا، وبالتالي يجب التصريح والإشارة إلى حالة الموقع دون تأخير. اعمل على بناء ثقة ومصداقية لا تدور قابلية الاستخدام حول الأمور التقنية فحسب، فإن كان المستخدم لا يثق بموقع أو منتجك، فلا شيء سيصنع الفرق، لا المحتوى ولا التأثيرات البصرية، لذا تأكّد من وجود صفحة "من نحن" أو "حول الموقع" وقدّم من خلالها فريق العمل، وحبّذا أيضًا لو تم تدعيم هذا النوع من الصفحات بالتغطيات الإعلامية أو استطلاعات الرأي أو ربما شيء من الإحصائيات التي تخص الموقع، والأهم من هذا كله شهادات العملاء وتقديرهم لخدمتك customer testimonials. خاتمةتذكّر دائمًا عند العمل على قابلية الاستخدام أن المستخدم لا يرى الواجهة بالطريقة ذاتها التي أنت تراها كمُصمّم UI، ويجب الانتباه دائمًا إلى وجود نماذج مختلفة من المستخدمين، فمنهم الصبور ومنهم المتذمّر، ومنهم من ينبه إلى التفاصيل ومنهم الذي لا يدقّق، وعليه فإن التفكير بهذه الطريقة هو السبيل في الحصول على نتائج مرضية. ترجمة وبتصرّف للمقال 5Basic Usability Principles Every Website Should Follow لصاحبه Armen Ghazarian. حقوق الصورة البارزة: Designed by Freepik.

إن موقع التواصل الاجتماعي فيس بوك وبكونه أكبر شبكة اجتماعية في فضاء الشبكة العنكبوتية ساعد الملايين من الشّركات والمواقع في تسويق أعمالهم ومنتجاتهم، بالإضافة إلى كونه وسيلة تواصل فعّالة مع العملاء. سنتطرّق إلى بعض الحيل والأفكار والتي من شأنها أن تساعدك على جعل صفحة موقعك التجاري تبدو كصفحة احترافيّة وأكثر جاذبيّة للزوّار وزبائنك المستهدفين، فبتطبيق هذه الإرشادات ستتمكّن من تصميم صورة غلاف احترافيّة وجميلة المظهر والتي ستستدرج المزيد من المعجبين وتبقيهم على تفاعل مستمر مع صفحتك. اختر الصور المفرحة والزاهية حقوق الصورة لـ Viktor Hanacek. الصورة بألف كلمة كما هو معروف، ولذلك يجب اختيار صورة تتحدّث عن صفحتك، أو على الأقل أن تكون فريدةً من نوعها لتجذب انتباه الزوّار وتُسر الناظر إليها. يقول مصطفى خوندميري من مدونة KISSmetrics: إليك المرجع الشامل لاختيار الصور المناسبة لأغراض التسويق وأفضل المصادر للحصول عليها. استفد من المساحة غير المستغلة يمكن استخدام المساحة الخالية عند الرغبة في لفت النظر إلى رسالة الصفحة أو إلى شعار الموقع مثلًا، لاحظ المثال السابق كيف أن رسالة الصّفحة تتموضع أعلى ويسار الصورة مستغلّةً عُتمة الصورة والتباين بين الخلفية ونصّ الرسالة. تأكد من ترك مساحة كافية للصورة المصغرة والأزرار إن أزرار دعوة الإجراء call to action في صفحة فيس بوك مثل الزرّ "أعجبني" و "رسالة" يكسو صورة الغلاف والذي قد يُسبب مشكلة في وضوح الصورة خاصة مع الصور المزدحمة بالعناصر أو الصور الساطعة، وقد يربك هذا الأمر الزائر ويصبح الزر صعب التمييز، بمعنى آخر، خسارة معجب محتمل، ولتجنّب مثل هذا الأمر يمكن استخدام ألوان غامقة في القسم السفلي من صورة الغلاف أو يمكن استخدام تدرّج اللون الأسود أسفل الصورة لجعلها ملائمة للأزرار. استخدم الأبعاد المعيارية لصورة الغلاف يجب على أبعاد صورة الغلاف أن تكون مطابقة تمامًا للأبعاد التي وضعها موقع فيس بوك لها والتي هي 851px*315px، حيث أن اختيار أبعاد مختلفة سيكون له تأثير على جودة الصورة النهائي، ولذلك إن استخدام نفس دقّة صورة الغلاف سيجنبها إعادة التحجيم الآليّة والذي قد يجعل منها غير متجانسة مع عناصر الصّفحة. يُمكن القراءة عن أبعاد صورة الغلاف بقليل من التفصيل من مركز المساعدة في فيس بوك. يوجد أمر آخر يجب الانتباه إليه وهو عدم وضع أي شيء مهم في الجزء السفلي من صورة الغلاف، حيث أن الصورة الشخصية/المصغّرة وبالإضافة إلى عنوان الصّفحة والأزرار ستطمس هذا الجزء، والكثير من الصفحات تقع في هذا الخطأ. استخدم الصيغة PNGيُنصح بالاعتماد على الامتداد PNG، حيث لا يقلّل الفيس بوك من جودة هذه النوع من الصور، وكما يمكن استخدام هذا الامتداد عند نشر منشور ما كصور توضيحية أو عند نشر الروابط كصورة بارزة، فبمقارنتها مع الامتداد JPG، تبدو الصور ذات اللاحقة PNG أكثر وضوحًا ولا تفقد جودتها بعد الرفع، وعلى ما يبدو أن فيس بوك يملك خوارزمية ضغط قوية لضغط الصور بغرض تحسين أداء الموقع بتقليل حجمها، طبعًا يمكنك دائمًا الاستعانة بموقع TinyPNG كأداة لضغط ملفّات PNG والحفاظ على أفضل جودة ممكنة. ترجمة -وبتصرف- للمقال: 5Simple Facebook Cover Design Tips لصاحبه: Tomas Laurinavicius. حقوق الصورة البارزة: Designed by Freepik.

إن أقمت مأدبة عشاء، فسترغب بأن تجعل منها مثالية يتحدث عنها الجميع، وستَصب جلّ اهتمامك في اختيار الطعام والشراب، وستَحرص على تناغم الضيوف مع بعضهم البعض، ولكن ماذا لو حدث ما كنت تخشاه؟ وأطبق الصمت على الحضور بينما يتجادل اثنان من ضيوفك مختلفين في وجهات النظر حول موضوع ما، وبكونك المضيف ستكون مهمتك هي حلّ هذا النزاع. يصف السيناريو السابق إلى حد كبير مُدراء منصات الإعلام الاجتماعي social media managers، فالمُتابعون هم الضيوف، وأنت المضيف، فإن أساء الضيوف التصرّف، كيف لك أن تُسيّر الأمور وتُنهي هذه المأدبة بسلام؟ نشر أحد المنتديات (World Editor) مؤخرًا دليلًا ودراسة حول موضوع إدارة التعليقات، مشيرًا إلى ست نقاط يجب التقيّد بها للحصول على نقاشات متحضرة وتعزز ثقافة الرأي والرأي الآخر، إليك هذه النقاط الست: 1. إرفاق/نشر إرشادات عامة للمشاركات والتعليقات يُستفاد من هذا النوع من إرشادات الاستخدام لوصف توجّه موقعك والبيئة التي يتبناها، فالتصريح بوضوح بعدم استخدام لغة جارحة وعدوانية هو أمر أساسي في تحقيق الخطوة الأولى نحو الإدارة الجيدة، مع العلم أن العديد من منصات التواصل الاجتماعي تقدّم نظام ترشيح للكلمات، والذي يمكن استخدامه في منع ظهور كلمات الشتيمة أو حتى كلمات مفتاحية معينة للمواضيع المحظورة (الأمور السياسية مثلًا)، ولا يُفترض بصفحة الإرشادات العامة للتعليقات أن تكون معقدة، لا بل على العكس، خذ المثال التالي والذي هو لأحد صفحات الفيس بوك: 2. الاستعانة بمدير لشبكات التواصل Community Manager إن تخصيص شخص ما للاعتناء بقنوات الإعلام الاجتماعي يمكن أن يقدم دفعة كبيرة لشركتك وذلك من خلال الحضور القوي والفعال على الشبكة العنكبوتية، ويمكن لهذا الشخص أن يكون أنت أو شخص ما ذو كفاءة لذلك وتوظيفه لهذه المهمة، حيث سيحرص مدير الشبكات الاجتماعية على رفع مستوى النقاش، ويُشجع التعليقات التي تَخدم أهداف علامتك التجارية. 3. تشجيع فريق العمل على المشاركة في النقاش يُمكن لمشاركات فريق العمل أن يكون لها صدى خاص لدى القراء ورفع مستوى النقاش وجودته، وكما سيكون من الرائع لو استطاعت تعليقاتهم الجمع بين الترفيه والتّثقيف، الأمر الذي سيؤدي إلى عودة الزوّار لقراءة المزيد وربما طلب هذا النوع من المحتوى عالي الجودة، ويتميز فريق العمل عادةً عند الكتابة باستجابته الحسنة إلى النقد وتسليط الضوء على النقاط الأبرز التي تهتم بها الشركة، وحتى أن صحيفة الجارديان أعلنت بقولها: 4. عرض المشاركات القيمة يُمكن القول إن السماح للقرّاء بالإعجاب أو عدم الإعجاب بالتعليق هو أفضل طريقة للحصول على التعليقات المميزة وذات القيمة العالية، ويمنح هذا الأسلوب صاحب التعليق الفضل الذي يستحقه جراء مساهمته بمساهمة تستحق القراءة وأشاد بها الجميع. تُشير إحدى الدراسات إلى أن كل مستخدم يقضي قرابة 15 ساعة و 33 دقيقة على موقع التواصل الاجتماعي فيس بوك شهريًا، ويزداد معدل استخدام شبكات الإعلام الاجتماعي ازديادًا مستمرًا، ولذلك فإن فرصة نجاح علامتك التجارية مرتبطة مع تعليقات ومساهمات المتابعين والمهتمين بتجارتك، ويُمكن الإشارة هنا إلى إحدى الإحصائيات من موقع Statista والتي تُشير إلى ازدياد استخدام أجهزة الهاتف على حساب أجهزة الحاسب، الأمر الذي يزيد من أهمية شبكات الإعلام الاجتماعي social media أكثر من ذي قبل. 5. أعلم صاحب المنشور المحذوف بسبب حذف منشوره إن لم يكن يقصد المعلّق الإساءة لأحد بتعليقه سيجد نفسه محتارًا عندما يتمّ حذف تعليقه من دون معرفة سبب الحذف، ولذلك من المهم تنبيه المستخدم وتوضيح أسباب الحذف، بدلًا من إزالة المحتوى من دون تقديم أي سبب، وتُشير صحيفة ‹‹بي بي سي›› في هذا الصدد: عندما يقوم أحد المشرفين بإزالة تعليق ما فإنه يختار من القائمة المنسدلة سببًا للحذف، وهذا السبب سيظهر للمستخدم ليكون على دراية بذلك. 6. طلب الاستشارة القانونية والمشاركة بين فريق العمل لا تتوفّر في بعض الأحيان معلومات كافية لتصنيف تعليقٍ ما (من النّاحية القانونية) على أنه تشهير وإساءة وخاصّة عندما يتعلّق الأمر بالمساهمات العابرة والتي تكون صادرة من أسماء مجهولة (بدون اسم أو بأسماء مستعارة)، ولذلك يجب على فريق العمل، ابتداءً من المشرف إلى المدير وحتى صانعي المحتوى في المجتمع، الاطلاع الكامل على الحالة قبل البت في أمرها. الختام إن الاختلاف في الآراء هو ما يُعزز المحادثة ويقوي النقاش، وبدون هذا الاختلاف ستكون قنوات الإعلام الاجتماعي عبارة عن منصاتٍ مملة وخاملة ولا تصلح للترويج للماركة التجارية، وقد يميل البعض إلى إغلاق خاصية التعليق من الأساس، ولكن يجب الانتباه إلى نقطة هنا وهي أن النقاش والقيل والقال هو ما يزيد من شعبية العلامة التجارية، وكل ما يجب فعله هو إبعاد المتطفلين بين الحين والآخر. ترجمة -وبتصرف- للمقال: How To Moderate Social Media لصاحبه: Georgie Faure. حقوق الصورة البارزة: Designed by Freepik.

لا يُملي الأطباء النفسيون عليك ما يجب عمله، بل يستنبطون الأسئلة التي من شأنها أن تدفع بك نحو اكتشاف ذلك بنفسك لتستطيع التمييز بين الصحيح والأصح، المهم والأهم، لتعرف أنت الجواب، الجواب النابع من بنات أفكارك. يستطيع الإنسان العاقل الراشد فهم نفسه في نهاية الأمر، ويستطيع اتخاذ القرارات الحاسمة بشكلٍ ملائم، ولكن هذا لا يمنع من بعض العراقيل والمطبات بين الحين والآخر خاصّة مع تلك التفاصيل الدقيقة والتي قد تكون غير هامّة ولكنّها قد تأثّر على الصيغة النهائيّة. سيتناول هذا المقال هذه النقطة بالتحديد، ليكون أشبه بالبوصلة التي توجّه رائد الأعمال نحو النجاح، والتفّوق في مسيرته نحو الريادة، والدفع به نحو مواجهة الواقع واتخاذ ما يلزم من قرارات في سبيل حماية تجارته وشركته. سيكون التالي أشبه بجلسة نفسية للرّيادي أو لصاحب الشّركة النّاشئة، سيدفعك التفكير والإجابة على هذه الأسئلة على تحديد ما الذي يجب عليك فعله اليوم لتجني ثماره غدًا وذلك من خلال العوائد المادية ونمو الشركة. في جملة واحدة، ما الذي يقدمه منتجك ومن يشتريه؟في جملة واحدة، لماذا نشتري منتجك؟قد تبدو الإجابة على السؤالين السابقين سهلة من الوهلة الأولى، وقبل الإجابة عليك أن تضع في الحسبان أنه كلما كانت الإجابة قصيرة ودقيقة، كلما دلّ الأمر على أنك مُدرك حقيقة مكانك في السوق، وإن كانت الإجابة على شكل: "بصراحة لا أعلم لماذا الناس تشتري منتجنا" إذًا فهذه مشكلة يتوجّب معالجتها على الفور. إن كان لديك إجابة بالفعل، هل لأنك تعتقد يقينًا وبالدليل القاطع أن زبائنك يعون تمامًا سبب وجودك في السوق ولماذا يجب أن يشتروا منتج، أم أنك فقط تفترض ذلك؟ وما أقصده بالدليل القاطع هو وجود شهادات تجيب على هذا السؤال بأتم الوضوح (ربما عن طريق البريد الإلكتروني أو صفحات التواصل الاجتماعي) فيما عدا ذلك فأنت على الأغلب تفسّر ردود فعل زبائن على هواك، وإن كنت لا تملك هذا الدليل الآن، فلا بأس، ولكن عليك بالبحث عنه. إن كنت بالفعل تعرف الإجابة، فإن الإجابة على هذين السؤالين يجب أن تكون بوصلة عملية التسويق التي توجهك نحو الخيار الصحيح، لا بل إن الإجابات يجب أن تتصدّر صفحة البداية الخاصّة بالموقع، لا أظن أنه لديك شيء أفضل لتقنع به زبائنك، على أقل تقدير يجب أن تكون هذه الإجابات جوهر حملات التسويق. ما هو السبب الأبرز الذي يقف حاجزا أمام الطلب على منتجك؟على سبيل المثال: هل السبب هو عدم معرفة الناس بمنتجك من الأساس؟هل السبب هو السعر؟هل المنتج غير كامل المزايا والمواصفات؟هل السبب هو استراتيجية مبيعات غير منظّمة؟هل هو تصميم الموقع؟لا تكون معظم الشركات الصغيرة صريحةً حول هذه النقطة، مع ذلك من الممكن من أن يكون هذا السؤال هو السؤال الأهم، على سبيل المثال، ستكون إجابتي في بادئ الأمر على السؤال: "لماذا لا تملك المزيد من الزبائن؟" على النحو التالي: "لأننا نحتاج هذه الميزة/الخاصيّة"، فكثير من الأحيان ما تسمع أن شريحة معينة من الزبائن تقول: "سنشتري هذا المنتج إن قمت بإضافة كذا وكذا" وعليه أنت تستنتج أنه في حال تم إضافة الـ "كذا وكذا"، فإن الناس ستأتي وتصطف بطوابير لشراء منتجك. ولكن هل بالفعل هذا هو الحال؟ إن تمّ إضافة هذه الميزة (إن لم يكون المطلوب أكثر من ميزة، ومن تجاربي السابقة هذا ما يكون عليه الحال) ونلت رضى هذه الشريحة من الزبائن، هل هذا الأمر سيجلب لك 100 طلب إضافي؟ هل تظن أن الزبائن الذين نزّلوا التّطبيق ولم يشتروا أبدًا، كان عدم امتلاك التّطبيق لخاصيّةٍ ما هي السّبب الذي منعهم من الشّراء؟ وهل عدم امتلاك تلك الخاصية هي السّبب الذي منعت مئات من الآلاف من الزّبائن المُحتملين من زيارة موقعك من أساسه أو الخروج منه بعد ثوانٍ قليلة من زار الصّفحة الرئيسية؟ هل فعلًا الحلّ هو "المزيد من الخصائص"؟ عندما تسأل نفسك هذا السؤال وتكون صريحّا مع نفسك وتفكّر به مليًّا، سيقودك هذا الأمر لا شعوريًّا إلى الأمور التي يمكنك فعلها الآن لتحصل على المزيد من الزوّار، المزيد من تحميل النّسخة التّجريبية، وبالتالي المزيد من المبيعات، ولهذا لا تركن إلى أوّل إجابة سهلة تخطر على بالك. اذكر شيئا واحدا يمكنك فعله لتحصل على المزيد من التغذية الراجعة feedback من الزبائن/ المستخدم المحتملين/ الزبائن الذين خسرتهم؟يُعرف أن تغذية الزبائن الرّاجعة feedback هي الطريقة العملية في التقرير والفصل في كيفيّة بناء منتج يَرغب المستخدم بشرائه، وعلى الرغم من أنه ليس من الممكن طلب هذه الاستجابة مع كل شاردة وواردة، إلا أنه من المجدي جدًا تخصيص يوم من أيام الشهر في سبيل طلب وجمع أكبر قدر ممكن من المعلومات وردود الفعل من الزبائن والمستخدمين ومن أرض الواقع. إن توقفت المداخيل الآن كم من الوقت أمامك قبل أن تصل إلى مرحلة الإفلاس؟يقودك إدراك حقيقة هذا السؤال إلى أمرين: أولهما معرفة النفقات الشهرية والمدفوعات الشّهرية، وثانيهما ستعرف كم من الوقت ستصمد في السوق عند حدوث أزمة (في حال وجود عوائد) أو عندما لم تحصل على زبونك الأوّل لحدّ الساعة (كما هو الأمر بُعيد الانطلاقة). لا تنس أيضًا أن الإجابة على هذا السؤال ستساعد على الإجابة على سؤال آخر من نوع: "هل أستطيع تجربة هذا الأمر مع مشروعي"، مثلًا توظيف موظّفك الأوّل، أو كم تستطيع الإنفاق على الدعاية الإعلان، وكلما وجدت نفسك تُمعن في التفكير في فكرة مكلفة وجديدة والتي قد تكون مجدية، ولكنّها في نفس الوقت مُكلفة، فإن معرفة الإجابة على هذا السؤال ستساعدك على تقدير المدة الزمنية وإدراك ما هو على المحك، أو ما هي المدة التي ستبقى فيها واقفًا على قدمين في حال أن هذه المغامرة لم تُؤت بثمارها. ماذا لو أعطاك أحدهم 100 ألف دولار؟ كيف ستستخدمها لمضاعفة أرباحكم المستقبليةيقودك هذا السؤال إلى إدراك أهمية النشاطات التي لا تساهم في عوائد الشركة بشكل مباشر، ولقد تحدثنا سابقًا عن مسألة نشاطات التطوير والتسويق المجانية ولكن المستهلكة للوقت وفي معظم الأحيان هذه طريقة جيّدة في التفكير، ولكن في الأحيان الأخرى عليك أن تدفع القليل الحاضر للحصول على الكثير اللاحق. قد يكون من بين هذه النشاطات التي ترغب في القيام بها أمور مُلحّة وضرورية، والتي يمكن التّفكير في الحصول على استثمار صغير أو الاستدانة من أجلها، على كلٍ وبشكل عام من الأفضل دائمًا الاكتفاء بالحد الأدنى والضروري عند الاستدانة أو الاستثمار، ولكن إن كان المطلوب مجديا بالفعل وبإمكانه تحسين الوضع بشكل كبير فقد يجدر بك القيام بذلك. إن كنت مضطرا إلى توظيف أحدهم، كيف لك أن تحدد ما يجب عليه القيام به بحيث يساهم هذا الموظف بشكل كاف لتغطية راتبه؟أعلم أنك كرائد أعمال ناشئ وفي المراحل الأولى، قد لا تكون في وضعٍ يسمح لك بتحمّل نفقات إضافيّة، وربما تظن أنه لا يوجد أحد قد يلبي طلبك في جودة العمل المطلوبة، على كلٍ هذا ليس الغرض من السؤال، الغرض من السؤال هو معرفة واستكشاف ما هي المهام التي لا يتمّ الاهتمام بها بالقدر الكافي أو يتمّ تأجيلها إلى حين، وذلك لوجود أشياء أهم يتمّ العمل عليها، أو لوجود الكثير من الأعباء في الوقت الحالي، أو ربما لأنك لم تحدّد الأولويات بالشكل الأمثل. إن كنت لا تعتقد إنه من الممكن توظيف شخص بدوام كامل وقادر على تقديم عوائد مادية لتغطية راتبه فلا بأس بذلك. ولكن على الأقل سيدفع الأمر إلى معرفة المهام غير المنجزة التي كُنت ترغب في توظيف شخص للقيام بها، طبعًا لا حاجة إلى موظف جديد لتغطية هذه المهام، ولكن ربما عليك إعادة ترتيب الأوليات وجعل هذه المهام على رأس القائمة في الشهر المقبل. قد يكون هناك إجابة أفضل لهذا السؤال، ربما يجب التفكير والأخذ بعين الاعتبار طلب المساعدة، ولا يُقصد بالضرورة أن تكون هذه "المساعدة" توظيف موظف بدوام كامل، بل يمكن أن يكون مُستقلّا بدوام جزئي، أو يمكن أن يكون متدرّبًا intern، أو ربما شريك مستعد للعمل مقابل الحصول على أصول في الشركة. ما هي المهام التي تكره تنفيذها؟هل تحبّ تطوير خصائص جديدة ولكنك تكره الدعم الفني؟ هل تحب استعراض التّطبيق (عمل demo) ولكن تكره القيام بالمبيعات ؟ تحتاج إلى الإلمام بالأمور المالية للشّركة لكن تكره تفاصيل العمليات المالية؟ تحب مجال عملك لكن تكره الكتابة أو حتّى التغريد عنه؟ ما أريد قوله هو أن معظم العمليات التجارية مُملّة وهي أبعد ما تكون عن مهام مرحة، طبعًا هذا ليس بعذر لتجنّب هذه المهام بأي حالٍ من الأحوال، بل الأفضل تحديد هذه المهام والتي يمكن القول عنها أنها غير محبّذة ولكن ضروريّة في نفس الوقت، واتخاذ التدابير اللازمة حولها: إن قمت بإغلاق البريد الإلكتروني، وجميع برامج المحادثة، وهاتفك، وقمت بالتجهيز والتحضير إلى العمل فربما تصبح قادرًا على التحايل على بعض هذه المهام واستكمالها في أقل فترة ممكنة.يُمكن للمهام المملة أو لنقل الروتينية أن تُعهّد، مثلًا الاستعانة بالخدمات المصغّرة أسلوب مجدي بالفعل، وستجد أنه يمكن إنجاز هذه المهام بأقل التكاليف.راجع الأطراف الذين تتعامهم معهم الآن واسألهم فيما إذا كانوا يرغبون بتقديم خدماتهم لك، والتي عادةً ما تكون غير مكلفة.لا تنس أيضًا أنه يمكن الاستعانة بمتدرّب intern أو مُستقل وقبل أن تتحجّج في أن التكلفة قد تصبح عالية، فكّر بالخسارة التي قد تتكبّدها في حال أنك قمت بالعمل على هذه المهام بنفسك.مشاركة هذه المهام مع زملاء العمل؟ فمن المحتمل جدًا أنهم لا يكرهون هذا النوع من المهام بالقدر الذي تكره أنت، بمعنى يمكن المبادلة والمقايضة بين هذه المهام.إن كنت ما تزال لا ترغب في إنفاق المال لتوفير الوقت، إليك ما قاله "Dharmesh": ما هي الأمور التي يمكن إنجازها بشكل غير مثالي من دون أن تؤثر على المبيعات؟أنا من النوع الذي يملك تلك التركيبة المزعجة وهي البحث عن الكماليّة والهوس بالتحكّم بالشاردة والواردة، بحيث أحصل على نتائج استثنائية ومبهرة ولكن مع وقت أطول في التنفيذ، طبعًا يوجد تفاصيل جوهرية في نجاح أي الشركة ولا يمكن التهاون فيها: أي المزايا يجب تنفيذها الآن.كيف تمثّل نفسك وتتفاعل مع الزبائن.معرفة الكيفية والسبب الذي يدفع بالمستخدم إلى الشراء.ولكن، في حقيقة الأمر إن قائمة المهام الخاصّة بك ستكون طويلةً جدًا ويجب عليك الاختيار بعناية واستغلال الوقت أفضل استغلال وتصفية المهام بين ما يجب أن يكون مثاليًّا وبين ما يجب أن يكون عمليًّا، مثلًا، لا بد من وجود صفحة ‹‹تواصل معي›› ولكن ليس من الضرورة أن تكون ذات تصميم خلّاب المهم أن تكون متوفرة، أيضًا لا يجب على كل تدوينة أن تكون قطعة فنيّة خالصة المهم المحتوى المفيد، أيضًا على الإعلانات أن تكون مشكّلة ومختلفة بين بعضها البعض لأغراض الاختبار بدلًا من هدر الوقت على اختيار الكلمات wordsmithing، وأن تملك كتابًا إلكترونيًا حول أي شيء أفضل من ألا تملك كتابًا على الإطلاق. إن كان يمكن إنجاز المهمة بشكل غير مثالي من دون التأثير على العائد المادي، فربما من الأفضل أن تكون على هذا النحو، فستصبح عندها قادرًا على تفويض هذا النوع من المهام، وستصبح قادرًا على تحقيق وإتمام المهام بشكل أسرع. إن تسنى لك الحصول على ساعة كاملة مع مثلك الأعلى في مجالك، ماذا سيكون موضوع النقاش وما سيكون الهدف من الاجتماع؟أقصد بالسؤال السابق: "ما هي الخيارات الأبرز في مشروعك التجاري، والتي تشك في جدواها، وتشعر بأنه يجب الاستعانة بذوي الخبرة، ويمكن أن يقود صياغة السؤال بالشكل السابق إلى الحلول أيضًا، مثلًا، ربما يجب عليك الجلوس أكثر من ساعة للحصول على ما يقدمه المرشد، ربما عليك قراءة كتاب للمرشد، أو الإبحار في مدونته، أو مشاهدة محاضرات له، وذلك في سبيل الدخول إلى عقلية هذا المرشد بدلًا من الاكتفاء فقط في بالنصيحة، كما يمكنك في جميع الأحوال الاستعانة بقسم الأسئلة والأجوبة هنا في الأكاديمية لتحصل على إجابات شافية ووافية فيما بتعلق بريادة الأعمال وما يدور في فلكها. ترجمة -وبتصرف- للمقال: Startup Therapy: Ten questions to ask yourself every month لصاحبه: Jason Cohen. حقوق الصورة البارة: Designed by Freepik.

أي عنوان سيقدّم معدّل تحويل أعلى في إعلان على موقع ما: "أدوات لاستعراض الشيفرة البرمجيّة" أم "استعراض الشيفرة البرمجية وأدواتها"؟ الأمر محيّر والاختيار والفصل بينهما لا يبدو سهلًا، ولذلك يتمّ دائمًا التقرير عبر الاختبار. حصل البديل "A" على 32 نقرة ("أدوات لاستعراض الشيفرة البرمجيّة") والبديل "B" على 19 نقرة ("استعراض الشيفرة البرمجية وأدواتها")، والسؤال ومربط الفرس: هل هذا يعني أن الأمر محسوم لصالح البديل "A"؟ أم يجب التروّي قليلًا قبل الاختيار؟ أو ربما يجب تجربة عنوان مختلف كليًا؟ ستشكل الإجابة فرقًا كبيرًا على أرض الواقع بلا شكّ، لذلك يجب الاعتماد على معايير واضحة عند الاختيار، فالانتظار طويلًا بين الاختبارات سيكون هدرًا للوقت، وعدم الانتظار بالقدر الكافي سيؤدي إلى عدم الوصول إلى نتائج صحيحة وحاسمة للفصل بين الاختبارين، وبالتالي قد يتمّ اختيار البديل الخاطئ بدلًا من الاختيار الأنسب، والذي قد لا يكون أصلًا من البدائل الحاليّة. عادةً ما تكون الأمثولة treatment التي على شكل إحصائية صعبة الحساب وتشكّل معضلة لدى البعض، ولكن سيتمّ في هذا المقال التسهيل قدر الإمكان، وذلك باستخدام معادلة بسيطة للغاية، والتي من شأنها أن تُحدّد نجاعة اختبار A/B. سيتمّ الشرح بالاستعانة بهمستر اسمه "هَمي": اختار "هَمي" في الفيديو السابق الطعام العضوي (الطبيعي) ثماني مرّات واختار الطعام غير الطبيعي conventional أربع مرّات، يُشبه هذا الاختبار إلى حدّ كبير اختبار A/B. قد يعتقد البعض أن الطعام "العضوي" هو الرابح قطعًا، حيث أن "هَمي" اختاره ضعف عدد مرات اختياره للطعام غير الطبيعي، ولكن هذا التوقّع غير صحيح وبعيد كل البعد عن الدقّة، فالأرقام لها قول مختلف في الأمر. يعود هذا الأمر إلى طبيعة البشر والمعروفة بسوء التخمين والتقدير لهذا النوع من الأمور، فعلى سبيل المثال، يهاب معظم الأشخاص من التعرّض إلى حادث طائرة أكثر مما تخاف من التعرّض إلى حادث سيارة، على الرغم من أن التعرّض إلى حادث السيارة محتمل أكثر بست مرات. يمكن القول إن الطبيعة البشرية لا تحسن الحساب في معظم الأحيان، وعليه كيف يمكن الوصول إلى نتائج حاسمة لا تجعل للشك مجالًا؟ الخطوات هي كالتالي: تمثيل "عدد المحاولات الكلّي" بالرمز N. بالنسبة لـِ "هَمي" سيكون: 8+4 = 12. بالنسبة لمثال الإعلان سيكون: 32+19 = 51. تمثيل "نصف الفرق بين الرابح والخاسر" بالرمز D. بالنسبة لـِ "هَمي" سيكون (8-4) / 2 = 2. بالنسبة للإعلان سيكون (32-19) / 2 = 6.5. نتائج الاختبار الإحصائي ستكون حاسمة (ذو مدلول) إن كان مربّع D أكبر من N. بالنسبة لـِ "هَمي" D**2 هو 4 أصغر من 12، وعليه فإن النتيجة غير حاسمة. بالنسبة للإعلان فإن D**2 هو 42.25 وهذه القيمة أصغر من 51، وعليه فإن النتيجة غير حاسمة أيضًا. يُستنتج مما سبق أن نتيجة الإعلان لم تكن حاسمة، ولكن في حال استمرار الاختبار لفترة من الوقت، سيكون في اليوم التالي هناك 30 نقرة إضافية على البديل "A" لتكون المحصلة 62 و19 نقرة إضافية للبديل "B" لتصبح المحصلة 40، وبإعادة الحساب: N = 62+40 = 102 D = (62-40) / 2 = 11 D**2 = 121 وعليه فإن 121 أكبر من 102، وبالتالي الفرق هو حاسم وذو مدلول. لا يتمّ الحصول على نتيجة ذو مدلول (حاسمة) دائمًا رغم الاستمرار في الاختبار، عندها يجب إدراك أنه لا فائدة من هذا الاختبار والذي لا يقدّم ولا يؤخّر، حيثُ أن البدائل variants التي تمّ اختيارها ليست ذات فرق جوهري للمستخدم، وهذا يعني وجوب البحث عن بدائل جديدة. بعد تطبيق المعادلة على أمثلة من الواقع العملي، سيتمّ ملاحظة أنه عندما تكون N صغيرة القيمة سيكون من الصعب -إن لم نقل من المستحيل- الوصول إلى نتيجة حاسمة إحصائيًّا، فعلى سبيل المثال، ليكن لدينا إعلان بست نقرات وآخر بنقرة واحدة، وبالتالي فإن: N = 7 D = 2.5 D**2 = 6.25 مازال الاختبار غير حاسم، على الرغم من أن "A" تغلّبت على "B" وبنتيجة ستة إلى واحد، وعليه فإن فمن الضروري الانتظار قبل التقرير والفصل، والأرقام هي دائمًا الحكم الأوّل والأخير. ولكن ماذا عن السواد الأعظم من المستخدمين والذين لم ينقروا على أيٍ من الإعلانين؟ طبعًا المقصود بذلك هو "إعلان الظهور ad impressions" والذي لم يؤدي إلى عملية النقر، هل يجب أن تؤخذ بالحسبان وتُدرج في الإحصائية؟ لا يجب أن يُدرج إعلان الظهور في الحقيقة، فهو يُعتبر غير صالح (محاولات لا قيمة لها)، ولمعرفة السبب في ذلك، يمكن الاستعانة بتجربة "هَمي" مرّة أخرى، حيث أن الفيديو السابق قد تمّ تحريره طبعًا، ولعدد كبير من المحاولات "هَمي" لم يختر أي شيء، ولا يوجد أي مدلول في ذلك، بمعنى أنه لا يمكن القول إن "هَمي" قد أعجبه الطعام أم لم يعجبه في هذه الحالة. ولأن "نسبة النقر click-through rate" تعتمد على عدد النقرات clicks وعدد مرّات الظهور impressions، فلا يجب استخدامها في الحصول على نتيجة حاسمة إحصائيًّا، بل فقط يجب استخدام عدد النقرات فقط في المعادلة. أرجو أن تساهم هذه المعادلة في تقديم نتائج مرضية على مستوى الاختيار والفصل بين الإعلان الأنسب، فهي بسيطة بشكل كافي ولا حجة في تجاهلها، خاصّة وأن تقدير الأمور اعتباطيًّا قد يقود إلى عواقب وخيمة، لذلك من الحكمة الاعتماد على الأرقام في الوصول إلى نتائج تمثّل الواقع. بالنسبة للرياضيات والحساب وللراغبين في معرفة التفاصيل: إنّ الاختبار الإحصائي المستخدم هو Pearson’s chi-square، حيث فرضية العدم null-hypothesis يعود إلى اختبار A/B على المصادفة دون أي شيء آخر، ويعرّف قانون "كاي" بالصيغة التّالية (حيث أن m هو عدد الاحتمالات الممكنة ويمثّل Oi عدد الرصد في المحصّلة #i; ويمثّل Ei العدد المتوقّع للنتائج في المحصّلة #i): ستكون قيمة m = 2 باعتبار وجود احتمالين فقط مع اختبار A/B، ومن عملية عشوائية 50/50، فإن القيم المتوقعة هي Ei = n/2 حيث أن n = O1 + O2، وبالأخذ بالحسبان أن A = O1 ستكون القيمة الأكبر وأن B = O2 ستكون القيمة الأصغر من القيم المحصّلة من المراقبة observed، ستكون المعادلة (غير المبسّطة) هي بعد التعويض: مربّع الفرق بين A و n/2 هو نفسه بين B و n/2 (لأن A+B = n)، ولذلك يمكن استبدالهما بالمتغيّر الجديد D**2 (مربّع D). تعريف D في المعادلة A-B)/2) يأتي عبر استبدال n = A+B إلى D = A - n/2، وبالتالي فإن سيكون لدينا الصيغة المبسّطة التّالية: أصبح من الممكن الآن حساب الإحصاء chi-square، ولكن يجب الرجوع إلى توزيع chi-square لتحديد المدلول الإحصائي statistical significance، وبالتحديد: ما هي احتمالية أن حدوث هذه النتيجة عن طريق الصدّفة فقط؟ إن العودة إلى التوزيع وبالقيمة 1 من درجة الحرية degree of freedom (تعتمد B على A ولذلك يوجد درجة حرية واحدة)، ونحن بحاجة إلى تخطي القيمة 3.8 من أجل الحصول على ثقة بنسبة 95% و 6.6 من أجل 99% ثقة في فعالية الإعلان، وبناءً على الخبرة اخترت القيمة 4 كعتبة حرجة، وبعد الحلّ ومن أجل مربّع D: وعليه فقط تمّ البرهان وما هو مطلوب إثباته. ملاحظة أخيرة، إن كان مربّع D أكبر من ضعف n، فإن معدّل الثقة في هذه الحالة قد تجاوز 99% تمامًا. ترجمة وبتصرّف للمقال Easy statistics for AdWords A/B testing, and hamsters لصاحبه Jason Cohen.

يمكن لأي تعديل ومهما تناهى في الصِغر أن يكون له القول الفصل بين التصميم الجيّد والتصميم الآسر، وبالأخص مع تصاميم الويب، ويميل مُصممي مواقع الإنترنت إلى التركيز على الصور وألوان الصّفحة وتوزيع عناصرها والخطوط المستخدمة وإليه من هذه العناصر، ولكن يوجد بين السطور أمور أخرى يجب الاهتمام بها فيما عدا الجمالية، وهذا هو شأن المسوّقين الإلكترونيين، والذي يقضون جلّ وقتهم في الدراسة والاختبار لمعرفة كيف للمستخدم النهائي أن يتفاعل مع الموقع، فمثلًا: أين يتجه نظر الزائر في الزيارة الأولى؟ على ماذا سينقر؟ كم يقضي من الوقت في صفحة معينة وأخرى من مثيلتها؟ إن كنت تملك موقع وتحاول فيه الحصول على زوّار ودفعهم نحو القيام بإجراء، مثلًا: شراء منتج، أو التسجيل في النشرة البريدية newsletter، إذًا سيتوجب عليك الاهتمام بالأرقام والإحصائيات، وتصميم الجزئيات الصغيرة مثل أزرار دعوة الإجراء Call To Action (وهي الأزرار من نوع "اشترِ" أو "سجّل الآن") يُمكن أن يكون لها تأثيرًا قابلًا للقياس في طريقة تفاعل الزوار مع موقعك (تجربة المستخدم، أو اختصارًا UX) وعلى نتائج هذه التفاعل، فزرّ دعوة الإجراء CTA ذو التصميم الجيّد سيُساعد على تحويل الزوّار إلى زبائن، أو ربما متبرعين، أو مشتركين، أو أيًا كان الإجراء المطلوب. كيف يمكن تصميم زر دعوة إجراء CTA قادر على دفع الزوار للمتابعة قدما؟ هذا بيت القصيد ومربط الفرس، إليك أبرز الإرشادات بجانب أمثلة من فضاء الشبكة العنكبوتيّة: كيف يصمم زر دعوة الإجراء Call To Action؟ حجم زر دعوة الإجراء CTA إن المطلوب هو استجابة الزوّار إلى دعوة الإجراء عبر النقر على زر، فإذًا على هذا الزر أن يكون بارزًا وواضحًا ويجذب النظر مباشرةً، وهذا هو أساس ومفتاح نجاح أزرار دعوة الإجراء، ولكن مع الانتباه إلى عدم الغلو في الحجم لكيلا تبدو الصّفحة غير متناسقة وينقلب السحر على الساحر. يُمكن اختبار بروز الزر عن طريق إجراء اختبار "squint test"، وذلك عن طريق الابتعاد قليلًا عن الشاشة وإغلاق العينين بشكل غير كامل إلى إن يتمّ تغشية عناصر الصفحة، وإن استطاع الزر الحفاظ على بروزه حينها يمكن القول إن الزر ذو بروز مناسب. لون زر دعوة الإجراء لا يوجد لون سحري قادر على تقديم معدّلات عالية ولجميع الحالات والمواقع، رغم ذلك يبقى اختيار اللون اختيارًا هامًا ويجب الفصل فيه، تملك بعض الألوان دلالات قوية وارتباطات سيكولوجية، والتي يجب أخذها بعين الاعتبار، بالإضافة إلى وجوب انسجام هذه الألوان مع تصميم الموقع ككل. تَستمد الصّفحة التّالية ألوانها من تضارب الألوان التقليدية، وذلك عبر استخدام زر أخضر فاتح مع تدرّج بين البرتقالي الأحمر، والذي يُسيطر على باقي أجزاء الصّفحة، فأزواج الألوان والتي هي متعاكسة بطبيعتها، مثل التضاد بين الأحمر والأزرق، والتضاد بين الأخضر والبرتقالي، تملك تأثير مرئي عالي وستجذب النظر أكثر. يجب موازنة اللون مع الحجم في سبيل تحسين الظهور والمرئية الخاصّة بالزر، على سبيل المثال، يُمكن لزرٍ كبير مع لون ساطع أن يعطي نتائج عكسيّة، وعليه فإن تدرّج لوني خفيف مع الحجم الكبير سيفي بالغرض، وعلى الجهة الأخرى، فيمكن لزر صغير أن يستفيد من تدرّج لوني غامق ليحصل على البروز والوضوح اللازمين. هيئة زر دعوة الإجراء إن زر دعوة الإجراء CTA يمكن أن يفقد قيمته وهدفه ويضيع في الزحام إن لم يُدرك الزوّار أنهم قادرون على الضغط عليه، فاستخدام الأزرار هو أكثر من مجرّد تصميم وتقليد للواقع، بل هو وظيفة وأداة للتفاعل، والتي يبحث عنها المستخدم ويتوقّع وجودها حينما يتصفّح المواقع. إن الأمر المهم هو أن يبدو الزر في حقيقة الأمر زرًّا قابلًا للضغط، إن الشكل هو لاعب قوي في المعادلة هنا، حيث تأتي الأزرار عادةً بشكل مستطيلي إما بزوايا دائريّة أو حادّة، فإن تمّ اختيار شكل مختلف، فيجب جعلها واضحة وعدم ترك مجال للشك في أنها أزرار قابلة للضغط، ولتحقيق ذلك يُمكن الاستفادة من الظلال، أو شيء من البعد الثالث 3D. التباين والتضاد في أزرار دعوة الإجراء يمكن اعتبار التباين جزئيّة هامّة لأي تصميم، ولكن ومن أجل أزرار دعوة الإجراء call to action، يجب التفكير بها بطريقتين: أوّلًا: توافق لون الزرّ مع لون الخلفية: إن امتزج لون الزر مع لون خلفية الصفحة، فمن المحتمل جدًا فقدان بروز زرّ دعوة الإجراء CTA، وعليه يجب على الزر أن يكون بارزًا بدون التعارض مع الخلفية أو الألوان الأخرى في الصفحة. يُظهر المثال التالي، كيف تماشى تباين الأزرق الداكن مع الخلفيّة الصفراء، بالإضافة إلى عدم بروز الزر الآخر بلونه الخافت والقريب من لون الخلفية وليمثّل الخيار المُستبعد للمستخدم بجانب الإنشاء copywriting المحكم. ثانيًا: لون النص مع لون الزر: إن وضوح النص المكتوب داخل الزر هو من الأمور الهامة التي لا يجب تجنّبها، فبجانب اختيار خط مقروء وذو حجم مناسب، فإن اختيار لونًا ملائمًا للنص سيُساعد على تحسين قابليّة القراءة، ويجب دائمًا تجنّب الألوان التي هي قريبة جدًا من لون الزر نفسه، وبالإضافة إلى تجنّب الألوان التي تصبح غير واضحة عندما تمتزج مع بعضها (نص أبيض مع زر أصفر مثلًا)، والألوان كالأبيض مع الألوان الداكنة والأسود أو الأزرق الداكن مع الألوان الفاتحة هي ألوان مناسبة وتعطي نتائج جيّدة في معظم الأحيان. الموضع الأنسب لزر دعوة الإجراء ستكون الخطوة التالية هي تَموضُع الزر في الصفحة، وسيعتمد مكان الزر المناسب على مخطّط الصّفحة layout وتصميمها في أغلب الحالات. يُنصح عامةً بتوضيع الزر أعلى الصّفحة كما هو الأمر مع الجرائد، والتي تخصّص النصف العلوي من الصّفحة الأولى إلى الأخبار الهامة، وعليه من الممكن تطبيق نفس الفكرة في صفحة الموقع، وذلك من خلال توضيع الزر في المنطقة التي يراها الزائر أولًا والتي لا تستدعي التدرّج scroll down، ومهما كان موضع الزر، فإن إحاطته بالمساحة البيضاء −بعيدًا عن مزاحمته بالعناصر المختلفة− سيساعد على جذب الانتباه وإعطائه وزن بصري. الصياغة المناسبة لزر دعوة الإجراء Call-to-Action مخاطبة الزائر إن استخدام جمل فعلية تتحدّث إلى المستخدم وتسأله بوضوح تام إلى أخذ إجراء معيّن سيكون لها أثر إيجابي أكثر منه من استخدام الجمل الأسمية، فمثلًا، أيهما أفضل؟ زرّ ذو محتوى "اشترِ الآن" أم "صفحة الشراء"؟ ماذا عن زر يحتوي على عبارة "اختبر المنتج مجانًا" أم "نسخة تجريبية"؟ وبالتالي كلما كانت صيغة زر دعوة الإجراء ذات طابع شخصي، كلما كانت فرصة الاستجابة إلى الدعوة أكبر. العمل على ابتداع حاجة ملحة في نفس الزائر لا يُمكن الحصول على نتائج مرضية ودفع الزائر إلى النقر على الزر من خلال استخدام الطابع الشخصي فقط، بل يجب تقديم محفّز من نوع ما، والذي سيكون من خلال صياغة دعوة الإجراء call to action، حيث يمكن استخدام كلمات مثل "الآن" أو "اليوم"، أو "لفترة محدودة" أو تقديم عروض من نوع: "حسم لأوّل عشرة زبائن" وهكذا. يمكن لهذا الأسلوب أن يقدّم نتائج جيّدة في حض الزوّار على التفكير بأنهم يخسرون شيء ما في حال أنهم لا يُقدِموا على القيام بإجراء، ولكن يجب الانتباه إلى نقطة هامّة هنا، وهي الوفاء بالوعد، بمعنى لا يجب خداع الزبون وتقديم وعود لا يُمكن الوفاء بها (عن قصد أو غير قصد). العفوية في صيغة أزرار دعوة الإجراء لا يُفترض على دعوة الإجراء أن تُكره الزوّار على تلبية الدعوة، كما لا يجب التلاعب بالألفاظ فقط لكسب زبون جديد، فإن كانت النبّرة التي تستخدمها صيغة دعوة الإجراء ودودة وتحمل في طياتها قدر من الرحابة، فسيشعر الزائر بنوع من الارتياح بدل من أن تكون النبرة نبرة تسويقية بحتة، فصيغة غير متكلفة مثل "لنتواصل" أو "انضم إلينا" هي صيغة تدفع الزوّار إلى التواصل والاستجابة إلى دعوة الإجراء والتفاعل مع الموقع. الاختصار وتبسيط الأمور يجب على دعوة الإجراء CTA أن تجعل من الأمور واضحة وضوح الشمس، وتوضّح ومن اللحظة الأولى ماذا على المستخدم أن يتوقّع من استجابته إلى النقر على زر CTA، حيث يُساعد الحفاظ على نص واضح ومقتضب على تجنّب التباس من أي نوع، والذي قد يؤدي إلى تردّد المستخدم وعدم استجابته إلى الدعوة، ولكن وفي بعض الأحيان قد يتطلّب الأمر بعض التوضيح والذي قد لا يتّسع له المجال داخل الزر، وفي هذه الحالة، يُمكن كتابة معلومات إضافية خارج الزر (عادة ما يكون ذلك أسفل الزر وبخط صغير). التلميحات البصريّة مع أزرار دعوة الإجراء إن تحسين نص الزر بالتلميح البصري مثل أيقونة أو رسوم توضيحية يمكن أن يُساعد على إنشاء ارتباط مباشر وإضافة توضيح مباشر لزر دعوة الإجراء، فعلى سبيل المثال، يمكن استخدام سلّة الدفع الإلكترونيّة shopping cart للدلالة على المشتريات، أسهم متجهة نحو الأعلى أو الأسفل للدلالة على التحميل/الرفع upload والتنزيل download وهلم جرّا، مع الانتباه إلى نقطة عند استخدام هذا النوع من التلميح، وهي تضمين مساحة كافية بين العناصر وحواف الزر وذلك لكيلا تبدو العناصر متداخلة ومزدحمة فيما بينها. دراسة حالات واختبار A/B ستفيد العديد من مصمّمي الويب من اختبار A/B وذلك لمقارنة تأثير تصميمين مختلفين وجمع معلومات عن أداء كل منهما، ويُمكن للمسوّق إعداد الاختبار بنفسه أو الاعتماد على أدوات معيّنة تسهّل من العلمية، وسنتطرّق إلى بعض الدراسات التي تتحدّث عن هذا النوع من الاختبارات، حيث شارك موقع ContentVerve.com العديد من الحالات والنتائج فيما يخص أزرار دعوة الإجراء call-to-action buttons، طبعًا لا يوجد خلطة سحرية تُناسب جميع المواقع، ولذلك الاختبار هو الفيصل والحكم. لون الزر: يوضّح المثال في الصورة السابقة كيف أنه عندما تمّ تغيير لون الزر من الأزرق إلى الأخضر ارتفع معدّل المبيع بشكل ملحوظ، ويعود السبب على ما يبدو إلى الظهور والمرئية، حيث أن الزرّ الأزرق مشابه إلى لون النص المحيط بالزر وبالتالي امتزج معه ولم يبرز، ولكن وعلى الجهة المقابلة فإن الزرّ الأخضر كان أكبر حجمًا وذو سطوع لوني بارز، مما سمح له بالظهور ليقدّم هذه الفعالية، ولذلك يُنصح دائمًا باختيار لون واضح وجلي ومُتباين مع بقية أجزاء الصّفحة. يتوضّح من المثال التالي أيضًا كيف أن امتزاج ألوان الزر مع النص لها تأثير واضح على النتائج النهائية: تناقصت عدد النقرات في المثال السابق بعد تغيير اللون من الأسود إلى الأصفر، وعلى ما يبدو أن السبب في ذلك يؤول إلى أن النص مشابه جدًا إلى لون الزر، وبالتالي يُنصح دائمًا باختيار لون خط يتمايز بشكل مناسب مع لون الزر، فالأسود مع الألوان الفاتحة، والأبيض مع الألوان المعتمة/الغامقة عادةً ما تعطي نتائج إيجابية. تعبير/إنشاء الزر: يتوضّح من المثال كيف أن اختيار كلمات واضحة وصريحة تعبّر بالضبط عما سيحصل عليه الزائر لدى استجابته لدعوة الإجراء، قدّمت نوع من الطمأنينة للزائر ودفعته نحو التفاعل مع الموقع بعد أن أدرك نتائج استجابته لهذه الدعوة، وكان ذلك من خلال تحسين الإنشاء الخاص بالزر وإضافة عبارة "اختر المركز الرياضي" بعد أن كانت "احصل على العضوية" فقط، والنتائج كانت زيادة غير متوقعة بعدد النقرات والتي وصلت إلى زيادة قدرها 200%، ويستخلص من ذلك كيف أن التوضيح واختيار الصيغة الصحيحة من خلال توضيح وتفسير نتيجة النقر على الزر له أثر كبير على النتائج. الختام يمكن للتفاصيل الصغيرة أن يكون لها تأثيرًا بليغًا، سواءً مع التصميم عمومًا أو عند إنشاء أزرار دعوة الإجراء CTA، لذلك من المستحسن مراجعة أزرار دعوة الإجراء واختيار ما يناسب المنتج والتصميم، ويمكن الاستعانة ببعض الأدوات مثل: buttonoptimizer.com لإنشاء أزرار تلبّي الحاجة وقادرة على تقديم معدّلات تحويل عالية. ترجمة وبتصرّف للمقال Design a Call To Action Button That Converts: Tips, Best Practices, and Inspiration لصاحبته Janie Kliever.

هل فكّرت من قبل كيف لك أن تبدع في العمل الحر؟ إن العمل الحر ليس بالوظيفة التقليديّة، فإن حدث وسلكت طريق العمل الحرّ، ستكتشف بأن المستقلين هم على قدر عال من الإبداعيّة والإنتاجيّة وبشكل أكبر منه من هؤلئك الذين يعملون في المكاتب والشركات، حيث يملك المستقل حرية مطلقة على عكس القيود المفروضة في الوظائف الاعتيادية. أنت كمستقل يمكنك أن تعمل من أي مكان، وفي أي وقت: في مكتبك المنزلي، أو في المقهى الذي تحبه، أو حتى في غرفة نومك، لا يهم أيًا كان المكان فقط اختر ما يُناسبك، فهذه الحريّة والاستقلالية هي هِبَة لا تقدّر بثمن، ولكنّها ليست مجانية وعليك دفع الثمن، فأنت كمستقل ومطوّر مواقع، عليك التعامل مع مختلف العقليات، أيضًا الالتزام بمواعيد محدّدة، والأهم التعامل مع العدو اللدود للمستقل وهو التسّويف. ما الذي ستفعله لتصبح ذلك المستقل الحذق والذي يعرف من أن أين تؤكل الكتف وليكون لك نصيب الأسد في هذا الدرب؟ هذا هو لب وجوهر المقال، إليك أبرز الأفكار: مواقع العمل الحر والاختيار فيما بينهالا يُمكن لك أن تعمل بمجال العمل الحر من دون الاعتماد على نظامٍ/موقع يسمح لك بالحصول على المزيد من العملاء/الزبائن، فمواقع البحث عن الوظائف أصبحت كثيرة والاختيار بينها قد لا يكون بالأمر السهل، حيث يوجد العديد من منصات العمل الحر، لذا اختر بعناية، يوجد هنا في الأكاديمية مقالة مفصّلة تتحدّث عن أبرز مواقع العمل الحر اطلع عليها ربما تجد ضالتك في اختيار الأنسب. السير على روتين معينفي رياضة كرة السلّة، أفضل منفّذي الرمية الحرّة free-throw هم الذين يتبعون روتين محدّد في الرمي، حيث يسمح هذا الروتين للرامي بالتركيز وتجهيز الحالة الذهنية للتفكير في أنه يُسدّد رمية حرّة وليس أي رمية. حقوق الصورة Kate Parker يُمكن تطبيق نفس الأمر في عالم العمل الحر، حيث سيساعد السير على روتين يومي خاص بمهامك على زيادة الإنتاجيّة، عند طريق تحضير الحالة الذهنية وحثها على العمل، وبالإضافة إلى ذلك، ستكون قادرًا على إدارة وقتك بالشكل الأمثل والملائم، وعليه ضع أهداف ورتّبها تبعًا إلى الضرورة والأهمية، ووازن بين المهام وحكّم عقلك وخبرتك فيما يجب الانتهاء منه أوّلًا. اهتم بالأولوياتحدّد المشاريع التي يجب الانتهاء منها أولًا وما هي المشاريع الأكثر أهمية والتي يجب أن تعطيها القدر الكافي من الوقت، ولا تركّز على مشروع واحد فقط، بل حاول العمل على المهام التي تريد أن تنجزها أولًا. هل سمعت من قبل بمبدأ ‹‹بَرِتو›› Pareto Principle أو قاعدة 80-20؟ ربما عليك استخدام هذه الأسلوب الذي يَنصح به الكثير في الإدارة والتنظيم والذي قد يَصب في مصلحتك ومصلحة عملائك. تَفترض هذه القاعدة أو النظرية على أن 80% من النتائج ينتج من 20% من المُسببات، بمعنى أن 80% من أسباب تأخّر مشاريعك يأتي من 20% من العمل على مشاريع لا تستطيع الانتهاء منها، أو بمعنى آخر، يُستخدم 80% من الوقت في إنجاز ما قدره 20% من المشروع، وعلى الجهة الأخرى، يكفي استغلال 20% من الوقت لإنجاز 80% من المشروع. وعليه وفي المرة المقبلة التي تقبل فيها مشروع، فكّر في صعوبة إنجاز المشروع وما هو الوقت المقدّر لإنهائه، ومن ثم احسب كم ستكسب لقاء هذا التعب والجهد، وعندها ستحدّد النتيجة أولوية المشروع. حقوق الصورة Amy ملاحظات هامّة: ابدأ بالمشروع الأسهل، وبذلك ستنتهي منه بدل أن تقضي وقتًا كبيرًا على مشروع صعب يستهلك معظم الوقت. قم بإنهاء المشاريع ذات الموعد النهائي الأقرب. ركّز على المشاريع التي تحبّذ العمل عليها. اختر بين العمل ليلا أو نهاراهل أنت شخص يُفضّل العمل في وضح النهار أم في عُتمة الليل؟ فبعض الأشخاص يجد في الصباح الحماس والنشاط، بينما يجد البعض الآخر في عُتمة الليل عزلة فكرية من نوع خاص تدفع بهم نحو الإنتاجيّة، لا أنصح بوقت دون الآخر، ولكن من المهم الاختيار والتزام بغض النظر عما قد تختاره، يُمكنني القول إن الأمر بالمجمل هو من المحاسن، لأن معظم الوظائف الاعتياديّة لا تقدّم هذا النوع من المرونة من الأساس كل ما هنالك عليك التعامل مع التشتت الحاصل عند العمل في وضح النهار، لذا عليك المقاومة والعمل بجد لمقاومة هذا التشتت. حقوق الصورة Sam Javanrouh لذا اختر ولا تضيّع وقتك من دون تنظيم وتحديد ساعات الإنتاجيّة المثاليّة الخاصّة بك، وبذلك أنت تستثمر الوقت أفضل استثمار وتنجز أكثر وبمجهود أقل. حدد فترة زمنية لكل مشروعلا تهدر الوقت يُمنة ويُسرى، جدّوِلْ مهامك ومشاريعك، وخصّص لكل مشروع وقتًا محدّدًا وكافيًا من أجلك لتنهي ما يجب إنهاؤه، وبذلك ستعرف كم من الوقت ستحتاج لإنهاء المشاريع وبالقدر الكافي من الرعاية والاهتمام اللازمين، وإن حدث وفشلت في مجاراة الموعد النهائي وكنت تظن أن تمديد الفترة الزمنيّة سيؤثّر على باقي المشاريع، قم بتأجيله إلى حين الانتهاء من باقي المشاريع، وبذلك لن تقع في مطب "ضاع كل الوقت من دون إنجاز أي شيء". حقوق الصورة Sean MacEntee تجنب المشتتاتابتعد عن الملهيات عند ممارسة عملك اليومي، وبالأخص تلك الرغبة الملحة في معرفة من أرسل لك رسالة على تطبيقات التواصل الاجتماعي، من ‹‹فيس بوك›› و ‹‹واتساب›› WhatsApp، أو ألعاب العالم الافتراضي MMORPG، فهذه الأمور تبعدك عما يفترض بك التركيز عليه، وبالتالي عليك تحديد ما هي هذه المُتشتتات وتجنّبها بكل ما أوتيت من قوّة، وقد لا يكون الأمر سهلة في البداية، ولكن تذكّر أن جميع الأمور تبدو صعبةً من الوهلة الأولى وكل ما تحتاجه هو الإرادة فقط. استثمر أفكاركهل أصابك الإحباط من قبل وتَوقّفت مخيلتك عن ابتداع أي شيء فنّي تحتاجه لاستكمال المشروع؟ لا أخفيك هذه الحالة ليست باليسيرة، فأنت تواجه سد منيع وجدار مُصمت لا يتحرّك، ولكن ما الحلّ؟ كيف لك أن تنهي مشروعك (سواء كان تصميم أو كتابة إبداعية أو حتى ترجمة) باختصار شديد عليك: بتخزين الأفكار وتسطيرها outlining. تسطير الأفكار ما هو إلا وسيلة عمليّة لصون أفكارك الإبداعيّة للمشاريع اللاحقة، وتطبيق هذه الفكرة بسيطٌ للغاية: أولًا: عليك حمل أدواتك الكتابيّة حيثما ذهبت وحللت، استخدم قلم وورقة أو استخدم أحد التطبيقات في تدوين الملاحظات. ثانيًا: وعندما تجد نفسك محبطًا، استرح قليلًا، اشرب كأسًا من الشاي أو القهوة، أو تابع قناتك المفضّلة على يوتيوب، وإن خطر على بالك أي فكرة−والذي سيكون لا نقاش في ذلك− دونّه مباشرةً، أو ارسمه إن اقتضى الأمر، فبهذه الطريقة أنت تستثمر في "بنك أفكارك" إن جاز التعبير، وستسحب من هذا البنك عند الحاجة، وعلى مبدأ خبّي قرشك الأبيض ليومك الأسود. حقوق الصورة Marcio Eugenio صمم صفحة أعمال خاصة بك Portfolioلا يملك المستقلون شهادات مرجعية تُثبت قدراتهم في معظم الأحيان، ولا حتى اسمًا تجاريًا لتقديمه للعملاء، ولذلك قد يُشكّك بعض أصحاب المشاريع في خبرة بعض المستقلين، ولذلك على المستقل الحرص دائمًا على إنشاء صفحة أعمال، لتحتوي هذه الصّفحة على أعمال المستقل، ولكن مع الانتباه إلى تقديم أبرز الأعمال وليس كل الأعمال، وبهذه الطريقة وعندما يأتي أي زبون محتمل ليطلب قائمة بالأعمال السابقة، ستكون جاهزة ومُرتّبة وكل ما على المستقل هو إرسال العنوان URL إلى العميل، عندها سيدرك العميل جودة وخبرة المستقل. حقوق الصورة petermailloux.com خذ قسطا من الراحةإن الترويح عن النفس بين الحين والآخر أمرٌ ضروري لا شك في ذلك، فكما هو الأمر مع مواقع الإنترنت وحاجتها إلى مسح التخبئة cache بين الحين والآخر، وكما تحتاج أجهزة الحاسب إلى إعادة إنعاش refresh، أنت أيضًا كمُستقل تحتاج إلى راحة أيضًا، الأمر الذي سيجعلك أكثر إنتاجيّة تجاه المشروع، ناهيك عن الراحة الذهنية والنفسية. حقوق الصورة Steve Beckett زبدة الكلامتوجد صعوبات وتحديات في العمل الحرّ ولا يُمكن لأحد إنكار ذلك، ولكنك ستقطف ثمار جهدك المبذول في فك وحل هذه المشاكل، خاصة عندما تستخدم روتين معيّن، وتتجنّب المشتتات، ستجد نفسك تستمتع بالعمل كمستقل، وستجني أرباحًا تساوي أرباح الذي يعملون في المكاتب وبدوام كامل، هذا في البداية فقط، حيث أنك ستتفوّق عليهم بالأرباح بعد أن تصبح مُستقل ذكي ويعرف كيف يقتنص الفرص. ترجمة وبتصرّف للمقال How to Ace Your Freelancing Career لصاحبه Rudolph Musngi. حقوق الصورة البارزة: Designed by Freepik.

يُنفّذ ووردبريس استعلامًا في كل صفحة من صفحات الموقع، ليجلب البيانات من قواعد بيانات (databases) الموقع ومن ثُمّ يعرضها بالطريقة الّتي يحدّدها القالب (theme) المُستخدَم وذلك باستخدام حلقة التكرار (loop)، ويُشار إلى هذا الاستعلام بالاستعلام الرئيسي main query. سيَستخدم ووردبريس ملفّ القالب (template) المُلائم وذلك اعتمادًا على نوع الصّفحة الّتي يتمّ عرضها، بمعنى أنّ حلقة (loop) قد تتغيّر بناءً على المُحتوى، ولكنّه سيُنفّذ استعلامًا دائمًا لجلب البيانات من قاعدة البيانات. يُرغب أحيانًا في تغيير طريقة عمل الاستعلام، فعلى سبيل المثال في الصّفحة الرئيسيّة للمدوّنة قد يُرغب في استثناء منشورات من فئة (category) مُعيّنة، أو قد يُرغب في عرض قائمة بالمنشورات على حسب الصنف بدلًا من الترتيب على حسب التاريخ في صفحة الأرشيف (archive page)، كما من المُحتمل جدًا أنّ يُرغب في إضافة استعلامات إضافيّة إلى صفحات (pages) الموقع، أو إضافة قائمة بالمنشورات الأخيرة (recent posts) أو المنشورات ذات الصِلة بمنشورات أخرى، أو قد يُرغب في إنشاء ملفّ قالب (template) يستبدل الاستعلام الرئيسي (main query) باستعلام مُخصّص وجديد كليًّا. يجعل سكريبت إدارة المُحتوى ووردبريس من هذه التخصيصات أمرًا ميسّرًا للغاية، وذلك بطرقٍ عدّة، وذلك إما بالتعديل على الاستعلام الرئيسي أو بإنشاء استعلام جديد. سيتطرّق هذا الدليل إلى الأمور التّالية: متى يُستخدم الاستعلام المُخصّص، ومتى يُخصّص الاستعلام الرئيسي ومتى يتمّ إنشاء استعلام جديد. الطرق الخمس لإنشاء استعلامات مُخصّصة، بما في ذلك الطريقة الّتي لا يجب أنّ تُستخدم ولماذا. فهم الأساسيات يجب الإلمام ببعض المصطلحات قبل الدخول في التفاصيل وهي ضروريّة لمن لم يُنشئ استعلامات مُخصّصة من قَبل. الاستعلام (query) وهو طريقة يَستعين بها ووردبريس لجب البيانات من قاعدة بيانات الموقع، وتتضمّن هذه البيانات المنشورات posts، المرفقات attachments، التعليقات comments، والصّفحات pages، أو أي مُحتوى تمّت إضافته إلى الموقع. الحلقة (loop) وهي شيفرة/كود يستخدمها القالب (theme) (أو أحيانًا الإضافة plugin) لتحديد كيفيّة عرض نتائج الاستعلام على الصّفحة، فعلى سبيل المثال قد تُضمِّن الحلقة في الصّفحة الرئيسيّة عنوان كل صفحة (title)، مُلخص كل تدوينة (extract)، ربّما صورة مُميّزة/بارزة، ورابط صفحة المنشور (والّذي يُدعى permalink أو الرابط الثابت). ملفّات القالب (template files): وتُستخدم من قِبل القالب (theme) لعرض الصفحات لكل نوع من أنواع المُحتوى، مع العلم أنّ كل قالب (theme) يملك ملفّات قالب (template) تختلف عن الآخر، ولكن يجب على القالب (theme) أنّ يتضمّن ملفّ index.php رئيسي، وغالبًا على الملفّ page.php للصفحات الثابتة static pages، والملفّ single.php للمنشورات المُنفردة single posts، والملفّ archive.php لصفحات الأرشيف، وربّما الملفّ category.php للتصنيفات، والملفّ tag.php للوسوم، وغيره من الملفّات وللمزيد من التفاصيل يُمكن العودة إلى الصّفحة التّالية في التوثيق الرسمي. الوسوم/الدّوال الشرطيّة: والّتي من المُمكن أنّ تُستخدم في ملفّات القالب (template) أو من قِبل الإضافات plugins لتحديد نوع الصّفحة الّتي يتمّ عرضها، فعلى سبيل المثال الدّالّة/الوسم ()is_page تُحدّد فيما إذا كانت الصّفحة الّتي يتمّ عرضها ثابتة (static) أم لا، والدّالّة/الوسم ()is_home تُحدّد فيما إذا كانت الصّفحة هي صفحة البداية home page، ويوجد العديد من هذه الوسوم/الدّوال الشرطيّة منها ما يُحدّد فيما إذا كان المُستخدم مُسجّلًا دخوله logged in أم لا، وغيره من هذه الدوال. متى يجب استخدام الاستعلام المخصص في ووردبريس يوجد نوعان من الاستعلامات المُخصّصة: الاستعلام الرئيسي بعد تعديله. استعلامات جديدة كليًّا لجلب مُحتوى مُختلف/مُحدّد أو محتوى إضافي. التعديل على الاستعلام الرئيسي Main Query في ووردبريس يُمكن استخدام نسخة مُعدّلة من الاستعلام الرئيسي عند الرغبة في أنّ تَعرض الصّفحة نتائج الاستعلام الرئيسي لذات المحتوى ولكن مع بعض التحسين والتعديل، وفي هذا النوع من الاستعلام ليس الهدف هو إظهار محتوى مُختلف كليًّا، وليس من المُفترض إضافة حلقة تكراريّة (loop) إضافيّة. أمثلة للحالات الّتي من المُمكن بها استخدام استعلام مُعدّل: في الصّفحة الرئيسيّة للمدوّنة، عرض أنواع منشورات مُخصّصة بالإضافة إلى المنشورات. في صفحة أرشيف التصنيفات category، عرض منشورات من نوع مُحدّد فقط. في صفحة أرشيف التصنيفات، ترتيب المنشورات ترتيبًا أبجديًا بدلًا من الترتيب الافتراضي. يوجد العديد من الحالات الأُخرى، ولكن كما هو واضح فالتعديلات مقتصرة على التعديلات البسيطة للاستعلام. كتابة استعلام جديد في ووردبريس قد لا يكون التعديل على الاستعلامات كافيًا في بعض الحالات، فعندها يُمكن إنشاء استعلام جديد، ويتمّ بهذا الحصول على مرونة أكبر في بناء الاستعلام، ولكن لا يُحبّذ إنشاء استعلام جديد عندما يكون التعديل على الاستعلام الرئيسي أمرًا كافيًا، حيث يُمكن إنشاء استعلامًا جديدًا عند الحاجة إلى استخدام أكثر من حلقة loop واحدة في الصّفحة أو عند الرغبة في استبدال الاستعلام الرئيسي باستعلام جديد كليًّا. أمثلة للحالات الّتي من المُمكن بها إنشاء استعلام جديد عديدة ومُختلفة، ولكن أبرزها: عند تنفيذ حلقتين two loops في صفحة الأرشيف: إحداهما للمنشور الأوّل والأخرى للمنشورات اللاحقة، بهدف عرض مُحتوى مُختلف للمنشور الأوّل، مثلًا عندما يكون المطلوب أنّ يتضمّن المنشور الأوّل مُلخّص أو صورة مميّزة فقط بدون بقيّة المنشورات، ولكن إن كان المطلوب هو تنسيق المنشور الأوّل بشكل مُختلف فقط، فمن غير المُستحسن استخدام حلقات (loops) متعدّدة في ذلك، بل من المُفترض استخدام CSS لاستهداف المنشور الأوّل في التنسيق دون بقيّة المنشورات. في صفحة المنشور المنفردة (single post)، وذلك عند تنفيذ حلقة (loop) إضافيّة لعرض المنشورات الأخيرة (أو المنشورات المُميّزة) وذلك أسفل محتوى المنشور، بغرض تشجيع القارئ لقراءة المزيد. عند إضافة لافتة (banner) مربوطة مع منشور مُميّز منفرد single featured post (أو لجميع المنشورات المُميّزة) في أعلى كل صفحة من صفحات الموقع، كما هو الأمر عند إضافة منشور يُروّج إلى مُنتج جديد، وهذه الطريقة هي أكثر مرونة من إضافة لافتة ثابتة (static banner) بما أنّه من المُمكن تعديل المنشور المُستخدَم بسهولة. عند إنشاء قائمة من الصفحات في نفس القسم (section) من الموقع، وذلك عندما يَملك الموقع بُنية مُعتمدة على صفحات هرميّة/شجريّة، فمن المُستحسن وضعها في الشريط الجانبي sidebar. إنشاء قالب صفحة page template باستعلام مخصّص كليًّا لعرض المنشورات على حسب التصنيف (taxonomy) أو نوع المنشور (أو ربّما حسب المعيارين). في صفحة أرشيف نوع المنشور (post type archive page)، وذلك لعرض المنشورات حسب التصنيف (category) بدلًا من التاريخ. إنشاء لافتة (banner) في الشريط الجانبي sidebar للربط إلى المنشور الأخير مع صورته الرئيسيّة. إنشاء صفحة لعرض المنشورات المُرتبطة فيما بينها وبأكثر من تصنيف، مثلًا عرض المقالات البرمجيّة وللغة روبي (Ruby) مثلًا ولكاتب مُحدّد. إنشاء نوع منشور لمحتوى الشريط الجانبي واستعلام منشورات هذا النوع في الشريط الجانبي، الأمر الّذي يُساعد أصحاب الخلفيّة غير البرمجيّة في إضافة مُحتوى إلى الشريط الجانبي بمرونة أكثر فيما لو تمّ استخدام ودجت (widget). يوجد العديد من السيناريوهات الأخرى، ولكن القائمة السابقة تعطي فكرة عامّة، ولن يتمّ التفصيل في كيفيّة تنفيذ كلٍ منها بل سيتمّ تغطية بعض الأمثلة. طرق إنشاء استعلام مخصص Custom Query يتوفّر خمس طرق لإنشاء استعلامات مُخصّصة custom queries، ويُمكن أنّ تُقسّم هذه الطرق تبعًا فيما إذا كان سيتمّ التعديل على الاستعلام الرئيسي أو سيتمّ إنشاء استعلام جديد. الطرق لتعديل الاستعلام الرئيسي هي: استعمال الخطّاف الإجرائي pre_get_posts، والّذي يسمح للمطوّر في التعديل على الاستعلام الرئيسي عن طريق إضافة دالّة إلى ملفّ الدّوال الخاصّ بالقالب (theme) أو بواسطة إضافة (وليس في ملفّات القالب template) ويُمكن دمجه مع تصريح شرطي conditional statement لتأكّد من أنّه يُنفّذ فقط على الصفحات الّتي تعرض أنواع مُحدّدة من المُحتوى. استعمال ()query_posts، مع العلم أنّ وجود هذه الدّالّة ضمن القائمة لتوضيح لماذا لا يجب استخدامها، فالدّالّة ()query_posts هي دالّة غير عمليّة ولا يُمكن الاعتماد عليها في تعديل وتحسين الاستعلام الرئيسي، فبدلًا من تحسين وتعديل الاستعلام الرئيسي فهي تجلب الاستعلام الرئيسي ومن ثُمّ توقفه وتبدأ مرّة أخرى بإعادة تنفيذه مع التغيرات المُدخلة، الأمر الّذي سيؤثّر على أداء الموقع، ومن المُمكن جدًا أنّ لا تعمل كما يجب لدى استخدامها مع التّصفيح pagination. تسمح الطرق المتبقية في إنشاء استعلام جديد: باستخدام الصنف WP_Query، وهي طريقة مرنة جدًا في إنشاء استعلام جديد، ويُستخدم هذا الصنف (class) عند إنشاء حلقة (loop) ثانية في ملفّ القالب (template file) أو عند إنشاء ملفّ قالب باستعلام مُخصّص كليًّا لاستبدال الحلقة الرئيسية (main loop)، ولكن يجب الحذر في استخدامه، وتأتي الخطورة في عدم تصفير (reset) الاستعلام بعد تنفيذ الحلقة (loop)، والّذي يعني أنّ ووردبريس لن يكون قادرًا على التعرّف بشكلٍ صحيح ما نوع الصّفحة الّتي يتمّ عرضها، ولكن من المُمكن حل هذه المشكلة بسهولة. دالّة/وسم القالب ()get_posts، وتُستخدم في ملفّ القالب (template) (بما في ذلك الشريط الجانبي sidebar وذيل الصّفحة على سبيل المثال) لجلب قائمة المنشورات، ويَستخدم الصنف WP_Query لعمل ذلك، ويُمكن استخدام مُعامِلات (parameters) معه لتحديد المنشورات المطلوبة. دالّة/وسم القالب ()get_pages، والّتي تعمل بنفس طريقة عمل ()get_posts، ولكن في جلب الصفحات بدلًا من المنشورات. سيتم التطرّق إلى أهم هذه الطرق بمزيد من التفصيل بعد أنّ تمّ عرضهم بشكل سريع. الخطاف الإجرائي pregetposts إن الدّالّة pre_get_posts هي خطّاف إجرائي (action hook)، وبالتالي يُمكن ربط دالّة معها لجعل شيء ما يحدث في الوقت الذي يُنفّذ ووردبريس الإجراء pre_get_posts، وكما هو واضح، يُنفّذ ووردبريس هذا الإجراء (action) مباشرةً قبل جلب المنشورات من قاعدة البيانات، ولذلك فإن أي دالّة يتمّ ربطّها معها ستؤثّر في كيفيّة جلب ووردبريس لتلك المنشورات. إن استخدام الدّالّة pre_get_posts يتطلّب إنشاء دالّة ومن ثُمّ ربطّها مع الإجراء، كما في التّالي: <?php function my_function() { // contents of function go here } add_action( 'pre_get_posts', 'my_function'); ?> أوّلًا، تمّ إنشاء الدّالّة وبالاسم my_function وما ستفعله هذه الدّالّة سيكون داخل الحاصرتين (braces). ثانيًا، تمّ ربط تلك الدّالّة مع الخطّاف pre_get_posts باستخدام الدّالّة ()add_action، وبدون ذلك لن تعمل الدّالّة. سيتمّ الحاجة غالبًا بالإضافة إلى ما سبق، إلى تضمين وسم/دالّة شرطيّة داخل الدّالّة المنشأة، فبدونها لن يقوم ووردبريس بتنفيذ الدالة المُنشأة كل مرّة يتمّ فيها جلب المنشورات، بما في ذلك عند التعامل مع المنشورات في الصفحات الإداريّة (admin)، وعليه ستكون الدالة المُنشأة بالشكل التّالي: <?php function my_function() { if ( !is_admin() && $query_>is_main_query() ) { // contents of function go here } } add_action( 'pre_get_posts', 'my_function'); ?> تمّ في الشيفرة السابقة، التأكّد من أنّ الصّفحة ليس صفحة إداريّة (admin) وأيضًا أنّ الاستعلام الّذي يتمّ تنفيذه هو الاستعلام الرئيسي (main query)، ومن المهم التأكّد من أن ووردبريس يُنفّذ الاستعلام الرئيسي تجنبًا للمشاكل المحتملة عند تنفيذ الدّالّة من أجل استعلامات إضافية قد تم إنشاؤها، كما يُمكن إضافة وسوم/دوال شرطيّة إضافيّة هنا كما سيتمّ لاحقًا. إدراج أنواع منشورات مخصصة في صفحة المدونة الرئيسية يَعرض ووردبريس بشكلٍ افتراضي قائمة بالمنشورات فقط في صفحة البداية (homepage) فإن تمّ إنشاء نوع منشورات مخصصة، فسيفترض ووردبريس أنّ المُراد هو عرضها في مكان آخر وعدم تضمينهم هنا، ولكن أحيانًا قد يُرغب في عرض أكثر من نوع منشور واحد في صفحة البداية (home page) وفي هذه الحالة يجب استخدام الخطّاف pre_get_posts. ويتم ذلك عبر إضافة الشيفرة التّالية إلى الملفّ functions.php الخاصّ بالقالب (theme) أو الإضافة المُنشأة. <?php function my_function() { if ( is_home() && $query->is_main_query() ) { $query->set( 'post_type', array( 'post', 'custom_post_type') ); return $query; } } add_action( 'pre_get_posts', 'my_function'); ?> تتأكّد الشيفرة السابقة من أمرين اثنين، أوّلًا فيما إذا كان الاستعلام هو الاستعلام الرئيسي وثانيًا فيما إذا كانت الصّفحة هي صفحة البداية (باستخدام الدالة ()is_home) بعد ذلك يتمّ تعيين (set) الاستعلام ليتضمّن نوعين من المنشورات: هما 'post' و 'customposttype'، ليكونا نوع المنشور المُخصّص، مع مُلاحظة وجوب تضمين 'post' هنا إن كان المرغوب من صفحة البداية أن تَعرض المنشورات أيضًا بالإضافة إلى نوع المنشور المخصّص، وفي حال إضافة custom_post_type فقط، سيتمّ استبدال السلوك الافتراضي وعرض المنشورات من نوع المنشور المخصّص، وقد يكون هذا المرغوب في بعض الحالات ولكن ليس في المثال الحالي. عرض منشورات من نوع المنشور المخصص في صفحة أرشيف التصنيف يَفترض هذا المثال أنه عندما تمّ تسجيل نوع المنشورات المُخصّصة، فقد تمّ منحها دعمًا للتصنيفات (categories) وتم إسناد التصنيفات إلى منشورات نوع المنشور المُخصّص، ولتعديل أرشيفات التصنيفات لكي تَعرض منشورات نوع المنشور المُخصّص يُستخدم التّالي: <?php function my_function() { if ( is_category() && $query->is_main_query() ) { $query->set( 'post_type', 'custom_post_type' ); return $query; } } add_action( 'pre_get_posts', 'my_function'); ?> تتأكّد الشيفرة السابقة من أنّ الاستعلام المُنفّذ هو الاستعلام الرئيسي والصفحة هي أرشيف التصنيفات وذلك باستخدام الدالة ()is_category، ومن ثُمّ تمّ التعديل على الاستعلام ليجلب منشورات نوع المنشور المُخصّص، وبما أنّه لم يتمّ تضمين 'post' هنا، فإن المنشورات الاعتياديّة لن يتمّ عرضها في أيٍ من أرشيفات التصنيفات، بالإضافة إلى أنّه لن يتمّ الحاجة إلى استخدام مصفوفة بما أنّه تمّ تحديد نوع منشور واحد. إنّ كان المطلوب هو التحديد بدقة أكبر فيُمكن تحديد نوع مُعيّن من التصنيفات كما في التّالي: <?php function my_function() { if ( is_category( 'category-slug' ) && $query->is_main_query() ) { $query->set( 'post_type', 'custom_post_type' ); return $query; } } add_action( 'pre_get_posts', 'my_function'); ?> سيتمّ في الشيفرة السابقة التعديل الاستعلام الرئيسي في صفحة الأرشيف category-slug فقط، حيثُ أنّ category-slug هو الاسم اللطيف (slug) للتصنيف (category). تغيير طريقة ترتيب المنشورات لن يتعامل المثال الأخير مع ما هي البيانات الّتي يتمّ استعلامُها بل مع كيف يتمّ عرضها/خَرْجُها (output)، فمثلًا في صفحات أرشيف التصنيفات (category archive) وعند عدم الرغبة في ترتيب المنشورات بواسطة التاريخ ولكن بالترتيب الأبجدي، يُمكن استخدام pre_get_posts كما في التّالي: <?php function my_function() { if ( is_category() && $query->is_main_query() ) { $query->set( 'orderby', 'title'); $query->set( 'order', 'ASC' ); return $query; } } add_action( 'pre_get_posts', 'my_function'); ?> تمّ في الشيفرة السابقة استعمال المُعامِل orderby والمُعامِل order لتحديد بناءً على ماذا ستُرتّب المنشورات وكيف ستُرتّب وذلك عند عرضها، وللمزيد من المُعامِلات (parameters) الّتي يُمكن استخدامها مع pre_get_posts يُمكن الرجوع إلى التوثيق الرسميّ للصنف WP_Query والّذي يستخدم نفس المُعامِلات. الصنف WP_Query يُعتبر الصنف WP_Query الطريقة الأفضل لكتابة استعلام مُخصّص، ويُستخدم عند الرغبة في استبدال الاستعلام الرئيسي (main query) باستعلام جديد أو عند الرغبة في إضافة استعلام جديد بالإضافة إلى الاستعلام الرئيسي. أجزاء الصنف WP_Query: المُعطيات (arguments) للاستعلام، وذلك باستخدام المُعامِلات (parameters) بشكل مُشابه إلى الّتي قد تُستخدم مع أجل pre_get_posts. الاستعلام نفسه. الحلقة (loop). الإنهاء: وذلك بإغلاق وسوم if و while، وتصفير (reset) بيانات المنشور. ستكون الشيفرة على النحو التّالي: <?php $args = array( // arguments for your query ); // the query $query = new WP_Query( $args ); // The Loop if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post() : // contents of the Loop go here endwhile : endif; /* Restore original Post Data */ wp_reset_postdata(); ?> كما هو واضح إن الأمر أكثر تعقيدًا من استخدام pre_get_posts وهو أحد الأسباب لتجنّب استخدام الطريقة السابقة عندما يكون المطلوب هو التعديل على الاستعلام الرئيسي، ولكن السبب الرئيسي لتجنّب استخدامها هو أنها ستُجهد سكريبت ووردبريس نفسه، الأمر الّذي قد يؤثّر على أداء الموقع بالمُجمل. سيتمّ إلقاء نظرة على مثال للتوضيح أكثر، حيثُ سيتمّ إضافة حلقة (loop) ثانية بعد محتوى المنشور في ملفّ القالب (template) المُسمّى single.php، لعرض قائمة بالمنشورات المُميّزة، حيثُ تمّ تعريف هذه المنشورات المُميّزة باستخدام التصنيف "featured" (مُميّز)، ولكل واحدة من هذه المنشورات سيتمّ عرض الصورة المُميّزة والعنوان (title) مع الروابط الّتي تُحيل إلى المنشور: <?php $args = array( 'post_type' => 'post', 'posts_per_page' => '4', 'post__not_in' => array( $post->ID ) ); // the query $query = new WP_Query( $args ); // The Loop if ( $query->have_posts() ) { ?> <section class="recent-posts clear"> <?php while ( $query->have_posts() ) : $query->the_post() ; ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'left' ); ?>> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php post_thumbnail( 'thumbnail' );?> </a> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </article> <?php endwhile; ?> </section> <?php } /* Restore original Post Data */ wp_reset_postdata(); ?> تَستخدم الشيفرة السابقة ثلاثة مُعطيات (arguments) لاستعلام البيانات: 'post_type' => 'post' لجلب المنشورات فقط. 'posts_per_page' => '4' لجلب أربعة منشورات فقط. (post__not_in' => array($post->ID' للتأكيد على أنّ المنشور الّذي يُعرض حاليًا غير مُضمّن. ستُخرج (output) الشيفرة بعدها أربعة منشورات في حلقة (loop) والّتي تَعرض الصورة المُميّزة والعنوان (title) كلٍ محتوى داخل رابط يُحيل إلى صفحة المنشور، ومن المُمكن استخدام CSS للتنسيق، أو توضيعهم جنبًا إلى جنب أو في عرض شبكي (grid) أو حتّى جعل العنوان يتداخل مع الصورة. وسم/دالة القالب ()get_posts يُمكن اللجوء إلى get_posts عند عدم الحاجة إلى تلك المرونة الّتي يُقدمها الصنف WP_Query، وعليه فمن المُمكن الاستفادة منها في تطبيق المثال الأخير، مع العلم أنّ الوسم/الدالة get_posts ما هي إلا وسم قالب (template tag) يَستخدم الصنف WP_Query ويُمكن استخدامه بطريقة مُشابهة إلى WP_Query. يُمكن إنشاء قائمة بالمنشورات الأربعة الأخيرة باستخدام ()get_posts كما تمّ مع WP_Query على النحو التّالي: <?php $args = array( 'posts_per_page' => '4', 'exclude' => array( $post->ID ) ); // get posts $posts = get_posts( $args ); // check if any posts are returned if ( $posts ) { ?> <section class="recent-posts clear"> <?php foreach ($posts as $post ) { ?> <?php setup_postdata( $post ); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( 'left' ); ?>> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php post_thumbnail( 'thumbnail' );?> </a> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> <?php the_title(); ?> </a> </article> <?php } ?> </section> <?php } /* Restore original Post Data */ wp_reset_postdata(); ?> تُشبه الشيفرة السابقة إلى حدٍ كبير جدًا شيفرة مثال الصنف WP_Query السابقة، ولكن مع اختلاف طفيف: لا يجب على المُعطيات (arguments) أنّ تُضمّن نوع المنشور. تمّ استخدام المُتغيّر posts$ لتخزين خَرْج (output) المصفوفة باستخدام ()get_posts. بدلًا من التأكّد فيما إذا كان الاستعلام يملك منشورات، تمّ استخدام (if($posts في ذلك. بدلًا من استخدام حلقة (loop) معياريّة (standard)، تمّ استخدام (foreach ($posts as $post، والّتي ستُكرّر لكل صفّ (row) في المصفوفة. للوصول إلى جميع بيانات المنشور المطلوبة تمّ تضمين (setup_postdat($post. بما أنّ الدّالّة ()get_posts تستخدم الصنف WP_Query، فلا فرق يُذكر بين الاثنين عامّةً، ولذلك يميل بعض المُطوّرين إلى استخدام الصنف WP_Query بما أنّه يُقدّم مرونةً أكبر، مع ذلك يُمكن أنّ تكون الدّالّة ()get_posts أكثر نفعًا عند الرغبة من التأكّد إن كان يوجد أي منشورات مع المُعطيات (arguments)، عندها يُمكن خَرْج (output) الشيفرة اعتمادًا على وجود أية منشورات، من دون الضرورة إلى استخدام حلقة (loop). دالة/وسم القالب ()get_pages تُشبه الدّالّة ()get_pages إلى حدٍ كبيرٍ الدّالّة ()get_posts وهي تستخدم الصنف WP_Query ولكن في جلب الصفحات الثابتة (static pages) بدلًا من المنشورات، ومن الأمثلة الّتي تُستخدم بها: إن كان الموقع يملك مجموعة من الصفحات الهامّة ومن النوع top level، وكان الطلوب إضافة قائمة لها في الشريط الجانبي (sidebar) لكي يتمّ تنسيق روابطها وتشجيع الزوار إلى الذهاب إلى هذه الصفحات، فعندها وفي الملفّ sidebr.php يُمكن إضافة الشيفرة التّالية: <?php $args = array( 'parent' => 0, 'sort_order' => 'ASC', 'sort_column' => 'post_title', ); // get posts $pages = get_pages( $args ); // check if any posts are returned if ( $pages ) { ?> <ul class="sidebar-pages"> <?php foreach ( $pages as $page ) { ?> <li> <a href="<?php echo get_page_link( $page->ID ); ?>"> <?php echo $page->post_title; ?> </a> </li> <?php } ?> </ul> <?php } ?> تفاصيل الشيفرة السابقة هي كالتّالي: أوّلًا تمّ تعريف المُعطيات حيثُ أنّ parent' => 0' ستُعيد الصفحات الّتي هي بدون صفحة بداية، بينما بقيّة المُعطيات ستُحدّد كيف ستُرتّب هذه الصفحات. تمّ بعد ذلك استخدام ()get_pages وتمرير مصفوفة المُعطيات وتخزينها في المُتغيّر pages$. بعد ذلك تمّ التأكّد فيما إذا كان المُتغيّر pages$ يحتوي على أية بيانات وذلك باستخدام (if($pages. وفي حال توفّر الصفحات سيتمّ عرضها من خلال عناصر قائمة (list item). وبدلًا من استخدام ()setup_postdata كما تمّ مع ()get_pages، فقد تمّ استخدام المُتغيّر post$ مُباشرةً وبوسوم قالب (template) مُختلفة والّتي ستُخرج (output) الرابط والعنوان (title)، ومن الضروري استخدامها هنا بسبب عدم استخدام ()setup_postdata. وبسبب عدم استخدام ()setup_postdata فلا داعي لاستخدام ()wp_reset_postdata. إن طريقة الشيفرة السابقة هي طريقة أكثر عمليّة في خَرْج (output) قائمة من الصفحات من طريقة استخدام الصنف WP_Query وبكل ما يملكنه من إمكانيات. الختام إن التعديل على الاستعلام الرئيسي أو كتابة استعلامات جديدة هي مهارة ليجب الاهتمام بها وتطويرها خاصّة إن كان المطلوب هو إنشاء قوالب (themes) مُخصّصة أو إضافات (plugins) أو تطوير مواقع مُعقّدة للعُملاء. تمّ التطرّق إلى الطرق الخمس في إنشاء استعلامات مُخصّصة، ولكن أربعة منها فقط يُمكن استخدامها: pre_get_posts للتعديل على الاستعلام الرئيسي. WP_Query لإنشاء استعلامات مُخصّصة ومُعقّدة. ()get_posts و ()get_pages وذلك للاستعلامات المُخصّصة والبسيطة في جلب المنشورات والصفحات. يُمكن الخلط والمزج بين الطرق السابقة وذلك لإنشاء مواقع ووردبريس مُتقدّمة ولعرض البيانات بالكيفيّة المطلوبة. ترجمة -وبتصرّف- للمقال 5Simple Methods for Creating Custom Queries in WordPress لصاحبته Rachel McCollin.

تُقدّم أشباه العناصر (pseudo-elements) عناصر DOM إضافيّة وبدون عناء يُذكر، فهي تَسمح للمُطوّر في إضافة مُحتوى إضافي إلى الصفحات وبدون إضافة أيًا من عناصر HTML على الصفحة، كما يُمكن لها أنّ تتحرّك (animated). ستتناول هذه المقالة استخدام شبه عنصر (pseudo-element) لإضافة تأثير بصري على زر. Shiny effect شبه العناصر Pseudo-elements يُمكن باستخدام CSS تحديد شبه عنصر باستخدام ::before أو ::after ليتم بعد ذلك إدراج شبه العنصر ضمن العنصر، أو بين العنصر و محتوى ما، وباعتبار أنّ شبه العنصر يعمل عمل أي عنصر، فمن المُمكن أنّ يتمّ تنسيقه، أو توضيعه، وستكون صياغة الشيفرة الخاصّة به على الشكل التّالي: .pebble::before { ... } .pebble::after { ... } يُمكن القول هنا، أنّ العنصر pebble. يملك عنصرين وهميين مُرتبطين به، ويُمكن تنسيقهما أيضًا. ملاحظة حول الفرق بين استخدام "::" و ":" يُقبَل عامًّا استخدام تضعيف النقطتان، وذلك للدلالة على استخدام شبه العناصر، وذلك على عكس شبه الأصناف (pseudo-classes) مثل :hover أو :first-child، ولكن يجب استخدام ( في حال الرغبة في دعم IE8، مع العلم أنّ جميع المُتصفّحات الأخرى وبإصداراتها الأخيرة تدعم النقطتان المُضاعفتان (::). استخدام خاصية content يجب عند استخدام شبه العناصر، ضبط الخاصّيّة content لكي يُصبح شبه العناصر مرئيًا على الصّفحة، ومن المُمكن الاحتيال عليه للظهور عبر استخدام مُحتوى فارغ كما في التّالي: .pebble::before { content: "" ... more styling goes here... } .shiny{-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;display:inline-block}.shiny button{background:#d1703c;color:#fff;font-size:14px;border:none;border-radius:0.5em;height:3em;padding:0 1em;position:relative;overflow:hidden;line-height:2em;-webkit-transition:all 0.5s cubic-bezier(.67,-0.51,.42,1.43);transition:all 0.5s cubic-bezier(.67,-0.51,.42,1.43)}.shiny button:hover,.shiny button:focus{border-color:#d1703c;color:#fff;font-size:24px}.shiny button:hover::after,.shiny button:focus::after,.shiny .demo-container.active button::after{-webkit-animation:sheen 1s 0.5s forwards;animation:sheen 1s 0.5s forwards}.shiny button::after{content:'';position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;background:-webkit-linear-gradient(top,rgba(209,112,60,0),rgba(255,255,255,0.5) 50%,rgba(209,112,60,0));background:linear-gradient(to bottom,rgba(209,112,60,0),rgba(255,255,255,0.5) 50%,rgba(209,112,60,0));-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);transform:rotateZ(60deg) translate(-5em,7.5em)}.shiny button.visible{overflow:visible}.shiny button:hover{cursor:pointer}@-webkit-keyframes sheen{100%{-webkit-transform:rotateZ(60deg) translate(1em,-14em);transform:rotateZ(60deg) translate(1em,-14em)}}@keyframes sheen{100%{-webkit-transform:rotateZ(60deg) translate(1em,-14em);transform:rotateZ(60deg) translate(1em,-14em)}} يجب أنّ تجعل الشيفرة السابقة من العنصر مرئيًا على الصّفحة. الزر البراق (Shiny button) سيتمّ استخدام شبه العنصر لإتمام هذا المثال، وذلك عبر إنشاء تأثير اللّمعان عند المرور فوق الزر، كما في المثال. Shiny effect البداية مع شيفرة HTML <button>Oooh SHINY</button> لا يوجد حاجة إلى كتابة المزيد من سطور HTML للمُتابعة، على اعتبار أنّه سيتمّ استخدام شبه العنصر لإضافة بقيّة المُحتوى، ولكن لا بأس من إضافة صنف (class) إلى الوسم <button> لتنسيقه عند وجود أكثر من نوع على الصّفحة، ولكن للمثال الحالي سيتمّ استخدام عنصر الزر على حاله للتبسيط. إضافة التأثير إن التأثير المُراد إضافته ما هو إلا تدرّج خطي (linear gradient) يمر عبر الزر، ولإنشاء هذا التدرّج سيتمّ استخدام شبه العنصر after، وتوضيعه في خارج الزر وفي بدايته. button::after { content: ''; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0)); transform: rotateZ(60deg) translate(-5em, 7.5em); } يُصنع تأثير اللّمعان من تدرّج اللون الخارجي للزر إلى الأبيض ومن ثُمّ إلى العودة إلى اللون الأصلي. يجب إخفاء طبقة اللّمعان لتظهر فقط عند حركة المرور (hover)، ولعمل ذلك سيتمّ ضبط خاصّيّة overflow إلى hidden للزر، وباعتبار أنّ شبه العنصر هو ضمن الزر، فهذا يعني أنّ تموضعه خارج الزر لن يكون مرئيًّا. button { background: #e5ac8e; color: #fff; font-size: 14px; border-radius: 0.5em; padding: 0 1em; position: relative; overflow: hidden; line-height: 32px; } تمّ إضافة بعض التنسيق إلى الزر لكي يظهر بارزًا وذو منظرٍ خاصٍّ به، تجدر الإشارة هنا إلى استخدام position: relative، وذلك لكي يكون شبه العنصر المتموضع بشكل مُطلق (absolutely) مُتواجدًا داخل الزر، فبدون ضبط هذه الخاصّيّة، سيتموضع العنصر ذو التَمَوْضُع المُطلق ضمن العنصر الأب. إضافة التحريك (Adding the animation) يجب لاستكمال هذا المثال باستخدام التحريك: أوّلًا: إخبار المُتصفّح ليستخدم التحريك عند حركة المرور (hover). ثانيًا: تحديد بالضَّبط ما هو التحريك المطلوب وذلك باستخدام keyframes. يتمّ إضافة حالة المرور عبر إلحاق after إلى hover كما في التّالي: button:hover::after, button:focus::after { animation: sheen 1s forwards; } تمّ في الشيفرة السابقة إخبار المُتصفّح، أنّه عند حركة المرور (hover)، يجب على شبه العنصر after أنّ يُطبّق التحريك animation، ذو الاسم “sheen”، ولمدّة ثانية واحدة، ويتوقف عند النهاية بدون تكرار. يجب الأخذ بعني الاعتبار الترتيب، فاستخدام ::after:hover لن يعمل، حيثُ عندها سيتمّ إخبار المُتصفّح ليتفاعل مع حالة المرور (hover) لشبه العنصر نفسه. تتوفّر الشيفرة السابقة أيضًا على حالة التمركز (focus)، والّتي تعني أنّ المُستخدم الّذي يضغط على زر لوحة المفاتيح tab ضمن الصّفحة سيرى التأثير "sheen" أيضًا عند الوصول إليه، وبدون الحاجة لحركة المرور. سيتمّ في الخطوة التّالية تعيين وضبط keyframes لهذا التحريك: @keyframes sheen { 100% { transform: rotateZ(60deg) translate(1em, -9em); } } تمّ في الشيفرة السابقة كتابة keyframe واحد فقط، وذلك باعتبار أنّ بداية التَمَوْضُع (0%) هي مُضمّنة من قبل تَمَوْضُع بداية شبه العنصر، فكل ما يجب فعله هو ضبط نهاية التَمَوْضُع، والتي ستكون أعلى يمين الزر، ليُحاكي المُتصفح هذا التأثير Shiny effect دعم المتصفحات للتحريك أصبحت الخاصّيّة animation، و شبه العناصر مدعومة بشكل جيّد مع آخر إصدارات المُتصفّحات، ولكن يُستحسن دائمًا إلحاق السوابق webkit و moz من أجل الخاصّيّة keyframes. ترجمة وبتصرف للمقال Animating pseudo-elements.

يجب على كل موقع أن يحتوي على call to action أو ما قد نطلق عليه هنا الدعوة إلى إجراء، وهو الاستجابة المرغوبة من الزوّار على اختلاف شكلها، ولكن السؤال كيف تدفع بالزوّار إلى التصرّف والقيام بهذا الإجراء؟ بمعنى كيف لك أن تُنشئ CTA مجدية وفعّالة. إن الحصول على دعوة إلى إجراء CTA مجدية وفعّالة هو أمر أساسي وجزء لا يتجزأ من أي موقع، فهذه الدّعوة ليس محصورة بالمواقع التجاريّة فقط، بل يجب على كل موقع أن يملك هدفًا منشودًا على الزوّار وصوله، سواء كان ملئ نموذج التواصل contact form أو نموذج التسجيل signup أو الاشتراك في القائمة البريديّة newsletter. تقدّم نداءات الإجراء CTA الفوائد التّالية: التركيز على هدف الموقع.طريقة لقياس نجاح المواقع.إرشاد وتوجيه الزوّار في الموقع.كيف إذًا يتم إنشاء دعوة إلى الإجراء CTA فعّالة؟ إليك عشرة أساليب يمكن أن تُساعد على ذلك. 1. إرساء حجر الأساسلكي يرغب الزبون في الاستكمال والقيام بإجراء عليه أن يُدرك الحاجة أو المشكلة أوّلًا، الإعلانات التلفزيونيّة المطوّلة Infomercials (عالم التسوّق وما دار في فلكه) تقوم بعمل جيّد من هذه الناحية، فهم أوّلًا يشرحون ويتحدثون عن المشكلة ومن ثم يَعرضون المنتج الذي يحل هذه المشكلة، وذلك قبل السؤال بالقيام بأي إجراء (الاستجابة). يجب عليك أن تُصرّح عن المنفعة/الفائدة المرجوة من الاستجابة، بمعنى ما الذي سيحصل عليه المستخدم من قيامه بالإجراء CTA. خذ على سبيل المثال خدمة المراسلة الصوتيّة Skype، يوجد مباشرةً أعلى الدّعوة إلى الإجراء CTA (زِرّ تنزيل البرنامج) نصًّا يتضمّن التّالي: "يتيح Skype التواصل مع الآخرين حول العالم. أجرِ مكالمات وأرسل رسائل وشارك ما تريده مجاناً." قاموا بتوضيح بالضَّبط ما الذي سيحصل عليه المستخدم لدى تحميله برنامج Skype. 2. حفز الزوار على المتابعةيجب عليك في بعض الأحيان استخدام بعض المحفزات لتشجيع الزوّار على استكمال الدّعوة إلى الإجراء CTA، ويُمكن لهذه المحفزات أن تكون على شكل حسومات، أو اشتراك في مسابقة، أو هدية، وكان باراك أوباما قد استخدم هذا الأسلوب في حملته الانتخابيّة في جمع التبرعات على موقعه، حيث قام بتقديم هدية عبارة عن قميص للمتبرعين بـِ $30 أو أكثر. الجدير بالذكر أن الرئيس الأميركي بهذا العرض قام بضرب عصفورين بحجر واحد، أما الأوّل فهو المزيد من التبرعات، وأما الثاني فهو أن كل قميص أصبح أشبه بلوحة إعلانات متنقّلة له ولحملته الانتخابيّة. 3. استخدام عددًا محدودًا من الدّعوات إلى الإجراء Call To Actionيجب على الدّعوات إلى الإجراء CTA أن تكون نقاط محوريّة في الموقع، فستربك كثرتها الزائر وتجعله في حيرةٍ من أمره، حيث أظهرت الدراسات أن السوبر ماركت الذي يحتوي على العديد من الخيارات والتشكيلات ستقل مبيعاته على الأرجح بعرضها كلها أمام المتسوّق. إن التقليل من عدد القرارات التي على المستخدم إجراؤها، سيقلّل من المجهود الذهني الذي على المستخدم بذله في سبيل اتخاذ القرار، بل الأصح هو إرشاد المستخدم نحو الهدف بأبسط مجهود ممكن. يختلف العدد المناسب للإجراءات actions من موقع إلى آخر، ولكن دعني أخبرك بأمر ما يهم هو إمكانية التفريق بين كل إجراء وليس عددها. لاحظ موقع pbwiki.com، لديهم ثلاثة نداءات إجراء calls to action: إنشاء ويكي Create a Wiki.استعراض عرض مبسّط View Demo.اشترِ الآن Buy now.لا يُعتبر وجود 3 دعوات رقمًا كبيرًا، ولكن المشكلة في عدم إمكانية التفريق بين "Create a Wiki" و "Buy Now"، هل أقوم بشراء ويكي أم بإنشاء الويكي أوّلًا؟ الأمر محيّر، كان من الأفضل تأجيل خيار الشراء إلى حين تقرير المستخدم في إنشاء ويكي. 4. استخدام كلمات قوية مع الدعوات إلى الإجراء CTAيجب على دعوات الإجراء CTA أن توضّح للزائر/المستخدم ما هو المطلوب بالضبط القيام به، وأن تحتوي على كلمات قويّة الصدى في مسامع قارئها: تواصل معنااشترِسجّلاشتركتبرّعتشجع جميع هذه الكلمات المستخدم على القيام بإجراء، وكما سيكون من الرائع لو تمّ الجمع بين الكلمات السابقة مع عبارات من النوع التّالي، وذلك في سبيل خلق حاجة مُلحة وضرورية في نفس الزائر تدفع به نحو المتابعة: العرض ساري إلى نهاية الشهر.العرض ساري لفترة محدودة فقط.اطلب الآن واستلم هديتك.يستخدم موقع Carsonified هذا الأسلوب لدى بيعه ورشات العمل workshops، ولخلق ضرورة المتابعة في نفس المستخدم قاموا بتقديم حسومات إلى السباقين في التسجيل (العشر الأوائل). 5. اختر المكان المناسب للـ CTAيلعب مكان الدعوة إلى الإجراء CTA في الصّفحة دورًا هامًا في المعادلة، ولذلك يجب الاعتناء بمكان النداء وألا يكون عشوائيًا، وينصح دائمًا بأعلى ومنتصف الصّفحة. قام موقع picsengine.com بالاهتمام بهذا الأمر عبر استغلال أهم جزء في الصّفحة كما هو واضح مع الدعوة إلى الإجراء "See in action". 6. سخّر المساحات البيضاء whitespace لخدمتكإنها المساحات حول الدّعوة إلى الإجراء CTA من يصنع الفارق ليس مكانها فقط، فكلما زادت المساحة البيضاء حول الدّعوة إلى الإجراء CTA كلما زادت قوتها في جذب انتباه الزائر، وبالتالي الإفراط في حشو الصّفحة سيؤدي إلى صفحة مكتظة بالعناصر، وغير واضحة المعالم، وأيضًا غير مقروءة المحتوى. حسّن موقع PlanHQ من جذب اهتمام المستخدمين إلى الدّعوة إلى الإجراء بالاهتمام بهذه النقطة مستفيدين من المساحات الفارغة حول أزرار CTA. 7. تباين الألوانيعتبر استخدام الألوان في المواقع من الأساليب الفعّالة والمجدية في لفت النظر إلى أحد عناصر الصّفحة، خاصّة عندما تكون بقيّة أجزاء الصّفحة ملوّنة بألوان خافتة. قام فريق تطبيق Things بتطبيق هذه الفكرة على موقعهم، فبينما بقية أجزاء الموقع يسودها اللون الأزرق والرمادي الخفيف، فإن أزرار الدّعوة إلى الإجراء CTA مسلّط الضوء عليها باللون البرتقالي، سيوضّح هذا التباين بدون شك ما هي الخطوة التّالية للزائر. لا تعتمد على تباين الألوان فقط، فاليد الواحدة لا تصفق، ولا تنس أن بعض الزوّار قد يكونون مصابين بعمى الألوان، وبالتالي هذا التضاد في الألوان لا قيمة له. 8. الحجم يُساعديميل مصممو الويب غالبًا إلى الانزعاج من العملاء عندما يُطلب منهم جعل بعض العناصر كبيرة الحجم، اتفقنا على أن المكان/الموضع واللون والمساحة البيضاء هي أركان متساوية الأهميّة، ولكن لا يُمكن إنكار دور الحجم في المعادلة ككل، فكلما كان نداء الإجراء call to action كبير الحجم كلما زادت الفرصة في ملاحظته. استخدمت موزيلا هذا الأسلوب وفي صفحة البداية لموقع فيرفُكس، حيث يسيطر رابط التنزيل على جزء لا بأس به من الصّفحة. 9. اجعل في كل صفحة نداء للإجراء CTAلا يجب على نداء الإجراء call to action أن يكون محصورًا على صفحة البداية، بل يجب على كل صفحة أن تحتوي على دعوة إلى الإجراء تدفع بالمستخدم للقيام بإجراء وألا يغادر بدون استجابة. ليس بالضرورة أن يكون الدعوة إلى الإجراء CTA نفسه في كل صفحة، بل من الممكن استخدام CTA صغيرة لتوجيه المستخدم نحو الهدف الأخير المنشود. قام موقع Basecamp بإدراج دعوة إلى الإجراء CTA في ذيل كل صفحة من صفحات الموقع يطلب فيها من الزوّار التسجيل بشكل واضح وصريح. 10. تابع بالإجراء إلى النهايةخذ دائمًا بعين الاعتبار ما سيحدث عندما يستجيب الزائر إلى نداء الإجراء CTA، فأهميّة هذا الأمر هي بأهميّة نداء الإجراء ذاته. إن كان المطلوب أن يقوم الزائر بتزويد بياناته الشخصيّة، قاوم الرغبة في جمع معلومات غير ضروريّة عنه، حيث يحبّذ جماعة التسويق بالذات بناء شبكة من المعلومات حول الزوّار، وعلى الرغم من أهميّة هذه المعلومات، إلا أن هناك مجازفة حقيقية بخسارة الزائر عند الإفراط في طلب المعلومات. إن موقع WordPress.com مثال يحتذى به في كيفيّة تقليل حجم البيانات المجمعة من المستخدمين، فهم يطلبون القدر الكافي من المعلومات لبناء وإعداد مدوّنة. خلاصةإن الدّعوة إلى الإجراء CTA هي اللاعب الأبرز في نجاح أي موقع، الأمر الذي يتطلّب الاعتناء بقابليّة الاستخدام usability، والاعتناء بالتصميم البصري الإبداعي للموقع ومحتوى قوي مرتبط مع غرض الموقع، واعلم جيّدًا أن الجهد المبذول في الاهتمام بالدّعوات إلى الإجراء CTAs سيثمر وستقطف ثماره عبر زيادة العوائد في نهاية المطاف، طبعًا من منا لا يُريد ذلك. ترجمة وبتصرّف للمقال 10Techniques for an effective call to action لصاحبه Paul Boag.

أصبحت تقنيّة أجاكس موضة العصر في السنوات الأخيرة وعن جدارة واستحقاق، إن تقنيّة أجاكس، والتي هي بمسماها الكامل Asynchronous JavaScript and XML، هي طريقة لإجراء "محادثة" مع الخادوم، وعرض النتائج بدون إعادة تحميل الصّفحة. يُقدّم هذا الأسلوب للمطورين أمور عدّة: تحديث عدّاد الإعجاب (زر أعجبني).إضافة عناصر إلى سلّة التسوّق.إنشاء نماذج (forms) ديناميكيّة.وإليه من هذه الأمور، وكل ذلك بدون إعادة تحميل الصّفحةستتطرّق هذه المقالة إلى كيفيّة تحميل المنشورات (posts) مع تقنيّة أجاكس وباستخدام القالب الافتراضي Twenty Fifteen كمثال وأساس للشرح. سيتمّ التطرّق إلى لماذا يجب استخدام أجاكس من خلال مثالٍ مُبسّط، ومن ثُمّ سيتمّ العمل على مثال آخر وتحميل المنشورات باستخدام أجاكس وذلك باستخدام القالب Twenty Fifteen. لماذا يجب استخدام تقنية AJAX؟يَطلب سكريبت ووردبريس المنشورات من قاعدة البيانات عندما يتمّ تحميل الصفحة الأولى للمقالات، ويعرضهم مستخدمًا التوصيف (markup) المحدّد، وبجانب ذلك، سيتم تحميل قوائم التنقّل (navigation menus)، والإضافات المُصغّرة ودجت (widgets)، والرسومات، وملفّات جافا سكريبت، والعديد من الأمور الأخرى، وكما توضّح الصورة عدد الطلبات الّتي تمّ تطلبها في الصفحة الواحدة. يتّضح من الصورة السابقة (المأخوذة من أدوات المطورين الخاصّة بالمُتصفّح كروم) عدد لا بأس به من الأصول الّتي يتمّ تحميلها، وعلى الرغم من أنّه سيتمّ استخدام بعض التقنيات في تحسين الأداء، واستخدام التخبئة (cache) لبعض الأصول (assets) كما هو الأمر مع ملفّات جافا سكريبت، سيبقى عدد الطلبات عددًا لا بأس به. وإن تحميل الصّفحة الثّانية من المنشورات سيُحمّل كل ما سبق مرّة أُخرى، حيثُ سيجلب ووردبريس المنشورات ويعرضها باستخدام التوصيف (markup) المحدّد، ويتم تحميل عناصر الصّفحة مرّة أخرى أيضًا، ولذلك يُعتبر هذا الأسلوب مضيعة للموارد في أغلب الحالات، ولا يخدم تجربة المُستخدم أيضًا، فلا أحد يرغب بالانتظار بينما يتمّ استكمال تحميل الصّفحة بطبيعة الحال. إنشاء قالب فرعي Creating Child Themeسيتمّ التعديل على القالب Twenty Fifteen، ولكن قبل ذلك سيتمّ إنشاء قالب (theme) فرعي، وذلك للحفاظ على التعديلات في حال تحديث القالب. البداية مع تقنية AJAXسيتمّ البدء بمثال مُبسّط يشرح آلية عمل تقنيّة أجاكس، وذلك من خلال روابط شريط التصفيح (pagination)، في أسفل الصّفحة بحيثُ عندما يتمّ الضغط على رقم الصّفحة، يتم تحميل الصّفحة ديناميكيًّا، فعندما يتمّ الضغط على أحد هذه الروابط سيتمّ إرسال طلب (request) إلى الخادوم وتنبيه (alert) النتيجة. صف ملفات JavaScriptستكون الخطوة الأولى هي إنشاء ملفّ جافا سكريبت وصفّه باستخدام ملفّ القالب functions.php. تمّ إنشاء المجلّد js و الملفّ ajax-pagination.js بداخله، ومن ثُمّ إضافة الشيفرة التّالية إلى الملفّ functions.php. function my_enqueue_assets() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); wp_enqueue_script( 'ajax-pagination', get_stylesheet_directory_uri() . '/js/ajax-pagination.js', array( 'jquery' ), '1.0', true ); }يُمكن الرجوع إلى المقال صفّ وتسجيل ملفات Javascript و CSS في قوالب ووردبريس للمزيد من التفصيل حول صف ملفات جافا سكريبت، ولكن بالمُختصر ما سيتمّ عمله هو إخبار ووردبريس باسم السكريبت (كما في المُعامل الأوّل)، ومكانه (المُعامل الثّاني)، والمُتطلّبات (المُعامل الثّالث)، الإصدار (المعامل الرابع)، والتحميل سيكون في ذيل الصّفحة (المعامل الخامس). يجدر الانتباه هنا إلى إنه عند صفّ ملفّ التنسيق، تمّ استخدام ()get_template_directory_uri، وهذه الدالة دائمًا تُشير إلى مسار القالب الرئيسي (parent theme)، وعند صف السكريبت تمّ استخدام ()get_stylesheet_directory_uri، والّذي يُشير إلى مسار القالب الفرعي (chiled theme). بعد أن تمّ تحميل السكريبت في ذيل الصّفحة، يُمكن ببساطة كتابة: alert( ‘Script Is Enqueued’ ) داخل الملفّ ajax-pagination.js، ومع إعادة تحميل الصّفحة سيتمّ معرفة فيما إذا كان السكريبت يعمل أم لا. إنشاء حدث Creating an Eventستكون الخطوة التّالية هي إنشاء حدث (event) مهمته هي بدء استدعاء (call) أجاكس، وسيكون الحدث في هذه الحالة هو الضغط على رابط مُعيّن، ولاستهداف الرابط يجب معرفة أصناف (classes) العناصر والمعرّفات (IDs) المحيطة به. يُمكن الوصول إلى الشيفرة السابقة باستخدام أدوات المطورين المُضمّنة ضمن المُتصفّح Chrome. توضّح الصورة السابقة كيف أنّ روابط التصفيح تملك الصنف page-numbers، ورابط الصّفحة التّالية يملك الصنف السابق بالإضافة إلى الصنف next، وجميعها داخل الوسم nav الّذي يملك الصنف nav-links، يوجد أيضًا رابط الصّفحة السابقة، ولكنه لا يظهر في الصورة السابقة، والّذي يحمل الصنف prev بالإضافة إلى الصنف page-numbers. سيتمّ الآن استهداف أحد الروابط داخل حاوية التصفيح (pagination)، ومن ثم إنشاء تنبيه (alert) وبالرسالة Clicked Link: (function($) { $(document).on( 'click', '.nav-links a', function( event ) { event.preventDefault(); alert( 'Clicked Link' ); }) })(jQuery);يُلاحظ كيف أنّ كل شيء محتوى داخل دالّة مجهولة (anonymous function)، وهو ما يُنصح به، بعد ذلك تمّ إنشاء حدث الضغط، ومن ثُمّ منع الوظيفة الافتراضيّة للحدث (تحميل الصّفحة)، ومن ثُمّ عرض رسالة نصيّة باستخدام دالّة التنبيه (alert). إنشاء استدعاء AJAXسيتمّ الآن العمل على جلب بيانات ديناميكيّة من الخادوم بدلًا من التعامل مع واجهة الموقع فقط (تنبه نص معدّ مُسبقًا) كما في المثال السابق، ولذلك يجب إتمام بعض الإعداد المُسبق، وذلك للأسباب التّالية: يجب إعطاء استدعاء أجاكس رابطًا لاستخدامه هذا أوّلًا.ثانيًا، لا يَعلم ملفّ الجافا سكريبت المُنشئ ببيئة العمل الخاصّة بسكريبت ووردبريس. لذلك لا يُمكن استخدام دالة على الشكل ()get_stylesheet_directory_uri فيه، ولكن من المُمكن استخدام أسلوب المَوضَعة (localization) لتمرير المُتغيّرات إلى جافا سكريبت، وذلك في الملفّ functions.php: wp_localize_script( 'ajax-pagination', 'ajaxpagination', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ));إن إضافة الشيفرة السابقة داخل الدالة ()my_enqueue_assets، سيقوم بتعريف الكائن ajaxpagination (المُعامل الثاني)، حيثُ سيَستلم هذا الكائن الـ members الخاصّة به تبعًا إلى المصفوفة المزوّدة كمُعامل ثالث في الدالة ()wp-localize_script، بمعنى آخر، عندما يتمّ إضافة هذه الشيفرة سيصبح من المُمكن استخدام ajaxpagination.ajaxurl لتعيين الرابط URL إلى admin-ajax.php، والّذي سيُستخدم لتولّي استدعاءات أجاكس. <script type='text/javascript'> /* <![CDATA[ */ var ajaxpagination = {"ajaxurl":"http:\/\/wordpress.local\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> أصبح كل شيء جاهزًا لبناء استدعاء أجاكس في ملفّ جافا سكريبت كما هو موضّح في الشيفرة التالية: $(document).on( 'click', '.nav-links a', function( event ) { event.preventDefault(); $.ajax({ url: ajaxpagination.ajaxurl, type: 'post', data: { action: 'ajax_pagination' }, success: function(result ) { alert( result ); } }) })تمّ استخدام الدالة ()ajax.$، مع العلم أنّه يوجد دوال خاصّة من أجل post و get، ولكن يُفضّل البعض استخدام هذه الدالة بسبب مرونتها، والّتي يُمكن القراءة عن كافّة مُعاملاتها من خلال التوثيق الرسمي لمكتبة jQuery. تمّ استخدام المُعامل url لتمرير مسار السكريبت المُراد إرسال البيانات إليه، وهو الملفّ admin-ajax.php، والّذي سيكون في المسار wp-admin، بعد أن تمّ تعريف ذلك سابقًا في الدالة ()wp_localize_script. يقوم أخيرًا المُعامل success، والّذي هو دالّة، بتنبيه (alert) نتيجة استدعاء أجاكس، وبذلك يكون قد تمّ اختبار هذه الدالة، والّتي سيتمّ التعديل عليها لاحقًا، ولكن الآن سيعمل الرابط إن تمّ الضغط عليه، ولكنه ليس بذو نفعٍ في الوقت الحالي، بما أنّه لم يتمّ إعداد الشيفرة من جهة الخادوم بعد، مع ذلك ستكون النتيجة هي الرقم 0، وهي النتيجة الافتراضيّة عندما لا تكون شيفرة الخادوم قد كتبت. يَكمن السبب في ظهور النتيجة السابقة رغم عدم كتابة شيفرة من طرف جهة الخادم إلى وجود شيفرة مكتوبة بالفعل من قِبل ووردبريس، وذلك بالملف admin-ajax.php المُستخدم في المثال، والّذي يحتوي في طياته على الدالة ('die('0. سيَخمد السكريبت admin-ajax.php ويعود من الدالة (return) بالقيمة 0، في حال عدم تزويد أي إجراء (action)، ولكن إن تمّ تزويد إجراء ولم يتمّ تزويد الخطافات (hooks) المطلوبة من قِبل ووردبريس فلن يحدث شيء، وفي نهاية الملفّ سيتمّ الخمود (die) مرّة أُخرى والعودة بالقيمة 0. الاتصال مع ووردبريسيجب تعريف بعضًا من إجراءات ووردبريس للحصول على إجابة ذو معنى من ووردبريس، ويتم ذلك من خلال استخدام نمط محدّد: add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination' ); add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination' ); function my_ajax_pagination() { echo get_bloginfo( 'title' ); die(); }تمّ ربط دالّة مع خطافين (hooks)، فالخطافات الّتي تأخذ الشكل [wp_ajax_[action_nam تُنفّذ للمُستخدمين أصحاب العضويّة، والخطافات الّتي تأخذ الشكل [wp_ajax_nopiv_[action_name تُنفّذ للمُستخدمين الزوّار، وهذا أمر جيّد لفصل الوظائف عن بعضها بسهولة. إن أسماء الإجراءات (actions) الّتي تمّ ذكرها في الأعلى تُشير إلى الإجراء المعرّف في استدعاء أجاكس في ملفّ جافا سكريبت المُنشئ سابقًا (action: ajax_pagination)، أي من المُفترض أنّ يتطابقا، أما اسم الدالة فمن الممكن أنّ يكون أي اسم، وتم اختيار الاسم my_ajax_pagination للوضوح. يُمكن للدالة أنّ تحتوي على أي شيء، فمن المُمكن تسجيل خروج المُستخدمين، جلب بياناتهم، أو نشر منشور، ومهما كان المطلوب عودته (return) إلى جافا سكريبت فمن الضروري استخدام echo، وفي المثال الحالي تمّ استخدام echo مع عنوان المُدوّنة، والّذي يُمكن الوصول إليه عن طريق الدالة ()get_bloginfo. ستكون الخطوة الأخيرة هي استخدام ()die، فبعدم تعريفها، فإن الدالة (dir(0 المعرّفة في نهاية الملف admin-ajax.php سيتمّ تنفيذها ليتم طباعة 0 بالإضافة إلى ما سيتمّ طباعته في الدالة الّتي يتمّ كتابتها حاليًّا، والآن إن تمّت تجربة الشيفرة السابقة فمن المفترض رؤية عنوان الموقع. تلخيصتمّ إلى هنا الوصول إلى نهاية المثال، وقبل الانتقال إلى كيفيّة استعراض المنشورات باستخدام أجاكس، سيتمّ مراجعة الخطوات الضروريّة لإتمام استدعاء أجاكس: صف (enqueue) ملفّ جافا سكريبت، إن لم يكن متوفرًّا بالأساس.استخدام ()wp_localize_script لتمرير URL للملف admin-ajax.php.إنشاء استدعاء أجاكس في جافا سكريبت.ربط دالة باستخدام اسم خطّاف (hook) مناسب.كتابة شيفرة الدّالة والّتي ستعود بالبيانات إلى جافا سكريبت.تحميل المنشورات باستخدام AJAXسيتمّ البدء بكتابة شيفرة جافا سكريبت، والّتي ستكون مبدئيًّا بالشكل التّالي، والتعديل عليها لاحقًا. (function($) { function find_page_number( element ) { element.find('span').remove(); return parseInt( element.html() ); } $(document).on( 'click', '.nav-links a', function( event ) { event.preventDefault(); page = find_page_number( $(this).clone() ); $.ajax({ url: ajaxpagination.ajaxurl, type: 'post', data: { action: 'ajax_pagination', query_vars: ajaxpagination.query_vars, page: page }, success: function( html ) { $('#main').find( 'article' ).remove(); $('#main nav').remove(); $('#main').append( html ); } }) }) }) (jQuery);إن الشيفرة السابقة مُشابهة إلى المثال المُبسّط السابق، مع ملاحظة أنه تمّ إضافة طريقة لمعرفة أي صفحة أراد المُستخدم طلبها، وكل رابط لديه عنصر span بداخله وهو في حالة عدم الظهور، كما تمّ استنساخ (clone) العنصر لكيلا يتمّ التعديل على العنصر الأصلي، ومن ثم حذف العنصر span وتحليل (parse) الباقي كعدد صحيح (integer) باستخدام الدالة parseInt، ليكون الناتج رقم الصّفحة. سيكون من الضروري أيضًا معرفة مُعاملات الاستعلام (query parameters) المُستخدمة، وسيكون الأمر سهلًا في الصفحة الرئيسيّة، باستخدام المُعامل paged، وذلك لأنّه يتمّ التعامل مع الاستعلام الافتراضي، إن تمّ البدء على صفحة أرشفة (archive page)، مثل أرشيف التصنيفات (category)، فعندها يجب معرفة اسم الصنف أيضًا. سيتمّ تمرير مُتغيّرات الاستعلام باستخدام طريقة الموضعة (localization) المُستخدمة سابقًا، ولكن الآن سيتمّ استخدام ajaxpagination.query_vars على الرغم من عدم تعريفها بعد، وأخيرًا وفي success سيتمّ حذف جميع العناصر article من الحاوية الرئيسية، وحذف عنصر التصفيح (pagination) وإلحاق (append) القيمة المُعادة من (return) استدعاء أجاكس المُنشئ إلى الحاوية الرئيسية. ستحتوي القيمة المُعادة (return) على المنشورات وعنصر التنقل الجديد، مع ملاحظة تغيير اسم المُعامل من response إلى html ليصبح الاسم معبّرًا أكثر، أخيرًا تمّ استخدام مصفوفة الموضعة لتمرير معاملات الاستعلام الأصليّة. يجب على الدالة التّالية أنّ توضع في الدالة ()my_enqueue_assets لتبديل الموضعة (localization) الّتي تمت سابقًا. global $wp_query; wp_localize_script( 'ajax-pagination', 'ajaxpagination', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'query_vars' => json_encode( $wp_query->query ) ));ستكون الدالة ()my_ajax_pagination في صورتها النهائيّة على الشكل التّالي: add_action( 'wp_ajax_nopriv_ajax_pagination', 'my_ajax_pagination' ); add_action( 'wp_ajax_ajax_pagination', 'my_ajax_pagination' ); function my_ajax_pagination() { $query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true ); $query_vars['paged'] = $_POST['page']; $posts = new WP_Query( $query_vars ); $GLOBALS['wp_query'] = $posts; add_filter( 'editor_max_image_size', 'my_image_size_override' ); if( ! $posts->have_posts() ) { get_template_part( 'content', 'none' ); } else { while ( $posts->have_posts() ) { $posts->the_post(); get_template_part( 'content', get_post_format() ); } } remove_filter( 'editor_max_image_size', 'my_image_size_override' ); the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'twentyfifteen' ), 'next_text' => __( 'Next page', 'twentyfifteen' ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>', ) ); die(); } function my_image_size_override() { return array( 825, 510 ); }إن استخدام المُعاملات المُمرّرة مكّن من بناء استعلام مُخصّص (custom query) وذلك عن طريق استخدام مُتغيّرات الاستعلام الّتي تمّ تمريرها والتأكّد أنّ رقم الصّفحة الّذي تمّ تمريره يستبدل المُعامل paged، ومن ثُمّ تمّ استخدام المصفوفة query_vars لإنشاء الاستعلام الجديد. يجب جعل المُتغيّر ['wp_query']اGLOBALS$ مساويًا إلى كائن المنشورات الجديد، والسبب في ذلك هو أنّ الدالة ()the_posts_pagination تَستخدم هذا المُتغيّر العام (global variable). يُلاحظ أنّه تمّ إضافة دالة إلى المُرشح editor_max_image_size، ومن ثُمّ وبعد أسطر قليلة تمّ إزالتها، وذلك لمشكلة في سكريبت ووردبريس نفسه، وفي الحقيقة تمّ تسجيل هذا المُشكلة في مُتتبّع المشاكل الخاصّ بووردبريس حيث أن المشكلة هي كالتالي: ستتحمل الصور بشكل مناسب عندما يتم تحميلها في صفحة المنشور، ولكن بدون هذه المُرشحات فإن الصور ستكون ضيقة، أي ستكون 660px عرضًا بدلًا من 825px، والسبب في ذلك هو أنّ الدالة الّتي تحمّل الصور ستستدعي دالة بالاسم ()image_constrain_size_for_editor، وهذه الدالة تتأكّد من أنّ الصور في محرّر المنشور ليست عريضة بشكل كبير، ولتحديد فيما إذا كان يجب تقلّيص الحجم أم لا، تُستخدم الدالة ()is_admin في ذلك، وبما أنّ شيفرة المثال تعمل عبر admin-ajax.php، والّذي يعتبر admin في نهاية الأمر، سيُقلّص ووردبريس من حجم الصور، معتقدًا أنّه يتمّ استخدامهم في المُحرّر. يُمكن استخدام المرشح editor_max_image_size لتحديد الحجم الأعظمي للصور في المُحرّر، وبما أنّه المطلوب هو ترك كل شيء على ما هو عليه، باستثناء استدعاء أجاكس، فقد تمّ إضافة المرشح باستخدام القيمة المخصّصة (array( 828, 510 ومن ثُمّ إزالتها مباشرة لتأكّد من أنها لا تسبب مشاكل في أي مكان آخر. ستكون الخطوة التّالية استخدام الاستعلام في عرض المنشورات، حيثُ تمّ نسخ الكثير من الملفّ index.php في القالب الرئيسي (parent theme)، وفي حال عدم توفّر منشورات سيتمّ استخدام عارضة (template) مُخصّصة لهذا الأمر، وأخيرًا سيتمّ استخدام شكل التصفيح (pagination) كما هو في الملفّ index.php. تجربة مُستخدِم أفضليجب التركيز على تجربة المُستخدم دائمًا، حيثُ أنّه عند العمل في بيئة التطوير يبدو التصفّح سريعًا للغاية، ولكن تأخذ الصور وبقيّة الأصول (assets) وقتًا أطول في التحميل في بيئة العمل الحقيقيّة. يُفترض إضافة مُحمّل (loader) أو على الأقل نصّ يُشير إلى جريان تحميل المنشورات وذلك في سبيل تحسين تجربة المُستخدم، وبالإضافة إلى ذلك من المُمكن تعطيل أي نقرات (clicks) إضافيّة على عناصر شريط التنقل، وهذا ما سيتمّ في المثال الحالي: إخفاء المنشورات وشريط التنقل مباشرةً بعد عملية الضغط من قبل المُستخدِم ومن ثم عرض رسالة فحواها هو "loading new posts" (جاري تحميل المنشورات)، وعند الحدث success سيتمّ إزالة نص الرسالة وعرض المنشورات، وسيكون استدعاء أجاكس بصيغته النهائيّة على الشكل التّالي: $.ajax({ url: ajaxpagination.ajaxurl, type: 'post', data: { action: 'ajax_pagination', query_vars: ajaxpagination.query_vars, page: page }, beforeSend: function() { $('#main').find( 'article' ).remove(); $('#main nav').remove(); $(document).scrollTop(); $('#main').append( '<div class="page-content" id="loader">Loading New Posts...</div>' ); }, success: function( html ) { $('#main #loader').remove(); $('#main').append( html ); } })أصبح هناك دالتين منفصلتين وهما beforeSend و الدالة success، الأولى يتمّ تنفيذها حالما يتمّ الضغط على الرابط، قبل أنّ يُرسل استدعاء أجاكس إلى الخادوم، أما الثانية فيتم تنفيذها حالما يتمّ استقبال البيانات من الخادوم. سيتمّ إزالة المقالات وشريط التنقّل قبل إرسال الاستدعاء، ويفيد هذا الأمر في منع المُستخدم من الضغط باستمرار على روابط شريط التنقّل إلى حين انتهاء التحميل، ومن ثُمّ سيتمّ التدرّج إلى أعلى الصّفحة، وإضافة تنبيه يوضّح جريان عملية التحميل لتوضيح الأمور للمُستخدم، وفي الدالّة success تمّ إزالة المُحمّل loader ومن ثُمّ تحميل المُحتوى. مشاكل أجاكسإن أجاكس تقنيّة متقدّمة وقويّة بلا شك، فبجانب المثال المٌقدّم في هذا الدليل، يُمكن إجراء العديد من الأمور باستخدام استدعاءات أجاكس، ولكن يجب الحذر في بعض المواضع عند تطبيق هذه التقنيّة، سيتمّ التطرّق إلى بعضها: الحماية: تُعبر الحماية من الأمور الأساسيّة والهامّة الّتي يجب التركيز عليها، فعند الرغبة في حذف منشور باستخدام أجاكس يجب التأكد من عزم المُستخدم على ذلك، وأيضًا يجب التأكّد من صلاحياته (باستخدام nonces)، خاصّة بعد العلم أنّ ووردبريس مُجهز بحماية مُضمّنة عند العمل بشكله الافتراضي، ولكن عند تطبيق تقنيّة أجاكس فإن مسألة الحماية تقع على المطوّر.أجاكس بدون جافا سكريبت: تعمد تقنيّة أجاكس على جافا سكريبت، بمعنى آخر عدم توفّر جافا سكريبت يعني عدم توفّر أجاكس، فإن تمّ الاعتماد على أجاكس بشكل كبير في الموقع، فلن يستطيع المستخدمين الذين قاموا بتعطيل جافا سكريبت على متصفحاتهم من استخدام الموقع، على الرغم من أن جافا سكريبت أصبحت متوفّرة دائمًا، ولكن لا يخلو الأمر من هذه الحالات، وعليه من الجيّد ضمان عمل التطبيق في حال عدم توفّرها.تجربة المُستخدم: تُهمل تجربة المُستخدم غالبًا، وما يقدّمه أجاكس بالتأكيد أمر في غاية الأهميّة، ولكن الأهم هو موقع يعمل كما هو مفروضٌ له أنّ يَعمل، فالمُستخدمين معتادين على تحميل الصّفحة من جديد عند الضغط على الروابط، لذا من مهمّة المُطوّر جعل كل شيء واضح بالنسبة لهم، وعلى المُستخدمين معرفة ما الذي يحدث ولماذا، بمعنى آخر يجب استخدام أجاكس لتحسين الموقع، وعدم الإفراط في الاستخدام لكيلا ينقلب السحر على الساحر.تلخيصكما هو مُلاحظ إن تطبيق تقنيّة أجاكس يتطلّب القليل من التحضير والتدريب، ولكن مع التكرار ستصبح الأمور سهلة وميسرة، وربّما قراءة هذا الدرس قد استغرقت بعض الوقت، وسيستغرق تطبيق المثال أيضًا وقتًا أطول وخاصّة في المرّة الأولى، ولكن مع المُمارسة ستغدو الأمور أوضح والتطبيق أسرع. ترجمة –وبتصرّف- للمقال Loading WordPress Posts Dynamically With AJAX لصاحبه Daniel Pataki.