لوحة المتصدرين

بدأنا في الدرس السابق الحديث عن برنامج إدارة المشاريع Trello، انطلاقًا من إنشاء حساب جديد مرورًا بالخطوات الأولى في إضافة وإدارة كلًا من الألواح، القوائم، والبطاقات. كما عرضنا نموذجًا بسيطًا لإدارة العمل بين فريق صغير مكوّن من مترجمين، مدققين، وناشرين في موقع إلكتروني. نتناول في هذا الدرس خصائص البطاقات في البرنامج وكيفية التعامل معها. يُمثَّل المشروع في Trello بشكل رئيسي من خلال البطاقات والتي تُعتبر "وحدة العمل" الأساسية. تُفصل البطاقات من نفس النوع إلى "قوائم" داخل اللوح الخاص بمشروعك. فإذا كنتَ تدير موقعًا لنشر الدروس، فإنّ البطاقة ستمثّل أشياءً مثل: فكرة للكتابة، مادة للترجمة، مناسبة قادمة إلخ.. بينما ستكون القوائم التي تتضمنها: أفكار للكتابة، مواد للترجمة، مناسبات قادمة لتغطيتها. الهيكل العام للبطاقة لنلقي نظرة على مكونات البطاقة ضمن Trello: في الأعلى يوجد لدينا أولًا "عنوان البطاقة" أو اسمها؛ والذي ينبغي أن يكون واضحًا ومعبرًا بحيث يسهل معرفة ما تتضمنه البطاقة بمجرد قراءة عنوانها. أسفل العنوان نجد رابطًا باسم "Edit the description" وهو يتيح إمكانية إدراج وصف للبطاقة يشرح وظيفتها، أو محتواها، وأيّة تفاصيل أخرى من المهم أن تكون حاضرة دومًا عند التعامل معها. تعرض البطاقة بعد ذلك الملفات المُرفقة بها "Attachments" مرتبة تنازليًا (من الأحدث إلى الأقدم). يُتيح Trello إمكانية استعراض محتويات بعض أنواع المرفقات مباشرة ضمن المتصفح دون الحاجة إلى تحميلها (كالصور، الملفات النصيّة، وملفات مايكروسوفت أوفيس). وأخيرًا هناك صندوق إضافة التعليقات "Add Comment" والذي يتيح لأعضاء الفريق التفاعل مع البطاقة وإمكانية إدراج مرفقات جديدة، تضمين بطاقات أخرى، أو حتى إضافة إشارة Mention لشخص برسم رمز @ متبوعًا باسمه. بعد إضافة تعليق جديد على البطاقة يظهر أسفله رابط يشير للتاريخ والوقت الذي أُضيف فيه التعليق: يمكن نسخ هذا الرابط لمشاركة التعليق بشكل مُباشر. تُرتّب جميع التعليقات والتفاعلات على البطاقة تنازليًا (حسب التاريخ) في القسم الأخير منها تحت اسم "Activity". خيارات الإضافة في القسم الأيمن من البطاقة لدينا مجموعتان من الأوامر، أولها خيارات الإضافة Add وهي على خمسة أنواع: الأعضاء Members أولًا إضافة أعضاء Members إلى البطاقة بهدف الإشارة إلى صلتهم بها أو وظيفتهم ضمنها. عند إضافة عضو جديد إلى البطاقة فإنه يشترك بها تلقائيًا، وهذا يعني تلقيه إشعارات عند: إضافة تعليق، إضافة أو تعديل تاريخ الاستحقاق الخاص بالبطاقة، نقلها أو أرشفتها. يُضاف شخص جديد من خلال النقر على زر Members وكتابة الأحرف الأولى من اسمه، ثم الضغط على صورة معرّفه. هناك طريقة أخرى تتمثل بفتح القائمة الرئيسية للوح (بالنقر على زر Show Menu في الجانب الأيمن من المنصة وإلى الأعلى) حيث ستظهر الصور الشخصية لأعضاء الفريق، ومن هنا يمكن سحب وإفلات صورة عضو ما إلى إحدى البطاقات لإضافته إليها مباشرةً. كذلك يمكن أثناء مرور مؤشر الفأرة فوق البطاقة، الضغط من لوحة المفاتيح على الزر a لإظهار قائمة إضافة أعضاء إلى البطاقة. الملصقات Labels ثانيًا إضافة ملصقات labels، والتي تُستخدم لتصنيف البطاقات لونيًا بدلالة يحددها المستخدم، ما يُسهّل عملية فرزها والتعامل معها بصريًا. يتيح تريلو عشرة ألوان للاختيار وإمكانية تحديد دلالة لكلٍ منها. يُمكن للبطاقة الواحدة أن تحمل عدّة ملصقات معًا. كما يُمكن استخدام اختصار لوحة المفاتيح "l" (الحرف الصغير من L) أثناء مرور مؤشر الفأرة فوق البطاقة لإظهار قائمة إضافة الملصقات. لحذف مُلصق ما يكفي النقر عليه مُجددًا. قوائم الفحص Checklist ثالثًا إضافة قائمة فحص checklist، وهي طريقة فعّالة لتجزئة وتفصيل المهام الثانوية المطلوب إنجازها لتحقيق المهمة الأساسية التي تُمثلها البطاقة. بعد الضغط على زر checklist سيظهر مربع عائم لتسمية القائمة الجديدة، أدخل اسمًا أو أبقِ الاسم الافتراضي واضغط Enter، ستلاحظ ظهور قسم جديد ضمن مكونات البطاقة بذات الاسم مع مربع يُتيح إضافة العناصر إلى قائمة checklist. عند إنجاز أحد العناصر اضغط بزر الفأرة الأيمن على المربع المجاور له كي يتم احتسابه، وسيُعبّر عن ذلك بتقدّم مؤشر أزرق يُمثّل النسبة المئوية المُنجزة من إجمالي الهدف. إذا كنت ترغب باستيراد قائمة مكتوبة سابقًا من ملف نصيّ أو من جدول بيانات spreadsheet فيمكنك فعل ذلك ببساطة، عن طريق نسخ القائمة ثم لصقها في مربع إدخال العنصر والضغط على الزر Enter، سيعمل Trello على فصل كل سطر كعنصر مستقل بشكل تلقائي. من خلال السحب والإفلات يمكن إعادة ترتيب القائمة في أي وقت. كما يمكن بالنقر على أحد العناصر ثم الضغط على الرابط Convert to Card تحويله إلى بطاقة منفصلة ضمن نفس القائمة. تاريخ الاستحقاق Due date رابعًا إضافة تاريخ الاستحقاق due date وهو اليوم والوقت الذي تُصبح فيه المهمة مُستحقة للتسليم. إذا كان التاريخ المُحدد أبعد من 24 ساعة فإنه يظهر على البطاقة بلون رمادي فاتح، وإذا كان خلال الـ 24 ساعة القادمة فإنه يظهر بلون أصفر، بينما يظهر بلون أحمر عندما يحين موعد الاستحقاق ويظل التنبيه لمدّة 24 ساعة. كما يمكن تعيين تاريخ الاستحقاق عن طريق الضغط على زر لوحة المفاتيح "d" أثناء مرور مؤشر الفأرة فوق البطاقة المطلوبة. المرفقات Attachments خامسًا إضافة مرفقات Attachments إلى البطاقة، والذي يستقبل الملفات من ثلاثة مصادر رئيسية: جهازك الحاسوب ( لا يمكن رفع الملفات من الهاتف في حال كنتَ تتصفح موقع Trello من خلاله). حساباتك في مواقع التخزين السحابي (مثل Dropbox، Google Drive، Box وغيرها). إضافة رابط لملف على الشبكة. مع ملاحظة أن رفع ملف من جهازك يعني إنشاء نسخة ثانية عنه ضمن Trello، بينما إرفاق ملف من خدمة سحابية يقتصر على مشاركة رابط الملف الأصلي. يدعم كلًا من متصفحي Chrome وَ Safari إمكانية سحب وإفلات المرفقات من مدير الملفات إلى البطاقة لتُرفع مباشرةً إليها. الحسابات المجانية في Trello محدودة بحجم 10 ميغابايت للملف الواحد، بينما يُسمح بـ 250 ميغابايت للحسابات المدفوعة. لكن لا يوجد قيود على عدد الملفات التي يُمكن رفعها. خيارات الإجراء أسفل خيارات الإضافة السابقة يوجد لدينا خيارات الإجراء Actions وهي على أربعة أنواع: أولًا نقل البطاقة Move إلى لوح آخر أو إلى قائمة أخرى ضمن نفس اللوح، أو حتى تعديل موضعها ضمن نفس القائمة. للقيام بذلك ما عليك سوى تحديد الخيارات المطلوبة من القوائم المنسدلة التي يتيحها هذا الخيار ثم الضغط على الزر الأخضر Move. ثانيًا نسخ البطاقة Copy وهو يشبه الخيار السابق إلا أنه يُنشئ نسخة أخرى من البطاقة في الموضع الجديد محافظًا على وجودها ضمن موقعها الأصلي. ثالثًا الاشتراك بالبطاقة Subscribe لتلقي الإشعارات كما سبق شرحه. رابعًا أرشفة البطاقة Archive وذلك عندما يُنتهى منها. لا يجب حذف البطاقات في Trello (إلا في حالات نادرة) لإتاحة إمكانية العودة لأية تفاصيل لازمة عند حدوث مشاكل أو ما شابه. يمكن استخدام خاصيّة البحث في Trello للعثور على البطاقات المؤرشفة (أو غير المؤرشفة، حيث يتم البحث في جميع الألواح الخاصة بك). كما يمكن من القائمة الرئيسية للوح Show Menu الضغط على More ثم Archived Items لمشاهدة البطاقات المؤرشفة مع إمكانية إعادتها إلى اللوح عبر زر Send to Board.

هل زرت فيسبوك اليوم؟ ماذا عن تويتر؟ Instagram؟ Snapchat؟ إن كان الجواب نعم، فالغالب أنك زرتها من باب العادة. السؤال إذًا كيف تبني منتجات تخلق هذه العادة؟ لحسن حظك، هناك كتاب Hooked: How to Build Habit-Forming Products لكاتبه Nir Eyal يحاول شرح هذا! أنصح جميع أصحاب المشاريع ومدراء المنتجات وكل من يرغب ببقاء مستخدميه بقراءته. قد يكون استبقاء المستخدمين (retention) أكبر التحديات التي تواجه أي مشروع، وهو ليس بالأمر السهل حتى بالنسبة لأكثر الشبكات الاجتماعيّة نجاحًا. ألقِ نظرة على المخطّط التالي الذي يبين الفرق بين عدد المستخدمين الكلي وعدد المستخدمين النشيطين (بحسب Golbal Web Index). يعرض كتاب Nir نموذج "الصّنارة" (Hook Model) المُستوحى من نموذج BJ Fogg السلوكيّ الذي ينصّ على ضرورة التحام 3 مكوّنات في لحظة واحدة حتى ينشأ السلوك المرغوب: الحافر والقدرة والمُثير. فيما يلي صورة توضّح هذا النّموذج: عندما تستخدم فيسبوك فإنك على الأرجح تتبع نموذج الصّنّارة وهذا ما يخلق "الإدمان" على فيسبوك: المُثير (الداخلي) = الملل، الفضول، الوحدة، الضجر المُثير (الخارجي) = رؤية إشعار من فيسبوك على الهاتف الفعل = النقر على تطبيق فيسبوك لبدء التصفح ببساطة المُكافأة المُتغيّرة = مشاهدة محتوى جديد ملفت للنظر التفاعل = إبداء الإعجاب، التعليق، تحديث الحالة يحتاج نموذج الصّنّارة لكي يعمل مثيرات قويّة، وجهدًا بالحدّ الأدنى للقيام بالفعل، وتنوّعًا في المحتوى، والقدرة على المشاركة في المنتج. تمعّن في منتجك واسأل نفسك هذه الأسئلة الخمسة: 1. هل يؤدي المثير الداخلي للمستخدم إلى قيامهم بالفعل مرارا؟ نشرت إحدى الزميلات هذه الصورة الغريبة على Instagram خلال احتفالات العام الصينيّ الجديد: سألتها عن سبب التقاط هذه الصورة. الحقيقة أنني سألتها خمس مرّات عن ذلك (بهدف الوصول إلى السبب الأساسي). تبيّن أنّها أرادت مشاركة شيء يجعل الآخرين يتبسّمون، وهذا بدوره يُحسّن صورتها ويرفع من مقامها مقارنةً بالآخرين. هذا ما يُسمّى العملة الاجتماعية وهذا مُثير داخليّ شائع للمشاركة. يمكن لمستخدمي Instagram التفكّر في هذا المُثير عندما يمدّون أيديهم إلى جيوبهم لالتقاط الصورة. 2. هل يظهر المثير الخارجي في الوقت المناسب لمستخدميك؟ ما هو مثيرك الخارجيّ؟ فإن كان المثير الداخلي هو الملل مثلًا، فإن المثير الحارجي هو تلك الدائرة الحمراء فوق رمز تطبيق فيسبوك في هاتفك. ربّما تكون أخرجت هاتفك لتبحث في تويتر، ولكن المثير الخارجي الذي يعرضه فيسبوك أدى بك إلى فتحه بدلًا من تويتر. لا تقتصر المُثيرات الخارجيّة على المُنبّهات والإشعارات ورسائل البريد، فلطالما استخدم كوكا كولا آلات الدفع لتحثّ المُشترين على إرواء عطشهم، والذي هو مُثير داخليّ. آلة الدفع هي المثير الخارجيّ. ما هو مثيرك الخارجيّ إذن؟ 3. هل تصميم منتجك بسيط بما يجعل الفعل سهلا؟ التطبيقات التي تخلق العادة سهلة البدء ولا تتطلب جهدًا كبيرًا. ألقِ نظرة على تويتر: افتح التطبيق، مرّر بإصبعك. هذا كل ما في الأمر! غايةٌ في السهولة! ماذا عن منتجك أنت؟ كيف تقلّل الجهد المطلوب لأداء الفعل؟ العادات تلقائيّة، لا تتطلب التفكير. هذا هو هدفك. 4. هل ترضي المكافأة مستخدميك وتتركهم في الوقت نفسه يطمعون في المزيد؟ أستخدم Flipboard لقراءة الأخبار المهمّة. التطبيقات القائمة على المحتوى تخلق العادات لأنها تقدّم تنوّعًا. يلبّي Flipboard حاجتي للمحتويات الإخباريّة ولكنّه يتركني راغبًا في محتوى جديد يكفي لعودتي. هل في منتجك محتوىً متنوّع؟ ذهبت أيام المحتوى الجامد على الويب بلا رجعة، فما بالك بالتطبيقات؟ امنح مستخدميك سببًا للعودة. 5. هل يتفاعل مستخدموك مع منتجك بحيث يضعون في منتجك شيئا قيما بالنسبة لهم؟ لا يتقن أحد هذا كما يتقنه Evernote. باعتباره حافظة لكل شيء يهمّك تجده على الويب، يجعلك Evernote تبني "مستودعًا" من المحتوى. هذا يؤدّي إلى أمرين اثنين: يُحسّن المنتج الذي يُستخدّم، ويجعل المُستخدم يعود ليجد المحتوى الّذي حفظته. الخاتمة العادات سلاح قويّ جدًّا للمنتجات والخدمات التّي تعتمد في نجاحها على التفاعل العالي. ألقينا نظرةً على بعض الأمثلة، ولكنّني أحثّك على فحص المنتجات الّتي تعتاد استخدامها واكتشاف مُثيراتها وأفعالها، وما تقدّمه من مكافئات وكيف تتفاعل معها. ترجمة -وبتصرف- للمقال Understanding Habit: How to Build a Product That Gets Used Daily لصاحبه Jason Allan. حقوق الصورة البارزة: Designed by Freepik.

سنشرح في هذا الدرس كيفية إعداد بيئة برمجية محليّة للغة بايثون 3 في توزيعة أوبنتو 16.04 أو دبيان 8. بايثون هي لغةٌ سهلة القراءة للغاية ومتنوعة ومتعددة الاستخدامات، واسمها مستوحى من مجموعة كوميدية بريطانية باسم «Monty Python»، وكان أحد الأهداف الأساسية لفريق تطوير بايثون هو جعل اللغة مرحةً وسهلة الاستخدام، وإعدادها بسيطٌ، وطريقة كتابتها مباشرة وتعطيك تقريرًا مباشرًا عند حدوث أخطاء، وهي خيارٌ ممتازٌ للمبتدئين والوافدين الجدد على البرمجة. إصدار بايثون 3 هو الإصدار الحالي من اللغة ويُعتَبَر أنَّه مستقبل بايثون. سيُرشِدُك هذا الدرس خطوةً بخطوة إلى كيفية تثبيت بايثون 3 على نظام لينكس المحلي عندك وذلك عبر سطر الأوامر، وصحيحٌ أنَّ هذا الدرس يشرح عملية التثبيت لتوزيعة أوبنتو 16.04 أو دبيان 8، إلا أنَّ المفاهيم الأساسية فيه تنطبق على أيّة توزيعة أخرى. المتطلبات المسبقة يجب أن يكون لديك حاسوبٌ يعمل بتوزيعة أوبنتو 16.04 أو دبيان 8 (أو أيّ إصدار آخر من دبيان)، وأن تكون لديك امتيازات إدارية على النظام، بالإضافة إلى اتصالٍ بالإنترنت. الخطوة الأولى: إعداد بايثون 3 سنُثبِّت ونضبط بايثون عبر سطر الأوامر، والذي هو طريقةٌ غيرُ رسوميةٍ للتعامل مع الحاسوب، فبدلًا من الضغط على الأزرار فستكتب نصًا وتعطيه للحاسوب لينفذه وسيُظهِر لك ناتجًا نصيًا أيضًا. يمكن أن يساعدك سطر الأوامر على تعديل أو أتمتة مختلف المهام التي تنجزها على الحاسوب يوميًا، وهو أداةٌ أساسيةٌ لمطوري البرمجيات، وهنالك الكثير من الأوامر التي عليك تعلمها لكي تتمكن من الاستفادة منه. هنالك مقالات في أكاديمية حسوب (كدرس مدخل إلى طرفيّة لينكس Linux Terminal) ستعلمك أساسيات سطر الأوامر، وهنالك كتاب «سطر أوامر لينكس» الذي يُعتَبر مرجعًا تفصيلًا لطريقة التعامل مع سطر الأوامر. ستجد تطبيق «Terminal» (البرنامج الذي تستعمله للوصول إلى سطر الأوامر) بالضغط على أيقونة Dash في الزاوية العليا اليسرى من الشاشة ثم كتابة «terminal» في شريط البحث، ثم الضغط على أيقونة التطبيق التي ستظهر بعدئذٍ. يمكنك بشكلٍ بديلٍ أن تضغط على Ctrl+Alt+T في لوحة المفاتيح بنفس الوقت لتشغيل تطبيق Terminal. أما على دبيان 8 فيمكنك فتح القائمة الموجودة أيضًا في الزاوية العليا اليسرى من الشاشة ثم البحث عن «terminal» في شريط البحث، ثم النقر على أيقونة التطبيق. يمكنك أيضًا أن تضغط على Ctrl+Alt+T في لوحة المفاتيح بنفس الوقت لتشغيل تطبيق Terminal. تأتي توزيعات أوبنتو 16.04 ودبيان 8 وإصدارات دبيان الأخرى مثبتةً مسبقًا مع بايثون 3 وبايثون 2. للتأكد أنَّك تملك آخر الإصدارات منها فحدِّث نظامك باستخدام apt-get: sudo apt-get update sudo apt-get -y upgrade الخيار ‎-y يعني أنَّك توافق على تثبيت جميع الحزم القابلة للتحديث، لكن قد تحتاج إلى تأكيد ذلك عند تحديث النظام وذلك اعتمادًا على الحزم التي ستُحدَّث ونسخة نظامك. بعد إكمال العملية، يمكننا التحقق من إصدار بايثون 3 المُثبّت في النظام بكتابة: python3 -V ستحصل على مخرجات في نافذة الطرفية والتي ستريك ما هو إصدار بايثون المثبّت. قد يختلف الرقم بناءً على النسخة المثبتة في توزيعتك، لكن يجب أن يكون شبيهًا بما يلي: Python 3.5.2 لإدارة الحزم البرمجية الخاصة ببايثون، فثبّت pip: sudo apt-get install -y python3-pip الأداة pip هي أداةٌ تعمل مع لغة بايثون تُثَبِّت وتدير الحزم البرمجية التي قد نحتاج إلى استخدامها في تطوير مشاريعنا. يمكنك تثبيت حزم بايثون بكتابة الأمر: pip3 install package_name حيث عليك وضع اسم الحزمة أو المكتبة التابعة لبايثون مكان package_name مثل Django لتطوير الويب أو NumPy لإجراء حسابات علمية. لذا إن شئتَ تنزيل NumPy فيمكنك تنفيذ الأمر pip3 install numpy. بعد أن انتهينا من ضبط بايثون وتثبيت pip، فيمكننا الآن إنشاء «بيئة وهمية» (virtual environment) لمشاريعنا. الخطوة الثانية: إعداد بيئة وهمية تُمكِّنك البيئات الوهمية من إنشاء مساحة معزولة في حاسوبك مخصصة لمشاريع بايثون، مما يعني أنَّ كل مشروع تعمل عليه يملك مجموعة من الاعتماديات (dependencies) والتي لن تؤثِّر على غيره من المشاريع. يوفِّر لنا ضبط بيئةٍ برمجيةٍ تحكمًا أكبر بمشاريع بايثون وإمكانية التعامل مع إصداراتٍ مختلفةٍ من حزم بايثون. وهذا مهمٌ كثيرًا عندما تتعامل مع الحزم الخارجية. يمكنك ضبط أيُّ عددٍ تشاء من البيئات الوهمية، وكل بيئة تُمثِّل مجلدًا في حاسوبك الذي فيه عددٌ من السكربتات. علينا أولًا تثبيت وحدة (module) برمجية باسم venv، وهي جزءٌ من مكتبة بايثون3 القياسية، وذلك لكي نتمكن من استخدام الأمر pyvenv الذي سيُنشِئ البيئات الوهمية لنا. لنثبِّت venv على نظامنا بكتابة: sudo apt-get install -y python3-venv سنتمكن الآن من إنشاء بيئات وهمية بعد إتمام التثبيت، لنختار ما هو المجلد الذي سنضع فيه بيئات بايثون، أو لننشِئ مجلدًا جديدًا باستخدام الأمر mkdir كما يلي: mkdir environments cd environments بعد أن انتقلتَ إلى المجلد الذي تريد احتواء البيئات فيه، فتستطيع الآن إنشاء بيئة جديدة بتنفيذ الأمر الآتي: pyvenv my_env سيُنشِئ الأمر pyvenv مجلدًا جديدًا فيه بعض الملفات التي يمكننا عرضها باستخدام الأمر ls: ls my_env bin include lib lib64 pyvenv.cfg share تعمل هذه الملفات مع بعضها لضمان أنَّ مشاريعك معزولةٌ عن بقية النظام، لكي لا تختلط ملفات النظام مع ملفات المشاريع. وهذا أمرٌ حسنٌ لإدارة الإصدارات ولضمان أنَّ كل مشروع يملك وصولًا إلى حزمٍ معيّنة التي يحتاج لها. تتوافر أيضًا Python Wheels والتي هي صيغة بناء حزمٍ لبايثون والتي يمكن أن تُسرِّع من تطوير البرامج بتقليل عدد المرات التي تحتاج فيها إلى بناءٍ (compile) للمشروع، وهي موجودةٌ في مجلد share في توزيعة أوبنتو 16.04 لكنها ستكون في دبيان 8 في أحد مجلدات lib وليس في share. عليك تفعيل البيئة لاستخدامها، وذلك بكتابة الأمر الآتي الذي سيُنفِّذ سكربت التفعيل: source my_env/bin/activate يجب أن تظهر الآن سابقةٌ (prefix) في المِحث (prompt) والتي هي اسم البيئة المستخدمة، وفي حالتنا هذه يكون اسمها my_env، وقد يكون مظهر المِحَث مختلفًا في توزيعة دبيان، وذلك اعتمادًا على الإصدار المستخدم؛ لكن يجب أن تشاهد اسم البيئة بين قوسين في بداية السطر: (my_env) sammy@sammy:~/environments$ السابقة ستسمح لك بمعرفة أنَّ البيئة my_env مفعلة حاليًا، وهذا يعني أننا سنستخدم إعدادات وحزم هذه البيئة عند إنشائنا لمشاريع جديدة. ملاحظة: يمكنك داخل البيئة الوهمية أن تستخدم الأمر python بدلًا من python3 والأمر pip بدلًا من pip3 إن شئتَ. أما إذا كنتَ ستستخدم بايثون 3 خارج البيئة الوهمية، فيجب عليك حينها استخدام python3 و pip3 حصرًا. يجب أن تكون بيئتك الوهمية جاهزةً للاستخدام بعد اتباعك للخطوات السابقة. الخطوة الثالثة: إنشاء برنامج بسيط بعد أن أكملنا ضبط بيئتنا الوهمية، لننشِئ برنامجًا بسيطًا يعرض العبارة «Hello World!‎»، وبهذا سنتحقق من أنَّ البيئة تعمل عملًا صحيحًا، وستصبح طريقة إنشاء برامج بايثون مألوفةً لديك إن كنتَ وافدًا جديدًا على اللغة. علينا أولًا تشغيل محرر ملفات نصية لإنشاء ملف جديد، وليكن المحرر nano الذي يعمل من سطر الأوامر: (my_env) sammy@sammy:~/environments$ nano hello.py بعد فتح الملف في نافذة الطرفية، فاكتب البرنامج الخاص بنا: print("Hello, World!") أغلق محرر nano بالضغط على Ctrl+x ثم اضغط على y عندما يسألك عن حفظ الملف. بعد أن يُغلَق محرر nano وتعود إلى سطر الأوامر، فحاول تشغيل البرنامج: (my_env) sammy@sammy:~/environments$ python hello.py سيؤدي برنامج hello.py الذي أنشأتَه إلى طباعة الناتج الآتي في الطرفية: Hello, World! للخروج من البيئة، فاكتب الأمر deactivate وستعود إلى مجلدك الأصلي. الخلاصة تهانينا! لقد ضبطتَ الآن بيئة تطوير للغة بايثون 3 في جهازك الذي يعمل بتوزيعة أوبنتو أو دبيان، حان الآن الوقت للتعمق بلغة بايثون وإنشاء برامج رائعة! بالتوفيق. ترجمة -وبتصرّف- للمقال How To Install Python 3 and Set Up a Local Programming Environment on Ubuntu 16.04 لصاحبته Lisa Tagliaferri اقرأ أيضًا المقالة التالية: كيف تكتب أول برنامج لك المقالة السابقة: اعتبارات عملية للاختيار ما بين بايثون 2 و بايثون 3 المرجع الشامل إلى تعلم لغة بايثون كتاب البرمجة بلغة بايثون

أهلًا بك في هذه السلسلة التي تتحدث عن تأثيرات التمرير (Scrolling Effects)، سنستعرض في هذه السلسلة عددًا من تأثيرات التمرير وسنشرح آلية عملها وسنجرِّبها عمليًا. يمكننا الاستفادة من الحدث scroll في JavaScript لإجراء تأثيرات عند تمرير صفحة الويب؛ لكن إن فعلنا ذلك دون إتقان فالنتيجة كارثية، أما إذا أحسنا صنعنا فيمكن لتأثيرات التمرير أن تبهر الزوار وتشعرهم أنَّ موقعك مميز. هذه هي المقالة الأولى في هذه السلسلة، والتي تتضمن التأثيرات الآتية: إخفاء صورة خلفية تدريجيًا عند التمرير توضيح الصورة عند التمرير تدوير العناصر عند التمرير تأثير اختلاف المظهر parallax أما المقالة الثانية والثالثة فهي تتضمن التأثيرات الآتية: إظهار صورة الخلفية عند التمرير باستخدام CSS فقط تمرير سلس للصفحة تطبيق تأثير عدم الوضوح على المحتوى خلف شريط الانتقال إنشاء عنصر قابل للتمرير مع إمكانية وصول مخصصة من لوحة المفاتيح تأثير غروب الشمس باستخدام SVG إظهار فيديو في الخلفية صور متحركة بتأثير parallax باستخدام CSS 3D و JavaScript سأقدِّم لك في بداية كل قسم رابطًا لتجربة المثال تجربةً حيةً على المتصفح. سيسهل عليك كثيرًا أن تفهم الشرح والشيفرات بعد تجربتك للتأثير. إخفاء صورة خلفية تدريجيًا عند التمرير (تجربة حية) إذا كنتَ مِن مَن يستعملون صورًا كخلفية لكامل صفحة الويب، فاستخدام تأثير إخفاء تلك الصورة تدريجيًا عند التمرير هو أمرٌ حسن، حيث يمكّنك ذلك من استخدام أيّة صورة كخلفية دون التأثير على وضوح العناصر أو قابلية قراءة النص. ولعدم قدرة CSS على الاستجابة مباشرةً إلى موضع شريط التمرير، فنحن بحاجةٍ إلى استخدام بعض شيفرات JavaScript لمعرفة موضع التمرير لأحد العناصر. التقنية التي سأشرحها لك هنا سنستخدم فيها أنماط CSS أيضًا لإنشاء تأثير الإخفاء والتي ستُحدَّث ديناميكيًا عبر JavaScript. طريقة التفافية للتعويض عن عدم وجود الخاصية background-opacity للأسف لا يوجد لحد الآن خاصية باسم background-opacity لتحديد شفافية الخلفية؛ لكن من الممكن إنشاء التأثير عبر استخدام ميزة تعدد الخلفيات في CSS: حيث سنضع الصورة كطبقة (layer)، ثم الطبقة الثانية هي تدرجٌ لوني سنستخدم في ألوانه الشفافية alpha. لذا ستبدو شيفرة CSS كالآتي: body { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(times-square-perspective.jpg); background-repeat: no-repeat; background-attachment: fixed !important; background-size: 100% !important; background-position: center top !important; padding: 1rem; padding-top: 45%; color: #fff; } التدرج اللوني (الذي سيتم وضعه فوق الصورة، لأنَّه عُرِّفَ أولًا) غير ظاهر حاليًا، لأنَّ قيمة الشفافية alpha هي 0 للونين المشكلين للتدرج. استخدمنا الكلمة المفتاحية ‎!important للتأكّد أنَّ شيفرة JavaScript –التي سنُطبِّقها بعد قليل– لن تتمكن من إلغاء قيم خاصيات CSS السابقة. شيفرة HTML تحتوي على ما يلي: <h1>New York Stories</h1> <p>In my younger and more vulnerable years… في النهاية، علينا وضع العنصر h1 في الأعلى: h1 { text-shadow: 0 0 5px rgba(0,0,0,0.5); font-size: 4rem; color: #fff; line-height: 1; position: absolute; top: 10px; } ولكي تصبح الفقرة قابلةً للقراءة، فعلينا أن نحوِّل التدرج اللوني إلى اللون الأبيض تمامًا، مما يؤدي إلى إخفاء صورة الخلفية. تعديل التدرجات اللوني في CSS باستخدام JavaScript أضف شيفرة JavaScript الآتية في أسفل الصفحة: var nystories = document.querySelector("p").offsetTop; window.onscroll = function() { if (window.pageYOffset > 0) { var opac = window.pageYOffset / nystories; document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), rgba(255, 255, 255, " + opac + ")), url(times-square-perspective.jpg) no-repeat"; } } في الشيفرة السابقة، قيمةُ المتغير nystories هي موضع أوّل فقرة في الصفحة. عندما يبدأ المستخدم بالتمرير فستُنشِئ الشيفرة السابقة متغيرًا باسم opac الذي سيُقسِّم الموضع «الحالي» للنافذة على الموضع «البدائي» لأول فقرة. ومن ثم ستُجمَع النتيجة مع قيم rgb لألوان التدرج اللوني مكان قيمة الشفافية alpha، مما يعطي التأثير بإخفاء صورة الخلفية عندما يتم تمرير الصفحة. هذا أحد الأمثلة البسيطة عن التمرير، ما زال في جعبتنا المزيد. توضيح الصورة عند التمرير (تجربة حية) أعجبتني اللمسة الجميلة في تطبيق توتير على هواتف iPhone: عندما تمرّر إلى الأسفل في صفحة «Me» فستصبح صورة الترويسة غير واضحة وسيتم تقريبها. أرى أنَّ من المفيد تقليد هذه التقنية في متصفحات الويب، خصوصًا للصور البارزة التابعة للمقالات… شيفرة HTML بسيطة للغاية: <article> <header> <img src="placid-pond.jpg" alt> </header> … </article> وفي نفس الصفحة سنضيف شيفرة SVG: <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="blur"> <feGaussianBlur stdDeviation="0" /> </filter> </svg> الغرض من وضع شيفرة SVG السابقة هو إضافة تأثير عدم الوضوح (blur) في متصفح Firefox، والذي لا يدعم إلى الآن «مُرشّحات CSS» ‏(CSS Filters)؛ لاحظ أنَّ خاصية العرض والارتفاع لعنصر svg لها القيمة 0، لذا لن يؤثِّر على تخطيط الصفحة. سنضيف تأثير عدم الوضوح عبر أنماط CSS: header { overflow: hidden; font-size: 0; } article header img { width: 100%; height: auto; filter: url(#blur); } شيفرة JavaScript أكثر تعقيدًا مما سبق. يجب في البداية أن نضع جميع الشيفرات داخل دالة التي ستستدعى عندما يتم التمرير في المتصفح: window.onscroll = function (event) { } سنحتاج إلى الكثير من المعلومات داخل هذه الدالة. المتغيرات التي سنستعملها هي: var headerImg = document.querySelector("article header img"), headerImgOffset = headerImg.getBoundingClientRect(), imgTop = headerImgOffset.top, imgBottom = headerImgOffset.bottom, imgHeight = headerImg.offsetHeight, viewportHeight = document.documentElement.clientHeight, blur = document.getElementById("blur"), svgblur = blur.getElementsByTagName("feGaussianBlur")[0], topEffectStart = Math.abs((viewportHeight – imgHeight)/5); اقرأ الأسطر السابقة بتمعّن، يجب أن تبدو لك المتغيرات منطقيةً: المتغير headerImg يشير إلى صورة الترويسة الموجودة في أعلى المقالة (وللتبسيط، سأعتبر أنَّ الصفحة فيها مقالة وحيدة، وعنصر header وحيد). المتغير headerImgOffset يسمح لنا بالوصول إلى مكان وأبعاد الصورة، وفي حالتنا سنستخدم imgTop و imgBottom و imgHeight. المتغير viewportHeight يمثِّل ارتفاع نافذة المتصفح. المتغير blur يشير إلى شيفرة SVG في الصفحة، أما svgBlur فهو العنصر الذي سيسبِّب تأثير عدم الوضوح في متصفح Firefox. المتغير topEffectStart هو الفرق بين ارتفاع «إطار العرض» (viewport) الحالي وارتفاع الصورة، ومقسومًا على 5. وهذا يعني أنَّ تأثير عدم الوضوح سيبدأ فقط إذا كانت صورة الترويسة في الخُمس العلوي من نافذة المتصفح. استخدمتُ الدالة Math.abs لكي أحصل دومًا على عددٍ موجب، لأنَّ من الممكن أن تكون الصورة «أطول» من ارتفاع إطار العرض الحالي. بعد توضيح كل ما سبق، فلنضف عبارةً شرطيةً داخل الدالة: if (imgTop < topEffectStart && imgBottom > 0 ) { blurFactor = Math.abs(imgTop / 100); scaleFactor = 1+Math.abs(imgTop / 1000); headerImg.style.webkitFilter = "blur(" + blurFactor + "px)"; svgblur.setAttribute("stdDeviation", blurFactor); headerImg.style.webkitTransform = "scale(scaleFactor)"; headerImg.style.transform = "scale(scaleFactor)"; } هذا يعني إذا كان أعلى الصورة موجودٌ في أول خُمس من نافذة إطار العرض وما زالت الصورةُ معروضةً وظاهرةً للمستخدم، فافعل ما يلي: أخذ الموقع الحالي لأعلى الصورة نسبةً إلى أعلى إطار العرض، وتقسيم الناتج على 100، وتحويل الناتج إلى عدد عشري موجب، وتسمية الناتج باسم blurFactor. وبطريقةٍ مشابهة، سنأخذ الفرق، ونُقسِّمه على 1000 (لأن تغيير المقياس [scale] حساسٌ أكثر من تأثير عدم الوضوح) ومن ثم سنجمع العدد 1 مع الناتج، ونسمِّه scaleFactor. سنُطبِّق blurFactor (بعد إضافة “px” إليه) على صورة الترويسة، وذلك بوضعه كقيمة لمُرشِّح Webkit Blur. وبطريقةٍ مشابهة، سنُغيّر قيمة stdDeviation لنفس قيمة blurFactor وذلك لتطبيق التأثير في متصفح Firefox. في النهاية، سنسند قيمة scaleFactor إلى خاصية transform في CSS لصورة الترويسة. إحدى ميزات استخدام scale و blur معًا هي القدرة على إخفاء تأثير عدم الوضوح في جوانب الصورة، والتي لا يمكن إخفاؤها حتى باستخدام overflow: hidden في الحالات العادية. يمكن استخدام نفس السكربت السابق مع بعض التعديلات لكي يتم التركيز أو توضيح الصورة عندما تكون في منتصف الصفحة، مما يجذب انتباه المستخدم إليها. تدوير العناصر (المسننات) عند التمرير (تجربة حية) سأريك في هذا المثال كيفية تدوير العناصر أثناء تمرير الصفحة باستخدام JavaScript مباشرةً دون أيّة مكتبات خارجية. ضبط المسننات سيتم وضع المسننين في الصفحة باستخدام قيم id فريدة لكلٍ منهما؛ ولمّا كانا عبارةً عن رسوميات متجهة (vector shapes) فمن المعقول أن نُنشئهما باستخدام SVG: <div id="gearbox"> <img src="gear.svg" alt id="leftgear"> <img src="gear.svg" alt id="rightgear"> </div> هنالك الكثير من الخيارات لطريقة وضع المسننات: ففي أغلبية الأحيان سنستعمل موضعًا ثابتًا لها (أي position: fixed)، ومن الممكن أيضًا وضعها في مكانٍ معيّن ثم سيصبح موقعها ثابتًا عندما يتم التمرير بعدها (أي position: sticky). سأستعمل في هذا المثال flexbox لفصل العناصر، وسأستخدم الواحدات vm لقياسها؛ ويمكن أيضًا أن يكون موضع المسننات static وبالتالي ستختفي المسننات عند تمرير الصفحة. #gearbox { display: flex; justify-content: space-between; } #leftgear, #rightgear { width: 20vw; max-width: 20%; height: auto; } تدوير المسننات تدوير العناصر سهلٌ للغاية، كل ما عليك فعله هو إضافة الشيفرة الآتية في أسفل الصفحة: var leftgear = document.getElementById("leftgear"), rightgear = document.getElementById("rightgear"); window.addEventListener("scroll", function() { leftgear.style.transform = "rotate("+window.pageYOffset+"deg)"; rightgear.style.transform = "rotate(-"+window.pageYOffset+"deg)"; }); سيدور كل مسنن بنفس مقدار تمرير النافذة مقدرًا بالبكسل والذي سيحوّل إلى درجات. لتسريع أو تبطيء دوران المسننات نسبةً إلى مقدار التمرير، فيمكنك جعل window.pageYOffset جزءًا من تعبيرٍ رياضيٍ بسيط (كالقسمة أو الضرب بالرقم 2 على سبيل المثال). تفادي «تعليق» المسننات مشكلة شائعة مع أيّة تقنية التي تتعامل مع التمرير هي «تعليق» العناصر حيث ستحاول مطابقة مدخلات المستخدم. أسهل حل للتعامل مع هذه الإشكالية هو تحريك العناصر عندما يصبح المتصفح جاهزًا للتعامل مع تلك الحركة، وذلك عبر requestAnimationFrame. ولفعل ذلك سنُجعل الدالة addEventListener تستمع إلى حدث خاص (custom event): window.addEventListener("optimizedScroll", function() { … }) وقبل دالة معالجة الحدث، أضف دالةً مجهولةً (anonymous function): ;(function() { var throttle = function(type, name, obj) { var obj = obj || window; var running = false; var func = function() { if (running) { return; } running = true; requestAnimationFrame(function() { obj.dispatchEvent(new CustomEvent(name)); running = false; }); }; obj.addEventListener(type, func); }; throttle ("scroll", "optimizedScroll"); })(); طريقة سهلة لإنشاء تأثير اختلاف المظهر (تجربة حية) نَشَرَ «Adam Mustill» تقنيةً ذكيةً جدًا لإنشاء تأثير اختلاف المظهر (Parallax) عبر تعديل واحدة root em. يتساءل الكثيرون عن كيفية إنشاء تأثيرات اختلاف المظهر، وارتأيتُ أنَّ هذه الطريقة قد تكون نقطة بداية جيدة لتعلم إنشاء هذا التأثير. تأثير اختلاف المظهر (Parallax) يتطلب عادةً عمليات معالجة معقدة لعدد كبير من عناصر DOM المنفصلة، لكن التقنية التي سنستخدمها هنا تُسهِّل علينا معالجة العناصر بتغيير قياسٍ وحيد، وهي تستغل ميزة غريبة بعض الشيء لواحدة القياس em: إذا كان قياس العنصر الأب والعناصر الأبناء بواحدة em، فإن القياس النهائي للأبناء هو ناتج ضربها مع بعضها. وصحيحٌ أنَّ هذا السلوك قد يُسبِّب لنا صداعًا (وهو سببٌ وجيهٌ لاستخدام rem إن استطعنا) إلا أنَّ له ميزتين في هذه الحالة: 1. وحدة القياس em لها دعم أقوى في المتصفحات نسبةً إلى rem. 2. تتطلب em وجود عنصر أب، وهذا يعني أنَّ تأثير اختلاف المظهر يمكن أن يُطبَّق على حاوية معيّنة؛ أما في طريقة rem التي ابتكرها Adam، فإنَّ كل شيءٍ موجود في عنصر <body> سيتأثّر بالتمرير إلا إذا اتخذتَ إجراءاتٍ معينةً للحد من ذلك. ولقد حسّنتُ أيضًا من شيفرة Adam وجعلتها سطرًا وحيدًا من شيفرات JavaScript، بدلًا من عدِّة أسطر من jQuery، مما يُحسِّن من الأداء. شيفرات HTML و CSS شيفرة HTML لهذا المثال بسيطةٌ جدًا: إذ هنالك ثلاث صور وترويسة داخل عنصر <div>: <div id="parallax"> <h1>Simple EM Parallax Technique</h1> <img src="candles.jpg" alt> <img src="cherry-tree.jpg" alt> <img src="pagoda-surrounded-by-trees.jpg" alt> </div> وأنماط CSS ليست معقدةً أبدًا: #parallax { background-image: url(blurred-background-small.jpg); background-size: cover; padding-top: 62.5%; overflow: hidden; position: relative; font-size: .1em; } #parallax * { position: absolute; } #parallax img { width: 40%; height: auto; box-shadow: 0 .2em 8px 4px rgba(0,0,0,0.5); } #parallax h1 { font-size:3rem; color: #fff; z-index: 2; top: 0; text-transform: uppercase; width: 100%; text-align: center; text-shadow: 0 .2em 5px rgba(0,0,0,0.4); } #parallax img:nth-of-type(1) { left: 5%; bottom: 22em; } #parallax img:nth-of-type(2) { left: 28%; z-index: 3; bottom: 8em; } #parallax img:nth-of-type(3) { left: 55%; bottom: 12em; } الأمور المهمة التي يجب ملاحظتها هي القيمة الافتراضية الصغيرة جدًا لقياس الحاوية ‎#parallax بواحدة em، بالإضافة إلى قيم bottom لكل صورة، وأنَّ نص الترويسة مقاسٌ بواحدة rem وليس em. شيفرة JavaScript شيفرة JavaScript هي عبارة عن سطرٍ وحيدٍ فقط يجري تعديلًا على إحدى خاصيات CSS: window.onscroll = function() { if (window.pageYOffset > 0) { document.getElementById("parallax").style.fontSize = (window.pageYOffset/20)*.1+"em"; } } بشرح مبسّط: سيؤدي التمرير إلى تغيير قيمة الخاصية font-size لحاوية ‎#parallax، وهذا التغيير يعتمد على عدد البكسلات التي تم تمريرها، مقسومةً على 20، مضروبةً بقيمة ‎0.1 em‎ والتي هي حجم الخط الأصلي. التمرير إلى الأسفل سيؤدي إلى زيادة قيمة الخاصية bottom لكل صورة مما يدفعها نحو الأعلى؛ لكن الترويسة لن تتأثر لأنها مُقاسة بواحدة rem، وهي ذات خاصية z-index مناسبة مما يسمح للصور بالمرور أمامها وخلفها. الخلاصة استعرضنا التأثيرات السابقة بسرعة، بقي عليك أن تتمعّن بشيفراتها، وتحاول إيجاد استخدامات أخرى للتقنيات التي رأيتها. ترجمة وبتصرّف للمقالات: Fade A Responsive Background Image On Scroll Scroll-to-Focus Effect For Hero Images Rotate Elements on Scroll with JavaScript Easy Parallax Effects With Em لصاحبها Dudley Storey

إذا كنت تدير حملات إعلانية على فيس بوك، فلا بد من أنّك تسعى إلى إنشاء أفضل الإعلانات من خلال استخدام صور لافتة للنظر، متن copy متميّز، عناوين جديرة بالنقر، وجعل هذه الإعلانات موجّهة بدقّة. ولكن، ومع هذه المساعي قد لا تحصل على النتائج المرجوّة. حيث ستلاحظ بمرور الوقت أنّك تحصل على عدد كبير من النقرات، لكن عدد قليل فقط من التحويلات conversions وليس هذا ما تأمل به، وستشعر أنّ إمكانيات إعلانك على فيس بوك قد ذهبت هباء. لا تدع كل عملك الشاق يذهب هباء هناك العديد من العوامل التي يمكن أن تزيد معدلات التحويل لإعلانات فيس بوك، لكن في النهاية، لا تقتصر إدارة حملات إعلانات فيس بوك الناجحة على إنشاء إعلانات جديرة بالنقر، ولكنّها تُعنى بضمان اتّباع العملاء المحتملين لمسار سلس من البداية إلى النهاية. فبعد أن يقوم العميل المحتمل بالنقر على الإعلان، يجب أن يوجّه إلى صفحة هبوط مخصصة تحدد بوضوح ما وعدَ الإعلان به، وإلّا ستجعل العملاء المحتملين يشعرون بأنّهم اتخذوا قرارًا خاطئًا بالنقر وانتهى بهم الأمر في المكان الخطأ. ولكي يتوضّح أكثر ما نقصده، دعونا نتعلّم من أخطاء الآخرين من خلال الأمثلة التي سنأتي إلى ذكرها. لقد بحثنا على الإنترنت وحلّلنا أكثر من 50 مثال مختلف على حملات إعلانات فيس بوك، بما فيها صفحات الهبوط التابعة للإعلان. انتقينا منها 9 أمثلة لإثبات ما يجب أن تكون عليه حملات إعلانات فيس بوك المميزة والناجحة وما يجب تجنّبه فيها. سيعرض كل تعقيب بعض النصائح الأساسية التي يمكن أن تساعد على خفض تكاليف إعلانات فيس بوك وفي نفس الوقت إعطاء العملاء المحتملين الثقة التي يحتاجونها للتحويل. لنبدأ! Skillshare يوفّر Skillshare مجموعة كبيرة من الفيديوهات لتعلّم مهارات جديدة إبداعية. إعلانهم الموضّح أدناه ملّون ويتباين مع لوني صفحة آخر الأخبار newsfeed لفيس بوك؛ الأبيض والأزرق. بالإضافة إلى أنّه يعرض قيمة واضحة؛ " Unlock your potential with hundreds of online classes" (حرّر إمكانياتك مع الآلاف من الدروس على الإنترنت)، مما يجعل هذا الإعلان ملحوظًا بشدة وجديرًا بالنقر: كما أنّ استخدامهم للكلمة "Free" (مجانًا) مفيد أيضًا. لنلقي نظرة على الصفحة التي يتم توجيهي إليها عند النقر على الإعلان: للوهلة الأولى، تبدو الصفحة التي هبطت عليها غير ذات صلة بالإعلان الذي نقرت عليه. فالتصميم والمتن مختلفان بشكل كبير، مما يجعلني أعتقد أنّني نقرت على الرّابط غير المُناسب. من عيوب الإعلان وصفحة الهبوط يذكر الإعلان دورة Adobe Illustrator مجانية لكنّ الأمر أخذ مني بعض الوقت إلى أن لاحظت أنّ الفيديو الموجود في أعلى صفحة الهبوط هو حول الدورة المعنية. وهذا يعني أن رسالة الإعلان ومتن صفحة الهبوط غير متوافقان بشكل جيّد. وستكون صفحة الهبوط أفضل بكثير لو استخدموا عنوانًا يؤكّد لي أنني في المكان الصحيح. لم تُعرض الصورة اللافتة للنظر التي استخدمت في الإعلان على صفحة الهبوط، ولا حتّى في الفيديو. ولو عملوا أكثر على توافق التصميم، أي مدى تقارب تصميم صفحة الهبوط مع الإعلان الذي جلب الزوّار إلى هذه الصفحة، لتمكّنوا من خلق تجربة أفضل للعملاء المحتملين، وربّما أيضًا تمكّنوا من زيادة التحويلات لاحقًا. يبدو للوهلة الأولى عدم وجود زر أو لافتة banner دعوة إلى إجراء تبيّن للناس أنّ بإمكانهم الاشتراك في العرض المحدود المذكور في الإعلان. لكن عند التمعّن أكثر ستجد دعوة إلى إجراء ركيكة فوق الفيديو: "Learn the Ins and Outs of Illustrator" (تعلّم كل ما تحتاجه حول Illustrator). يجب أن تسهّل على الناس التحويل باستخدام دعوة إلى إجراء كبيرة وواضحة توافق العرض في الإعلان. يقود إعلان فيس بوك هذا إلى صفحة تحتوي على الكثير من الفيديوهات، التبويبات، والمراجعات. وبعبارة أخرى لا وجود لصفحة هبوط مخصّصة ذات هدف واحد. وكما يقول أحد مؤسسي شركة Unbounce (في وصف لصفحات الهبوط): "صفحة واحدة. هدف واحد. لا غير". ينقر عملاؤك المحتملون على إعلانك للاستفادة من عرضك. لا تشتتهم بأمور أخرى. CoPromote يوفّر CoPromote لمنتجي المحتوى طريقة لتنمية جمهورهم بواسطة الترويج المتبادل cross-promoting لعمل كلّ منهم. وبما أنّهم (في CoPromote) خبراء بالمحتوى، سيعرفون بالتأكيد كيفية جذب الانتباه بواسطة إعلاناتهم على فيس بوك. ومن المؤكّد أن تبرز إعلاناتهم الذكية بين الفوضى المعتادة على صفحات آخر الأخبار. أحد إعلاناتهم هو صورة بقرة واثقة ترافق الدولفين في القفز وآخر صورة للممثل والمغني Pitbull متداخلة مع جزء من إحصاءاتهم المذهلة. لكن ما الذي يقدّمه CoPromote على واجهة صفحة الهبوط بعد النقر على كل إعلان؟ يوجّه كلا الإعلانين الزائر إلى نفس صفحة الهبوط داخل التطبيق. الصفحة التي تم توجيهي إليها عند النقر على إعلان CoPromote هناك العديد من الأسئلة التي تخطر على بالي؛ هل ما زلت داخل فيس بوك؟ إين اختفى Pitbull؟ هل هذه مجرّد صفحة هبوط لعلامة تجارية خاصّة بالموضة؟ من عيوب الإعلانات وصفحة الهبوط يقود كلا الإعلانين إلى صفحة واحدة وعامة داخل فيس بوك. في حين يجب أن يكون لكل إعلان ذي متن وتصميم فريد صفحة هبوط خاصّة ومخصصة. فالصفحات العامة مثل الموضّحة أعلاه يمكن أن تسبب الالتباس لأنّها لا تكمل مسار التحويل الذي بدأت به من خلال الإعلان. يمكن أن تُحقق صفحة الهبوط المضمّنة في تطبيق فيس بوك نجاحًا في حال احتوت على معلومات مكمّلة لرسالة الإعلان. عادة ما تكون الإعلانات ذات مساحة محددة وتفرض عليك أن تكون موجزًا في الرسالة، لكنّ صفحات الهبوط التابعة للإعلان تحتوي على مساحة إضافية يجب استغلالها لتوضيح العرض، تفصيل الفوائد، وتبديد الشكوك التي قد تتملّك العملاء المحتملين حول الانضمام أو التحويل. لا تتوافق صفحة الهبوط من الناحية المرئية مع الإعلان الذي جلب الزائر إليها. ففي الواقع، أدى اختيارهم لمثل هذه الصور المختلفة إلى التنافر بين الإعلان وصفحة الهبوط، مما يجعل المرء يتساءل؛ هل هو تطبيق خاص بالموضة؟ بالرغم من أنّ صفحة الهبوط في فيس بوك تبقي الناس على نفس الصفحة ولها هدف واحد، لكن ما زال هناك العديد من الأماكن التي يمكن أن ينقر عليها الناس مما يشغلهم عن الهدف الأساسي: "Join Now" (اشترك/انضم الآن). وما يزيد التشتيت هو إعلانات إعادة الاستهداف لعلامات تجارية أخرى في الشريط الجانبي والتي تظهر للمشاهد في نفس الوقت، مما يجعل نسبة الانتباه attention ratio ضئيلة. Visa مع Pizza Hut في هذا الإعلان، وحّدت Visa الجهود مع Pizza Hut لعرض بعض الخصومات الرائعة. يعرض هذا الإعلان على وجه التحديد خصم 50% على الطلب التالي عندما يقوم المشتري باستخدام بطاقة Visa عند الدفع، ويا له من عرض جميل: أول ما سيجذب انتباهك هو صورة البيتزا الشهية، وخصوصًا إذا كنت من عشاق البيتزا ولم تتناولها مؤخرًا. أما الإطار الثاني فيعرض صور لهاتف مع تطبيق Pizza Hut، وهذا استغلال ذكي لسياق الاستخدام context of use. بإمكانك تصوّر نفسك مستخدما التطبيق لكي تصل يداك إلى البيتزا على جهة اليسار. إذا ما مدى نجاح صفحة الهبوط التابعة للإعلان؟ صفحة الهبوط هذه ذات عرض واضح يتموضع في الواجهة والوسط: "50% Off your order if you use Visa Checkout" (خصم 50% عند الدفع باستخدام بطاقة Visa). وبصورة عامة، يتطابق التصميم والرسالة على كل من الإعلان وصفحة الهبوط بشكل ملائم، مما يجعل مسار الزائر سلسًا: تنقر على عرض بيتزا وينتهي بك المطاف بعرض بيتزا. من عيوب الإعلان وصفحة الهبوط كان من الممكن أن يكون متن الإعلان محددًا أكثر ومبهجًا أكثر. فكما نلاحظ، العرض مدفون بين مجموعة نصوص أو متداخل مع صورة، في حين أنّه يجب أن يكون في الواجهة والوسط على هيئة عنوان. بالرغم من أنّ الدعوة إلى إجراء في صفحة الهبوط واضحة وعريضة، إلّا أنّه هناك بعض الروابط الأخرى القابلة للنقر والتي يمكن أن تؤدي إلى تسرّب التحويلات. يبدو شعار "Visa Checkout" كزر، لكنه ليس كذلك. وهذا يؤدي إلى خلق حالة من الارتباك والمقاومة النفسية للتحويل friction لدى العميل المحتمل. Target يُعتبر Target ثاني أكبر متاجر البيع بالتجزئة للسلع المخفّضة. وهم يقومون بمشاركة عروض أسبوعية على فيس بوك لتشجيعك على الشراء. يعرض إعلانهم خصمًا رائعًا: "Buy one, get one 50% off" (اشترِ قطعة، واحصل على خصم 50% على الثانية). تصميم الإعلان مبسط واستخدم صورًا لأشخاص ذوي مظهر جيّد مبتسمين (وأفترض) لأنّهم أحبو الكنزات المريحة التي يرتدونها. لكن ما الذي سيحدث عند النقر على الإعلان؟ صفحة الهبوط مصمّمة بهيئة المطويات brochures، ولم أرَ منذ أعوام موقعًا على الإنترنت بهذه الهيئة. من عيوب الإعلان وصفحة الهبوط لقد ذابت جمالية بساطة الإعلان في بحر من الخيارات على صفحة الهبوط. وبالرغم من أنّ العروض الأسبوعية يمكن أن تنطبق على المزيد من السلع غير الكنزات، إلّا أنّني كنت أتوقّع أن أرى المزيد من الكنزات لأنّ الإعلان كان يشير إليها. يمكن أن تكون صفحة الهبوط ذات الهدف الواحد، أو التي تعرض قائمة من السلع المنتقاة أكثر فعّالية في هذه الحالة. لقد خلقت أحجام الخطوط المختلفة المنتشرة عبر الصفحة تسلسلًا هرميًا مبعثرًا للمعلومات. ما هو العنوان؟ ما هو المتن الذي يجب أن يركّز عليه العميل المحتمل عندما يهبط على صفحة بنمط المطوّيّات؟ من الصعب مواصلة التركيز في هذه الصفحة مما يجعل العملاء المحتملين يترددون ويغادرون الصفحة. هناك العديد من الأرقام التي تفصّل أسعارًا مختلفة، مما يجعل الزائر ينسى بسهولة عرض الخصم 50%. ركّز على مفهوم "صفحة واحدة، هدف واحد" من فضلك. هناك العديد من الأماكن، بالنسبة لي، للنقر عليها في هذه الصفحة التي تشبه المُطويّة، مما يجعلني لا أعرف من أين أبدأ. وبنسبة انتباه 1:12، يمكن أن أمضي الساعات في النقر، ومن المرجّح سأشعر بالارتباك وأغادر الصفحة. MetLife Metlife هو من أكبر خدمات التأمين والفوائد في العالم. ويروّج إعلانهم أدناه لتأمين على السيارات كأحد فوائد العمل: لقد استخدموا في MetLife شخصيات الرسوم المتحركة Peanuts كجزء من تسويقهم لسنوات عديدة، سواء كان في إعلانات التلفاز أو في الإعلانات المطبوعة. ونرى في هذا الإعلان تسابق الشخصيات على دراجتهم الرباعية. لكن إلى أين يقود هذا الإعلان الظريف؟ يوجّه الإعلان عند النقر عليه إلى صفحة الهبوط هذه التي تحتوي على صورة امرأة جالسة في سيارتها. من عيوب الإعلان وصفحة الهبوط بالرغم من أنّ صورة السيارة ترتبط بتأمين السيارات المذكور في الإعلان، إلّا أنّ الصور المختلفة جذريًا تخلق تجربة غير متناغمة للزوّار. إذ تبدو صفحة الهبوط باردة مقارنة بإعلان فيس بوك الدافئ واللطيف. أين اختفت الشخصيات الأربعة؟ لم يُعكس متن copy الإعلان في صفحة الهبوط. تخلق الفروق الدقيقة، مثل "car insurance" (تأمين السيارات) بدلًا من "auto insurance" (تأمين السيارات باستخدام كلمة مرادفة للسيارات) التنافر الإدراكي والشك في أذهان العملاء المحتملين. تُركت الكثير من المساحات الفارغة على جهة اليمين في تصميم صفحة الهبوط. وهذا الأمر مشتت ويجعل الصفحة تبدو وكأنّها معطّلة. يجب أن تبذل ما في وسعك لجعل العملية تبدو جديرة بالثقة خصوصًا بالنسبة لخدمات مثل التأمين، حيث يُطلب من العملاء المحتملين توفير الكثير من المعلومات الشخصية. Glassdoor يوفّر Glassdoor مراجعات أصحاب العمل التي تساعد في توجيه الناس الذي يبحثون عن وظيفة. الغرض من إعلانهم على فيس بوك هو جذب الموظفين وخبراء الموارد البشرية إلى مؤتمر قمة Glassdoor السّنوية Employer Branding Summit التي تقام في سان فرانسيسكو. ويعرض الإعلان صورة لرجل مجتهد يعمل على حاسوبه المحمول. فإلى أين يقود الإعلان بعد النقر على هذه الصور الجميلة؟ من أين أبدأ بالضبط؟ نعم هناك بعض التوافق في التصميم والرسالة بين الإعلان وصفحة الهبوط، لكن هناك بعض الأمور غير الصحيحة هنا. من عيوب الإعلان وصفحة الهبوط أولا، الإعلان نفسه فيه مجال للتحسين. يعمل الوسمان (EmployerBranding & #GDsummit#) كعنصرين مشتتين عن الهدف الرئيسي من الإعلان: حمل الناس على النقر على الدعوة إلى إجراء. يمكن أن تساعد الوسوم في بناء الوعي بالحدث، لكن من الأفضل استخدامها في جزء من محتوى بدلا من الإعلان الذي تنفق عليه أموالك. بالرغم من أنّ صفحة التسجيل في الحدث تنجح في استخدام الدليل الاجتماعي من خلال التفاخر بالمتحدثين في المؤتمر، إلّا أنّها لم تفلح في الترويج لفوائد حضوره. كما أنّ عرض نظرة عامة حول برنامج المؤتمر غير كافٍ لتوضيح فوائد الحضور للعملاء المحتملين، خصوصًا بالنسبة لمثل هذه الأحداث الكبيرة. وكان بإمكانهم النجاح أكثر في الترويج وعرض القيمة التي سيكسبها الحضور المحتملون من المؤتمر فيما لو استخدموا فيديو تقديمي قصير. Growth Geeks Growth Geeks هو سوق يوفّر إمكانية الوصول إلى خدمات المتخصصين في موضوعات مثل استسراع النمو، التسويق بالأداء، الشبكات الاجتماعية، وغيرها. يتفاخر إعلانهم أدناه بأحد المحترفين على موقعهم: "مهووس النمو" (growth geek) الذي يدعى Vincent والذي يمكن توظيفه على الموقع للمساعدة في إنشاء إعلانات فيس بوك. تحث الدعوة إلى إجراء إلى النقر للتعرّف على (Vincent (Click here to meet Vincent. فما الذي سيحدث عند النقر بحماس على الإعلان؟ أين Vincent؟! من عيوب الإعلان وصفحة الهبوط بمجرّد أن تنقر على الإعلان، سيتم أخذك إلى صفحة مليئة بالأمور المختلفة حيث لن تتعلّم المزيد حول Vincent أو غيره من خبراء إعلانات فيس بوك. بدلًا من ذلك، سيُعرض عليك فيديو ترويجي وقائمة ضخمة وهائلة تشتمل على الخبراء الآخرين الذي يقدمون خدمات مختلفة. من الرائع أن يقوموا بإنشاء إعلانات محددة لأنواع محددة من المحترفين، لكن يجب أن تكون صفحات الهبوط محددة أيضًا. فإذا قام العميل المحتمل بالنقر للتعرّف على Vincent، يجب أن يوجّه إلى صفحة تعرّفه على Vincent بالتحديد. ولا يعني هذا أنّه يجب أن تنشئ 50 صفحة هبوط مقابلة لكل إعلاناتك. ولكن بإمكانك استخدام أدوات مثل Dynamic text replacement التي تساعدك على الاستفادة من صفحة واحدة بتخصيصها لكل إعلان فريد تقوم بإنشائه. ففي النهاية، سيؤدي المزيد من التحديد والتخصيص إلى معدلات تحويل أفضل لإعلانات فيس بوك. Udemy Udemy هو سوق للتعلّم عبر الإنترنت يوفّر أكثر من 30,000 دورة في مختلف الموضوعات، من البرمجة، إلى الإنتاجية. إنّ متن إعلان Udemy الموضّح أدناه طويل بعض الشّيء، مع الكثير من المعلومات التقنية المحشورة في إعلان واحد. قد يكون من المفيد تجريب لون مغاير، فاللون الأزرق المستخدم في الإعلان مشابه للون الأزرق لواجهة فيس بوك، مما يجعل الإعلان يتلاشى في صفحة آخر الأخبار. لنلقِ نظرة على ما بعد النقر: من عيوب الإعلان وصفحة الهبوط متن صفحة الهبوط ضخم جدًا. وبالرغم من أنّهم قاموا بعمل جيّد بالتحدّث حول الفوائد وبناء التوقعات، كان من الأجدر التجريب ومقارنة الصفحة الطويلة مع صفحة أقصر بمجموعة من الأقسام. فإذا كانت الصفحة الطويلة تعمل بشكل أفضل، سيكون من الجيد تضمين زر الدعوة إلى إجراء بالقرب من الجزء السفلي منها لجذب العملاء المحتملين الذين يقرؤون الصفحة بأكملها. وبالمثل، اندثر الدليل الاجتماعي تحت التفاصيل الكثيرة للدورات. قد يكون من المفيد تجريب وضع بعض التقييمات في الأعلى بالقرب من الدعوة إلى إجراء لتجذب العملاء المحتملين الذين لن يمرروا أبدًا إلى أسفل الصفحة. لا تنعكس لوحة الألوان والصورة من الإعلان في صفحة الهبوط. يمكن أن يكون استخدام صورة مماثلة لصورة الإعلان في الفيديو وسيلة ذكية لجعل الزائر يستحضر في ذاكرته إعلان فيس بوك. زر الدعوة إلى إجراء "Take this course" (اشترك في هذه الدورة) موضوعٌ بعيدًا على جهة اليمين ومن السهل تفويته، وخصوصًا عندما يكون بجانبه مثل ذلك الفيديو الكبير. سيكون من الجيّد لو قاموا باختبار موضعه أيضًا. نأتي الآن إلى حملات إعلانات فيس بوك الرائعة لقد رأينا العديد من الأمثلة على حملات إعلانات فيس بوك التي لم تكن مرضية جدًا، لكن كيف تبدو حملات الإعلانات الناجحة؟ لنلقِ نظرة على شركة رائدة بوضوح في إعلاناتها وصفحات الهبوط الخاصة بها. Hired من أفضل الأمثلة التي شاهدناها، والتي تجاوز عددها 50 مثالًا، كان من Hired: سوق العمل لمحترفي المبيعات. يستخدم إعلانهم لونًا أخضرًا لافتًا للنظر والذي يتباين بصورة جيّدة مع لوني فيس بوك التقليديين؛ الأزرق والأبيض. فضلًا عن ذلك، متن الإعلان مختصر وجميل، ويركّز مباشرة على نقاط الألم Pain points التي يمكن أن يعاني منها عملاؤهم المحتملون: ماذا عن صفحة الهبوط المقابلة للإعلان؟ من مزايا الإعلان وصفحة الهبوط توضّح صفحة الهبوط المزيد من التفاصيل حول عرض القيمة من خلال تقديم فوائد محددة: " Job Interviews with one application 5-10" مقابلة عمل بواسطة تطبيق واحد). استخدموا على صفحة الهبوط نفس لغة الإعلان، مع ذلك، قد يحتاجون إلى اختبار توافق العنوان في الإعلان مع العنوان على صفحة الهبوط. تنعكس ألوان الإعلان على صفحة الهبوط باستخدام زر دعوة إلى إجراء لافت للنظر بلون أخضر زاهٍ مألوف للزائر. تحتوي صفحة الهبوط التابعة لإعلان Hired على زر دعوة إلى إجراء في الأعلى، وزرين آخرين في الأسفل. تكون بعض العروض أكثر تعقيدًا أو أكثر إلزامًا وقد تتطلب صفحات هبوط أطول لتحقيق عملية البيع. وفي هذه الحالة يجب أن تتأكد من وضع العديد من أزرار الدعوة إلى إجراء لكي تكون في متناول الناس للنقر عليها في الموضع الذي يكونون فيه مقتنعين كفاية. جميع أزرار الدعوة إلى إجراء على صفحة الهبوط لها هدف واحد: حثّ العملاء المحتملين على الاشتراك. مع ذلك، هناك بعض الروابط على هذه الصفحة والتي تستدعي من Hired تجريب إزالتها لمعرفة فيما إذا كان ذلك يساعد على تركيز الانتباه. بصورة عامة، جهودهم رائعة ويُمكننا التعلم منها. خاتمة في الواقع، لم نصل إلى إحصاءات هذه الشركات أو بيانات معدلات التحويل الخاصة بها. ويمكن أن تكون هذه الحملات الإعلانية قد أدت إلى نتائج معتبرة، ولكن بأيّ ثمن؟ عندما يكون إعلان فيس بوك غير مرتبط بصفحة الهبوط المقابلة سيؤدي ذلك إلى خلق تجربة سيئة للعملاء المحتملين، وهذا ما لا يرغب الجميع في حصوله. لذلك لا تدّخر أي جهد مع حملاتك الإعلانية على فيس بوك. اجعل صفحة الهبوط مكمّلة لإعلانك، ودع عملاءك المحتملين يركّزون على هدف واحد من الحملة. لا للمشتتات. ترجمة -وبتصرّف- للمقال Facebook Ad Campaign Examples Critiqued for Conversion لصاحبته: Helen Arceyut Frixione.

ضمن قائمة أبرز الكتب في مجال ريادة الأعمال يوجد كتاب The Four Steps to the Epiphany (كلمة Epiphany بمعناها الإغريقي -وليس الديني المسيحي- تدل على اكتشاف المعنى والإحاطة بالدلالة. أو بصيغة أخرى إيجاد القطعة الأخيرة من الأحجية والإحاطة بالصورة كاملة). في هذا الكتاب أسس ستفين بلانك (Steven Blank) لنظرية أسماها ”تنمية العميل Customer Development“، هي عبارة عن نظام يتكون من مجموعة من العمليات لبناء حلقة تكرارية من الاختبارات، استطلاعات الرأي والتغذيات الراجعة من الزبناء (Feedback) خلال مراحل تطوير المنتج. غالبا يكون السبب الرئيسي لفشل الشركات الناشئة هو نقص الزبناء/المستخدمين للمنتج. فإذا لم يكن للمنتج عدد كاف من المستخدمين، لن يكون للشركة دخل مالي كاف لمواصلة الحياة. السبب في نقص المستخدمين/العملاء، هو أن المنتج غير مناسب. إما أن الجودة ضعيفة جدا، أو غالبا لأن المنتج لا يلبي أي حاجة لدى المستهلكين. هذا أبرز الأخطاء التي يقع فيها رواد الأعمال: بناء منتج لا أحد يحتاج إليه. بناء منتج لا يحل أي مشكلة. هذا الخطأ من السهل تجاوزه في حالة اعتماد نظرية تنمية العميل. نظرية تنمية العميل هي إطار عمل يتكون من أربع خطوات تهدف إلى اكتشاف السوق المناسب للمنتج، التحقق من حجم السوق، بناء المواصفات المناسبة للمنتج لتلبية احتياجات حقيقية لدى العميل، اختبار الطرق الملائمة لجلب المزيد من العملاء وتوفير الموارد المناسبة لتطوير وتوسيع العمل التجاري. يشبه هذا الإطار، كثيرا، مبادئ التجربة العلمية: (1) ملاحظة ووصف الظاهرة، (2) صياغة فرضية لشرح الظاهرة، (3) استخدام الفرضية للتنبؤ بنتائج ملاحظات أخرى، ثم (4) قياس كفاءة التنبؤات بناءً على التجارب العملية. ففي حالة الشركات الناشئة، أو بصفة عامة أي عملية لإطلاق منتج جديد، يتم الأمر، عبر أربع مراحل، بالشكل التالي: تسمى المرحلة الأولى بـ اكتشاف العميل (Customer Discovery)، خلالها يتم ملاحظة احتياج معين -أو مشكلة ما- لدى فئة محددة من الأفراد، فيتم وصف ذلك الاحتياج ودراسته لبناء منتج يشبع تلك الحاجة. هذا المنتج لا يجب أن يكون منتجا متكاملا يتطلب شهورا، أو سنوات، للتنفيذ. بل هو منتج يمثل الحد الأدنى المطلوب لاختبار الفرضية المقترحة لإشباع الاحتياج. تسمى هذه النسخة الخفيفة من المنتج بـ ”Minimum Viable Product“. بعد أن ينجح المنتج في تلبية احتياج الفئة الصغيرة المستهدفة، يتم الانتقال إلى المرحلة الثانية؛ التحقق من العميل (Customer Validation)، أي التحقق من حجم السوق المستهدف بالمنتج. يتم خلال هذه المرحلة التحقق من حاجة السوق للمنتج، اختبار النموذج الربحي (Business Model) وبناء خارطة الطريق للبيع والتسويق. تعتمد نظرية تنمية العميل على سلسلة متواصلة من الاختبارات، تتم في كل مرحلة، للتحقق دائما من فرضية: هل ثمة عدد كاف من العملاء الراغبين في هذا المنتج، وهل يمكن لهذا السوق أن يحقق إيرادات كبيرة للشركة. إذا أثبتت الاختبارات والتغذيات الراجعة خلال أي مرحلة من المراحل الأربع -بالأخص خلال المرحلتين الأوليتين- أن حجم السوق صغير أو الإيرادات محدودة، يتم تنفيذ عملية ”التحويل Pivot“، التي يتم خلالها العودة إلى المرحلة السابقة -عادة المرحلة الأولى- لطرح افتراضات جديدة وإجراء اختبارات أخرى، والنتيجة تكون إما بناء منتج آخر مختلف، البحث عن سوق آخر، أو أحيانا كلا الأمرين. بعد أن يتجاوز المنتج عنق الزجاجة -أي المرحلة الثانية- تبدأ المرحلة الثالثة؛ خلق العميل (Customer Creation)، وخلالها يتم التوسع في تطوير المنتج وتنفيذ خطة التسويق والمبيعات بتركيز أكبر للحصول على عملاء جدد للمنتج. بعد ذلك يأتي دور المرحلة الرابعة؛ بناء الشركة (Company Building)، وهي مرحلة التوسع الكبير على مستوى العمليات والانفتاح على الأسواق الجديدة. خلالها تكبر الشركة ولا تبقى مجرد شركة ناشئة. عملية تنمية العميل ليست حلا سحريا بمجرد تنفيذه فإن رائد الأعمال يضمن نجاح مشروعه. بل هي سلسلة خطوات تركز عمل المبادر وتوجهه لطرح الأسئلة الحقيقية والاحتكاك بالسوق منذ اليوم الأول، بدل الانعزال عن العالم لأشهر طويلة لبناء منتج جديد، ثم حين يتم إطلاق المنتج في السوق يتفاجأ المبادر بأن لا أحد اهتم بالمنتج، لأن لا أحد يحتاج إلى منتج لا يحل أي مشكلة ولا يلبي أي احتياج حقيقي. تنمية العميل هي خطة لتطوير المنتجات من خلال عملية تواصل مستمرة مع السوق، في كل مرحلة من مراحلها يتم اختبار فرضيات معينة والتحقق منها بأقل تكلفة ممكنة وأسرع وقت، لتكون النتيجة إما بناء منتج متوافق تماما مع احتياجات السوق، أو الفشل سريعا -بأقل تكلفة- والتوجه لبناء منتج آخر قد تكون حظوظه في النجاح أكبر من سابقه. ستكون لنا عودة لهذا الموضوع لتفصيل المراحل الأربع لتنمية العميل، في وقت لاحق.