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

في هذا المقال القصير سوف نصنع تنبيها مؤقتا بسيطا عبر CSS animations. ما سنفعله بالتحديد هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفائها. وسوف سنعمل شريط تقدم (progress bar) لنعرف كم تبقى من الوقت ليختفي التنبيه. ستكون تنبيهات هذا الدرس من الشكل التالي: بالنسبة للهيكلة فسوف نستخدم div يحتوي على الرسالة وبداخله div آخر من أجل شريط التقدم: <div class="tn-box tn-box-color-1"> <p>Your settings have been saved successfully!</p> <div class="tn-progress"></div> </div>سيملك التنبيه tn-box. و tn-box-color-1. من أجل تحديد اللون، سوف نثبت الصندوق أسفل النافذة حتى يرتفع عندما يظهر: .tn-box { width: 360px; position: fixed; bottom: 20px; left: 20px; padding: 25px 15px; text-align: right; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6); opacity: 0; cursor: default; display: none; transform: translateY(30px) } .tn-box-color-1{ background: #ffe691; border: 1px solid #f6db7b; }أما بالنسبة لشريط التقدم فسنعطيه التالي: .tn-progress { width: 0; height: 4px; background: rgba(255,255,255,0.3); position: absolute; bottom: 5px; right: 2%; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 -1px 0 rgba(255,255,255,0.6); }في البداية، سيكون عرض شريط التقدم 0. في هذا المثال، أنا أستخدم checkbox من أجل إطلاق animation عندما يتم الضغط عليه: <input type="checkbox" class="fire-check"> <section> <div class="tn-box tn-box-color-1"> <p>شريط التقدم الجميل!</p> <div class="tn-progress"></div> </div> </section>الزر يسبق صندوق التنبيهات لذا نستطيع استخدام محدد ~ من أجل تحديد العنصر الذي يأتي بعده. وإذا أردت أن تتحكم بالأمر عبر جافاسكربت (عبر إضافة tn-box-active. )، فاستخدم التالي: .tn-box.tn-box-active { display: block; animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .tn-box.tn-box-active .tn-progress { animation: runProgress 4s linear forwards 0.5s; }أما بالنسبة للحركية (animation) فهي كالتالي: @keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; transform: translateY(0px);} 90% { opacity: 1; transform: translateY(0px);} 99% { opacity: 0; transform: translateY(30px);} 100% { opacity: 0; } } @keyframes runProgress { 0% { width: 0%; background: rgba(255,255,255,0.3); } 100% { width: 96%; background: rgba(255,255,255,1); } }ما ستقوم به الـحركية (animation) هو إظهار الصندوق (عبر رفعه ورفع درجة الشفافية) ثم تكبير عرض شريط التقدم. حددنا عرض شريط التقدم إلى 96% (لأنه يبعد عن يمين الصندوق بـ 2% لذا نريده أن يتوقف قبل 2% من اليسار أيضا). مثال حيSee the Pen ZbzMWQ by Hsoub Academy (@HsoubAcademy) on CodePen. ملاحظة: شيء إضافي وجدت أنه من الجميل إضافته هو إيقاف animation عند تمرير المؤشر على الصندوق. ولكن للأسف، الأمر لم ينجح في chrome بينما نجح في فيرفكس. .tn-box:hover, .tn-box:hover .tn-progress{ animation-play-state: paused; }ترجمة -وبتصرف- للمقال: Timed Notifications with CSS Animations لصاحبه Mary Lou. حقوق الصورة البارزة: Designed by Freepik.

إذا كان لديك شركة ناشئة واسمها x ولم يكن لديك عنوان نطاق x.com فيجدر بك تغيير اسم الشركة. لا يكمن السبب وراء هذا في صعوبة إيجاد موقعك من قبل الناس فحسب، وخاصة بالنسبة للشركات التي تعتمد على تطبيق للهواتف الذكية، إذ لن تكون عدم مطابقة اسم النطاق لاسم الشركة عائقًا كبيرًا حينها في الحصول على مستخدمين. لكن المشكلة تكمن في أن عدم امتلاك عنوان نطاق باسم شركتك x.com هو أحد دلائل ضعفها، إذ ما لم تكن شركتك كبيرة بشكل تطغى فيه سمعتها على كل شيء آخر فسيوحي عنوان النطاق المُختلف بضعف الشركة، في حين يُعتبر امتلاك نطاق خاص بنفس اسم شركتك نقطة قوّة لصالحك حتى لو لم يعبّر الاسم عن طبيعة عمل الشركة. إلا أنّ تغيير اسم الشركة ليس بالأمر الهيّن، فحتّى المؤسسين المحترفين سيبدؤون بإنكار الحاجة إلى ذلك، مستمدّين إنكارهم من زاويتين أساسيتين: هوية الشركة، وضعف الخيال. يقول المؤسسون "يُعبّر X عن هويّتنا، لا يوجد اسم آخر جيّد لشركتنا"، إلا أنني لا أظن بأنّهم على صواب. يُمكننا معالجة النقطة الأولى الخاصة بالهوية عبر العودة إلى الوراء والوقوف خلف المشكلة، تخيّل أن لشركتك اسم آخر، ستلاحظ حينها أنك متعلّق بهذا الاسم كتعلّقك اليوم بالاسم الحالي للشركة، ويا للغرابة، لن ترغب في العودة لاسم شركتك الراهن [1] في الحقيقة، لا يوجد سرّ جوهري عظيم في اسم شركتك يجعلك تتمسّكُ به بهذا الشكل، وغالبًا فإن كل ما تشعر به من تعلّق عائد إلى ارتباط هذا الاسم بك [2]. أما بالنسبة للمصدر الثاني الذي يدفعك لإنكار حاجتك لتغيير الاسم، (أقصد عدم القدرة على إيجاد أسماء أفضل) فيمكنك التغلب عليه عبر الاعتراف بأنك اخترت اسمًا سيئًا منذ البداية. إذ أنّ إيجاد/اختراع الأسماء مهارة مُنفصلة تمامًا عن مهارات المؤسّس الناجح، ومن الممكن أن تكون مؤسّسًا عظيمًا للشركات الناشئة لكنّك لا تُجيد اختيار اسمًا لها. بمجرد إقرارك بذلك، ستتوقف عن اعتقاد أن لا اسم آخر يصلح لشركتك، فهناك الكثير من الأسماء المُحتملة وعلى نفس الدرجة من الجودة أو لعلّها أفضل، لكن تقوقعك في دائرة الاسم الحالي لا يمكّنك من رؤيتهم. كيف تجد اسما مناسبا؟ والآن، كيف تجد الاسم المناسب؟ واحدة من الطرق المستخدمة عادةً لحلّ المشكلات التي لا تُجيد التعامل معها: ابحث عن شخص آخر ماهر في ابتكار الأسماء. لكن بالنسبة لأسماء الشركات هناك حلّ آخر ممكن، فأية كلمة أو زوج من الكلمات غير سيئة السمعة ستكون اسمًا جيدًا، وسيكون عدد النطاقات على الإنترنت كبيرًا للغاية لدرجة أنه يمكنك شراء عنوان نطاق بسعر رخيص أو حتى غير محجوز مُسبقًا، لذا أنشئ قائمة بالأسماء وحاول شراء بعض النطاقات الخاصة بها، وهو الأمر الذي فعله Stripe (حيث أوصلته أبحاثه إلى شراء بعض النطاقات الإضافية ومنها prase.com ليعطيه لأصدقائه مؤسسي شركة prase لاحقًا). من الأسباب التي تجعلني أؤمن بأن تسمية الشركات هي مهارة متميزة ومتعامدة مع مهارات أخرى لإنشاء شركة ناشئة هي تجربتي مع ذلك، حيث عملتُ في YC وكنت أمضي الكثير من حصص الإرشاد Office Hours مع الشركات الناشئة، وساعدت الكثير منهم في الحصول على أسماء، في 80% من الحالات كان بإمكاننا العثور على اسم واحد جيد على الأقل خلال 20 دقيقة. اليوم وعندما أقوم بمساعدة أحدهم على التسمية من خلال حصص الإرشاد هذه أركّز على أسئلة أكثر أهمية، مثل "ما الذي تقدمونه في شركتكم"، وأخبرهم متى عليهم أن يُغيروا الاسم، لكنني ولعلمي المُسبق بحجج الإنكار التي يردّدونها أدرك تمامًا أن قلّة منهم سيصغون إلى نصحي [3]. هناك بالطبع أمثلة عن شركات ناشئة استطاعت شقّ دربها والنجاح دون امتلاك نطاق مطابق لاسمها، وهناك بالتأكيد شركات نجحت رغم ارتكاب العديد من الأخطاء المختلفة،لكنّ الخطأ المتعلّق بالاسم هو على رأس قائمة الأخطاء التي لا تُغتفر، وهو أمر يمكنك معالجته خلال بضعة أيام إذا كان لديك الشجاعة الكافية للاعتراف بوجود المشكلة. في ترتيب شركات YC النّاشئة من حيث قيمتها المالية Vaulation، وجدنا أن 100% من أفضل 20 شركة تمتلك عناوين نطاقات بأسمائها، و94% من أفضل 50 شركة تمتلك ذلك أيضًا. لكن 66% فقط من الشركات في الدفعة الحالية لديها ذلك، مما يوحي بوجود دروس سنستنبطها لاحقابطريقة أو بأخرى. هوامش بالمصادفة، فإن هذه التجربة الفكرية تنطبق على الجنسية والدين أيضًا. الإعجابات التي حصدها اسم شركتك الناشئة أصبح جزءًا من هويتك بشكل غير مباشر، الأمر الذي يجب أن تفكر لأجله في كمية الصفات الوهميّة التي أسبغتها على الاسم -ينطبق هذا على الجنسية والدين أيضًا-. في بعض الأحيان يدرك مؤسسو الشركات أن عدم امتلاك نطاق خاص باسم الشركة مشكلة، لكنهم يوهمون أنفسهم بإمكانية شراء نطاق في وقت لاحق دون وجود أي دليل على ذلك، لا تثق بأن نطاقًا ما للبيع ما لم يُعرض عليك شراءه بسعرٍ معقول. تُرجم وبتصرّف عن مقال Change Your Name لكاتبه Paul Graham (بول جراهام مؤسس حاضنة واي كومبينايتور)

إذا كنتَ ممّن يناضلون بحثًا عن تمويلٍ لفكرةِ شركتك الناشئة؛ أعتقدُ أنّ الوقت قد حان لتعمل على تحقيقها بنفسك، سواء كنتَ تمرّ بتجربتك التأسيسيّة الأولى لشركة ناشئة؛ أو لازلتَ تعمل بدوام كامل أو جزئيّ كمستقل بعد عدّة مشاريع لم تحقّق لك الاكتفاء المادي. هكذا كانت تجربتي الشخصيّة أيضًا، لكنني كنتُ سأقوم بالأمور بشكلٍ مختلف لو امتلكتُ حينها المعلومات التي بحوزتي اليوم. كيف كانت البداية؟بعدَ تخرّجي من الجامعة عام 2009؛ حظيتُ بفرصةٍ عظيمة لأجرّب كلًا من العمل كمطوّر ويب، والغوص عميقًا في إنشاء الشركات الناشئة جنبًا إلى جنب. في الحقيقة؛ لقد استمرّ تنقّلي بين هذين العالمين وعملي فيهما معًا لعامين كاملين. لذا أودّ مشاركتكم بعض تجاربي مع الطرق التي اتّبعتها لأبقى "على قيدَ الحياة" أثناء عملي على إطلاق شركةٍ ناشئة من الصفر. أنهيتُ حياتي الجامعية بأطروحةٍ تعطي انطباعًا شبيهًا بكونها بذرة شركة ناشئة -وهذه قصة أخرى لمقالٍ لاحق-، وكنت جاهزًا تمامًا للخوض في العمق والقيام بما أرغب به: أن أعمل على فكرتي لشركة ناشئة وأشهدَ نجاحها. وهذا ما فعلتُه، لقد جرّبت في مسيرتي العديد من الطرق المختلفة لأحافظ على استمراريّتي في العمل على الشركات الناشئة، وهاكم ما قمت به: الطريقة الأولى: العمل على شركتي النّاشئة كمشروع جانبيأمضيتُ الأشهر الثمانية الأولى عقب تخرّجي بالعمل المتناوب؛ حيث عملتُ ثلاثة أيّام في الأسبوع كمطوّر ويب؛ بينما كنتُ أمضي معظم وقتي في الأيام الأربعة المتبقّية على شركتي الناشئة الأولى والحقيقيّة. وكان هذا النهج مناسبًا لي لفترة محدّدة، إذ بنيتُ شركتي الناشئة وأطلقتُها خلال شهرين أو ثلاثة؛ وكان لهذا سحرٌ حقيقيّ طيلة تلك الفترة. يشكّل العمل "على الهامش" لبناء شركتك الناشئة تحديًا كبيرًا، لكنه ينطوي على عدد من الفوائد يمكنك أن تقرأها في هذا المقال. الطريقة الثانية: العمل وفق الأمواجعقب ثمانية أشهر من العمل "على الهامش"، ومراكمةِ مبلغٍ معيّنٍ من المال، بدأ عملي كمطور ويب بالتضاؤل، ولهذا قرّرت -عوضَ البحث عن عمل آخر- أن أستخدم ما جمعتُه من مال في الفترة الماضية للمعيشة؛ أثناء تفرّغي التامّ للعمل على شركتي الناشئة لأعطيها بذلك دفعة حقيقيّة لتنطلق، وأرى أنّ هذه الطريقة عمليّة للعمل على شركتك الناشئة بشكل ذاتيّ، إذ تعمل لفترة ما في جمع الأموال ونتفرّغ في الفترة التالية لها لتعزيز إنتاجيّة مشروعك؛ من الممكن أن تكرّر هذه النوبات عدّة مرات حتى تحقّق هدفك، لقد شهدتُ شخصيّا مشاريعًا عدّة نُفّذت بهذا الشكل أيضًا. كمجرّب للعمل بطريقة "الأمواج"، لا أنصح بها كاستراتيجية للفترات الطويلة، اقرأ المزيد عن هذا. الطريقة الثالثة: ربحية الكفافأمامك حتى الآن طريقتان يمكنك العمل بهما "الأمواج" أو "على الهامش"، وقد جمعتُهما معا في مشروع "OnePage"، وأتحتُ المنتج بشكل مجانيّ تمامًا، حاولتُ الحصول على تمويل من خلال برامج تمويل الشركات الناشئة؛ وتحدّثتُ مع عدد من المستثمرين، فقد كنتُ أطمحُ لنهج "النمو بشكل كبير وسريع"، لكنّ كلّ ذلك لم يجدِ. إذ لم أمتلك الجاذبية اللازمة في شخصيتي، كذلك لم يكن لديّ سجلّ أعمال جيّد بشكل كافٍ. استنتجتُ أن الطريقة الوحيدة التي ستتيحُ لي العمل بوقت كامل على شركتي الناشئة هي أن أُطلقَ منتجًا يدرّ المال عليّ بشكل مبكّر. وكنتُ مخيّرًا ما بين محاولة الحصول على أموال من مشروع "One Page"، أو تطبيق ما تعلّمته للتو على منتج جديد.ولأنّ الأفكار الجديدة تروقني أكثر قرّرت العمل على مشروع جديد. ركّزت بشكل كامل مع buffer للحصول على ربحيّة الكفاف، شعرتُ أنّ كل شيء سيتغيّر حالما أحقّق دخلًا يؤمّن معيشتي. "ربحية الكفاف" (Ramen Profitability) هو مصطلحٌ يُستخدم عادةً أثناء الحديث عن الشركات الناشئة؛ إذا لم تكن ملمًّا بمعناه حتى الآن عليك أن تفعل، أعتقد أن بول جراهام شرحَه بشكل جيد في هذا المقال، بل وأعتقد أنه هو أوّل من استخدم هذا المُصطلح: حققتُ حدّ "ربحية الكفاف" منذ شهرين؛ ولا يمكنني أن أصف حجم الفارق الذي خَبرتُه بهذا، كنتُ أقلّصُ عدد الأيام التي أعملُ فيها كمطوّر ويب بشكل تدريجيّ أثناء تزايد دخلي من Buffer، لكنّني حاليّا أمضي كل أيامي عليها، ورغم التحدّيات التي تواجهنا الآن في مشروع Buffer، إلا أنه مكان رائع للعمل به. كيف كنتُ لأبدأ لو عاد بي الزمن؟لو كنتُ سأبدأ للتوّ بشركة ناشئة للمرّة الأولى؛ مع المعرفة التي لديّ الآن، سأركّز بشكل كامل لتحقيق "ربحيّة الكفاف"، وسأعملُ "على الهامش" على بناء "أداة" مع خططٍ مدفوعة -وهو أفضل من العمل على فكرة “اجتماعية”-. هذا هو النهج الذي أتّبعه مع Buffer حاليّا، وهو نهج يُعطي ثماره. أنا مؤمن بقدرة كلّ منّا اليوم على تحقيق "ربحيّة الكفاف"؛ لكنّ هذا يعتمد على طول المدة التي نركّز فيها على الهدف، سيكون من الجيّد أن تفكّر أثناء تركيزك للحصول على دخلبمدى تأثير نوعية الفكرة التي تختارُها على سهولة الانطلاق والوصول لربحيّة الكفاف. أعتقد أن البدء بخطواتٍ أولى عمليّة وقابلة للتطبيق سيكون فعّالًا أكثر من الطموح لأفكار المليون دولار منذ البداية، يمكنك أن تكون منتجًا للغاية إذاتجنّبت التفكير بأفكار لتغيير العالم، يصف جاسون كوهين هذا المعنى بإيجاز: هل تحاول الانطلاق بشركتك الناشئة من الصفر؟ هل تعمل بشكل ذاتيّ؟ سأكون مسرورًا لمشاركتكم بالمناهج التي اتبعتموها لشركاتكم الناشئة، أو ما تخططون لفعله مستقبلًا. تُرجم بتصرّف عن مقال Reflecting on ways to bootstrap a startup لكاتبه Joel Gascoigne.

أي عنوان سيقدّم معدّل تحويل أعلى في إعلان على موقع ما: "أدوات لاستعراض الشيفرة البرمجيّة" أم "استعراض الشيفرة البرمجية وأدواتها"؟ الأمر محيّر والاختيار والفصل بينهما لا يبدو سهلًا، ولذلك يتمّ دائمًا التقرير عبر الاختبار. حصل البديل "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.

في الدرس السابق قمنا باستخدام برنامج فوتوشوب لتصميم واجهة موقع لغابة افتراضية باسم "Pinewood Forest". أمّا في هذا الدرس فسوف نقوم بتكويد ذلك التصميم باستخدام لغتي HTML وCSS وتحويله إلى صفحة ويب كاملة. كما سنقوم أيضًا باستخراج الصور الموجودة في التصميم لاستعمالها في الموقع. في حال أنك لم تقرأ الدرس السابق، أنظر إلى الصورة في الأعلى لترى التصميم الذي سوف نقوم بتكويده. يحتوي الموقع على صورة خلفية كبيرة وثابتة لتسمح لمحتوى الموقع بالتمرير(scroll) فوقها، والمحتوى نفسه مجزأ إلى عدة أجزاء، وتم استخدام مجموعة من الصور لجذب انتباه الزائر. استخراج الصور الموجودة في التصميم ستكون الخطوة الأولى قبل البدء بتكويد التصميم هي استخراج الصور من التصميم. بعض أجزاء التصميم يمكن عملها باستخدام CSS فقط ولكن أجزاء أخرى من التصميم سنحتاج فيها إلى الصور. يحتوي الجزء الرئيسي للموقع على صورة خلفية كبيرة، وسوف نحتاج إلى ضغط هذه الصورة لتقليل حجمها الكبير وذلك عن طريق اللجوء إلى خيار Save for web. كما قلنا سابقًا، سيحتوي الموقع على خلفية ثابتة وسوف يظهر المحتوى فوق هذه الصورة، وبالتالي فإن العناصر مثل الشّعار سنحتاج إلى استخراجها بصيغة PNG-24 لأن هذه الصيغة تدعم الشفافية (transparency). ستكون خلفية المحتوى الرئيسي للموقع ذات طابع شفاف أيضًا وبالتالي سوف نحتاج إلى استخراجها بصيغة PNG، وهذه الخلفية سيتم تقسمها إلى ثلاثة أقسام؛ قسم علوي وقسم سفلي وقسم مكرر في المنتصف. المجموعة النهائية للصور سوف تحتوي على صور بصيغة PNG وأخرى بصيغة JPEG. بعض الصور ستكون بحجم صغير، وهذه الصور سيتم تكريرها (باستخدام CSS) لإنشاء خلفيات مزخرفة، أمّا الصور الأخرى فسوف تكون صورًا بديلة عن النصوص لاستخدامها كعناوين. بنية ملف HTML <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Visit Pinewood Forest</title> <link href="styles.css" rel="stylesheet" /> </head> <body> <div id="container"> </div> </body> </html> سيحتوي الملف الرئيسي (index file) على أكواد HTML. يُستخدم <doctype html!> لتعريف المتصفح بإصدار HTML المُستخدم ويعتبر أيضًا من الممارسات الجيدة في عالم تصميم الويب، لذلك احرص على أن يكون موجودًا في كل موقع تقوم بتصميمه. يتبع ذلك وسم <head> ويحتوي هذا الوسم على عنوان الصفحة وعلى رابط لملف CSS. وأخيرًا يوجد وسم <div> وسيحتوي هذا الوسم على بقية عناصر/وسوم الصفحة. <body> <div id="container"> <div id="header"> <p id="logo"> <a href="#" title="Return to the homepage"> <img src="images/pinewood-forest-logo.png" alt="Pinewood Forest logo" /> </a> </p> <ul> <li><a href="#">Visit</a></li> <li><a href="#">Discover</a></li> <li><a href="#">Trails</a></li> <li><a href="#">Maps</a></li> </ul> </div> </div> </body> </html> يبدأ التصميم بوسم div مع إعطائه id بقيمة "header" وسيحتوي هذا الوسم على الشّعار وعلى عناصر القائمة الرئيسية (navigation items)، وسيكون الشعار عبارة عن صورة داخل وسم <img> موضوعة في وسم <a>. تُستخدم title الموجودة في وسم <a> لتعريف المستخدم بالوجهة التي سيصل إليها حال نقره على الرابط، أمّا alt في وسم <img> فإنها تُستخدم لإعطاء المستخدم وصفًا عن الصورة في حالة عدم ظهور الصورة. يُعتبر وسم <ul> هو الوسم الشائع عند عمل القوائم الرئيسية لأنّه يُصوّر لنا وبدقة تلك القائمة على هيئة HTML حتى لو لم يكن هناك تنسيقات CSS. وبالرجوع إلى التصميم يمكنك ملاحظة أن الشعار موجود في الوسط بين قوائم العناصر الرئيسية، ولكننا سنبقي كلا العنصرين (الشعار والقائمة الرئيسية) مفصولين عن بعضهما حتى نحصل على هئية وملف HTML نظيف ومُرتّب، وسنلجأ لاحقًا إلى استخدام CSS لتحريك تلك العناصر حتى نحصل على نتيجة مرضية ومطابقة للتصميم. <div id="content"> <div id="feature"> <div id="feature-content"> <h1>Explore the forest</h1> <p>Find everything you need to explore and discover the mysteries of the forest, from maps and trail guides to must see attractions</p> <p class="btn"><a href="#">Begin your journey</a></p> </div> </div> </div> بعد الترويسة (header) تأتي منطقة المحتوى الرئيسي (main content)، ولجعل هيكل ملف HTML نظيفًا فسوف يتم وضع جميع العناصر في وسم <div> واحد، كما وستظهر منطقة الـfeature في بداية الصفحة وداخل وسم <div> ليتم تموضعها بشكل دقيق ومناسب. أمّا بالنسبة للعنوان الرئيسي في الصفحة (الذي يحتوي على النص "Explore the forest") فسوف يتم وضعه داخل وسم <h1>. لاحظ أيضًا أنه تم إضافة "class="btn إلى العنصر <p> ليمكننا تحويل هذا العنصر إلى زر باستخدام CSS. المستوى الثاني من العناوين سيكون موجودًا داخل وسم <h2>، وسيكون المحتوى الرئيسي منقسمًا إلى عمودين، بحيث يكون العمود الأكبر عبارة عن div مع id بقيمة "main" وبداخل هذا العمود توجد النصوص (عناصر <p>). لا تنسى تحويل الروابط إلى عناصر <a> وأي رموز خاصة (characters) إلى ما يقابلها من HTML entities (مثل رمز "&" يتم تحويله إلى "&"). وفي الأسفل من نفس العمود يوجد قسم "upcoming events"، ويمكننا استخدام عناصر <dl> ،<dt> و<dd> (اختصار للكلمات "Definition List"، "Definition Term" و"Definition Description" على التوالي) بحيث تحتوي عناصر dt على تاريخ الحدث وعناصر <dd> على وصف بسيط للحدث. لاحظ أننا استعملنا وسوم <span> داخل عناصر <dt> وذلك لإعطائها تنسيقات مميزة باستخدام CSS. <div id="side"> <div class="aside"> <a href="#"><img src="images/tracks-and-trails.jpg" alt="Tracks and Trails" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/mountain-biking.jpg" alt="Mountain Biking" /></a> <p>Pinewood Forest is home to some of the most demanding XC and Freeride Mountain Biking routes<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/christmas-events.jpg" alt="Christmas Events" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> </div> </div> <div id="footer"> <p id="back-to-top"><a href="#">Back to top</a></p> </div> </div> بالنسبة للعمود الأصغر فسوف يكون موجودًا داخل عنصر div آخر مع id بقيمة "side". تتكون القائمة الجانبية (sidebar) من ثلاثة أقسام رئيسية وكل قسم يحتوي عنوان على شكل صورة وعلى وصف بسيط لكل قسم، ولأن كل صورة تحتوي على نص بداخلها فقد قمنا باستخدام alt لكل صورة حتى نحافظ على ما يسمى بالـaccessibility. وفي نهائية الصفحة قمنا بإغلاق وسم <div> الخاص بالمحتوى وتحتها يوجد div خاص بالـfooter وبادخله نص "Back to top" ليأخذنا إلى أعلى الصفحة عند الضغط عليه. انتهينا إلى الآن من هيكلة ملف HTML ويمكنك إلقاء نظرة إلى الصورة في الأعلى لترى كيف يجب أن يظهر بدون CSS. لاحظ أنه يمكن قراءة الملف حتى بدون تنسيق الملف باستخدام CSS. تنسيق الصفحة باستخدام CSS body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { font: 14px/26px Georgia, Serif; color: #444a54; background: #2d3237 url(images/bg-photo.jpg) center top no-repeat fixed; } #container { width: 960px; margin: 50px auto; } لنبدأ الآن بتنسيق الموقع باستخدام CSS. يُستخدم السطر الأول من أجل إزالة أي تنسيقات افتراضية للمتصفحات (يسمى هذا "CSS reset")، وبعد ذلك يوجد داخل المحدد body الخصائص العامة للخطوط في الموقع وصورة خلفية، ولأننا نريد هذه الصورة أن تكون ثابتة لا تتحرك مع باقي الصفحة عند التمرير(scrolling) فقد قمنا بإعطائها القيم "fixed" ،"top" و"center". وقد قمنا بإضافة لون أزرق (2d3237) حتى تظهر الخلفية بشكل أفضل لمن لا يمكنه رؤية الصورة لسبب أو لآخر وكذلك لمن يمتلك شاشات بدقة وأبعاد ضخمة. أمّا بالنسبة للحاوي الرئيسي (main container) فقد تم إعطاؤه عرض ثابت بقيمة 960px وتم توسيطه باستخدام الطريقة الشائعة margin: 0 auto. header { background: url(images/content-top.jpg) center bottom no-repeat; overflow: hidden; } header p#logo { position: relative; width: 295px; margin: 0 auto -74px auto; } header ul { width: 916px; margin: 0 auto 110px auto; overflow: hidden; list-style: none; } header li { float: left; } header li:nth-child(1) { margin: 0 70px 0 0; } header li:nth-child(2) { margin: 0 325px 0 0; } header li:nth-child(3), header li:nth-child(4) { margin: 0 0 0 70px; } header li a { font-size: 16px; letter-spacing: 9px; color: #4e5761; text-decoration: none; } header li a:hover { color: #7c8896; } يمكنك ملاحظة أنه تم إضافة صورة كخلفية للقسم العلوي من جزء المحتوى إلى الأسفل من الترويسة. ولموضعة الشعار وعناصر القائمة الرئيسية كما هو موجود في التصميم، فقد استخدمنا الخاصية margin بقيم سالبة. ولأن عناصر القائمة موجودة في كلا الجانبين من الشعار فقد تم استخدام nth-child لتحديد كل عنصر من العناصر الأربعة وإعطائه قيمة margin مناسبة، وعن طريق استخدام letter-spacing استطعنا تنفيذ التباعد بين الحروف(tracking) الموجود في التصميم. content { padding: 0 52px; overflow: hidden; background: url(images/content-repeat.png) center top repeat-y; } content #feature { width: 916px; height: 420px; position: relative; margin: 0 0 30px -30px; background: url(images/feature-bg.jpg); } content #feature #feature-content { position: relative; width: 384px; top: 92px; left: 460px; } content #feature #feature-content h1 { widht: 384px; height: 91px; margin: 0 0 5px 0; background: url(images/explore-the-forest.png); text-indent: -9999px; } content #feature #feature-content p { color: #fff; margin: 0 0 15px 8px; } content #feature #feature-content p.btn a { display: block; widows: 163px; height: 39px; background: url(images/begin-your-journey.png); text-indent: -9999px; } content #feature #feature-content p.btn a:hover { margin: -1px 0 0 0; } بما أنّ ارتفاع div الخاص بالمحتوى سيختلف من صفحة لأخرى، فقد قمنا باستخدام صورة ليتم تكريرها حتى نسمح لجزء المحتوى أن يتمدد بدون قيود، واستخدمنا padding على اليمين واليسار حتى نُبعد محتوى الصفحة عن الحواف. ولأنّ منطقة المحتوى ستحتوي على عمودين وكل منهما يحتوي على الخاصية float، فسوف نحتاج إلى استخدام overflow: hidden حتى يظهر كل شيء بشكل جيد. إعطاء قسم الـfeature الخاصية position: relative سيسمح للمحتوى بالتحرك في مكانه، كما أنّ القيمة السالبة للخاصية margin ستعوّض عن قيمة padding التي تم إعطاؤها لـdiv المحتوى وذلك لنسمح لذلك القسم بالتمدد إلى أقصى أطراف الصفحة. كما أنه تمّ استخدام صورة في وسم h1، ولكن تم تنسيق الفقرة باستخدام خصائص font في CSS. وبالنسبة للزر، فقد تم استخدام صورة وإعطائه بعض التنسيقات حتى يظهر بشكل جيد. content #main { width: 536px; float: left; margin: 0 20px 0 0; } content h2 { font-size: 20px; font-weight: normal; margin: 0 0 20px 0; } content p { margin: 0 0 20px 0; } content a { color: #3f6489; } content a:hover { color: #0d3965; } content dl { } content dt { float: left; width: 40px; height: 50px; margin: 0 15px 0 0; background: #a1a3a5 url(images/date-bg.png); font-size: 30px; color: #fff; text-align: center; } content dt span { display: block; font-size: 12px; font-weight: bold; text-transform: uppercase; } content dd { float: left; width: 480px; } content dd h3 { float: left; font-size: 20px; font-weight: normal; } content dd span { float: left; margin: 4px 0 0 10px; visibility: hidden; } content dd p { clear: left; } content dd:hover span { visibility: visible; } سيكون الـdiv الرئيسي هو الأعرض بين العمودين؛ بعرض 536px. وسيكون العرض لكل من main وside بالإضافة إلى الـmargin بينهما هو العرض الخاص بـdiv الأب منقوصًا منه قيمة padding اليسار واليمين. تم تحويل عناصر dt إلى أيقونة التاريخ عن طريق إعطائها عرض وطول ولون خلفية رمادي. وباستخدام تنسيقات font مناسبة أمكننا جعل نص التاريخ كبيرًا وبلون أبيض، كما أنّه تم جعل الخط الخاص بالعنصر span أصغر بقليل حتى يظهر الشهر أسفل رقم اليوم بشكل جميل. وحتى تظهر عناصر dt وdd بجانب بعضها فقد تم إعطاؤها الخاصية float: left. لاحظ أننا استخدمنا visibility: hidden على العنصر span وذلك حتى نخفيه عن أنظار الزائر إلى أن يضع مؤشر الفأرة فوق عنصر dd لنقوم عندها بإظهار رابط "View more info". content #side { width: 300px; float: left; } content .aside { padding: 17px 0 0 17px; margin: 0 0 30px 0; background: url(images/aside-bg.png) center top no-repeat; } content .aside img { margin: 0 0 15px 0; } footer { padding: 70px 22px; background: url(images/content-bottom.png) center top no-repeat; } footer p#back-to-top { float: right; font-size: 11px; } footer p#back-to-top a { color: #fff; text-decoration: none; } footer p#back-to-top a:hover { color: #d7d9d8; } كل عنصر aside. تم إعطاؤه خلفية مزخرفة، وبالنسبة للخطوط فإنها ستأخد التنسيقات الخاصة بـ div المحتوى بسبب ما يسمى بالتوريث (inheritance). أمّا بالنسبة لرابط "back to top" فسوف نضطر إلى إعطائه تنسيقات جديدة لأنه موجود خارج div المحتوى، ولأنّ هذا الرابط موجود ضمن خلفية داكنة وخارج المحتوى الرئيسي فإننا سنحتاج لتعديل الألوان وجعلها مختلفة عن البقية الموجودة في باقي الصفحة. بقي شيء واحد قبل أن ننتهي من هذا الدرس وهو أنّه يجب عليك أن تعرف أن خاصية nth-child غير مدعومة في بعض إصدارات متصفح Internet Explorer، لذلك إذا أردت أن تدعم تلك المتصفحات فيجب عليك استخدام jQuery: $(document).ready(fucntion() { $("#header ul li:nth-child(1)").css("margin-right", "70px"); $("#header ul li:nth-child(2)").css("margin-right", "325px"); $("#header ul li:nth-child(3)").css("margin-left", "70px"); $("#header ul li:nth-child(4)").css("margin-left", "70px"); }); إلى هنا نكون قد أنهينا درسنا وحصلنا على صفحة كاملة وجاهزة. يمكنك أيضًا تصفح الموقع بشكله النهائي إذا أحببت ذلك. أو تصفح الملفات المصدرية. ترجمة -وبتصرف- للمقال: Design a Textured Outdoors Website in Photoshop لصاحبه: Iggy.

من أهم مميزات ‏CSS3‎‏ أنها تقلل من استخدام الصور في تصاميم الويب، وتسمح لك بإنشاء أشكال مختلفة ‏بواسطتها. فالأشكال الشائعة التي تراها عادة في ‏فوتوشوب أو ‏Illustrator‏ يمكنك عملها الآن بكل ‏سهولة مستخدمًا ‏CSS3‎‏. تقوم الخصائص الجديدة مثل ‏transform‏ و ‏border-radius‏ بإضافة تشكيلات ‏جديدة إلى الأشكال الأساسية بدلاً من رسمها وتصميمها على برامج الرسم والتصميم. ‏ في درسنا لهذا اليوم، دعنا ننشئ قائمة بالأشكال الأكثر شيوعًا، وذلك باستخدام ‏CSS3‎‏.‏ يمكنك تحميل الملفات المصدرية لهذا الدرس من هنا. الدائرة HTML‎لإنشاء دائرة في الـCSS، نحتاج أولاً إلى ‏div‏ واسمٍ للشكل ‏id‏. وهنا ستأخذ الدائرة هذا الإسم: ‎<div id="circle"></div>‎CSS‎ضع مقاسات العرض والارتفاع ‏width‏ و ‏height‏ بالـ‏CSS‏ واجعل قيمة ‏border-radius‏ ‏نصف قيمة العرض والارتفاع: ‏#‏circle‏ } ‏ ‏ width: 120px‏;‏ height: 120px;‏ ‏ ‏background: #7fee1d;‏ ‏ -moz-border-radius: 60px‏;‏ webkit-border-radius: 60px‏;‏‏ border-radius: 60px‏;‏‏ }المربع‏ HTML‎نحتاج إلى ‏div‏ مع وضع اسمٍ له، لإنشاء شكل مربع وربطه بالاسم: ‎<div id="square"></div>‎CSS‎اضبط مقاسات العرض والارتفاع بنفس القيمة، حتى يبدو واضحًا: #‏square‏ } ‏ ‏ width: 120px‏;‏‏ height: 120px‏;‏ background: #f447ff‏;‏‏ }المستطيل HTMLأنشئ ‏div‏ وضع اسمًا له، ويفضل أن يكون الاسم نفس نوع الشكل: ‎<div id="rectangle"></div>‎‎CSS‎نضبط العرض والارتفاع تمامًا مثل المربع؛ ولكن بزيادة قيمة العرض أكثر من الارتفاع: ‏#‏rectangle‏ } ‏ ‏ width: 220px‏;‏ height: 120px‏;‏ background: #4da1f7‎‏;‏‏ }الشكل البيضاوي HTMLلنقم بإنشاء ‏div‏ ونعطه اسم ‏oval‏: ‎<div id="oval"></div>‎CSS‎يشابه الشكلُ البيضاوي الدائرةَ إلى حد كبير؛ ومع ذلك، فإن الشكل البيضاوي هو مستطيل زواياه مستديرة بقيمة ‏نصف الارتفاع: #‏oval‏ } ‏ ‏ width: 200px‏;‏‏ height: 100px‏; background: #e9337c‏;-‏ webkit-border-radius: 100px / 50px‏;‏-‏ moz-border-radius: 100px / 50px‏;‏ border-radius: 100px / 50px‏;‏‏ } المثلث HTMLيحتاج المثلث إلى ‏div‏ باسم ‏triangle‏:‏ ‎<div id="triangle"></div>‎CSS‎لإنشاء مثلث بواسطة الـ‏CSS‏، نقوم بالتعديل في خاصية ‏border‏. سنقوم بتعديل عرض الـ‏border‏ ‏حتى يعطينا نتائج مغايرة في قياس الزاويا: #‏triangle‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ border-bottom: 140px solid #fcf921‎‏;‏‏‏ border-left: 70px solid transparent‏;‏‏ border-right: 70px solid transparent‏;‏‏ }المثلث المقلوب HTMLقُم بإنشاء ‏div‏ وأعطه اسمًا‏: ‎<div id="triangle_down"></div>‎CSS‎نحتاج إلى تعديل خاصية الحدّ السفليّ، لينتُج لدينا مثلث معكوس: #‏triangle_down‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ border-top: 140px solid #20a3bf‏;‏‏ border-left: 70px solid transparent‏;‏ border-right: 70px solid transparent‏; }مثلث متجه إلى اليسار HTMLيتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل وليكن ‏triangle_left‏‏: ‎<div id="triangle_left"></div>‎CSSنقوم بالتعديل في خاصية الحدّ الأيمن، حتى نحصلَ على مُثلث مُتَّجه لليسار: #‏triangle_left‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏ border-top: 70px solid transparent‎‏;‏ border-right: 140px solid #6bbf20‎;‏ ‏ ‏border-bottom: 70px solid transparent‏;‏ }مثلث متجه لليمين HTMLلنقم بإنشاء ‏div‏ ونعطه اسم ‏triangle_right‏: ‎<div id="triangle_right"></div>‎ CSSبعد ذلك نقوم بالتعديل على خاصية الحدّ الأيسر، ليصبح عندنا مثلثًا متجهًا إلى اليمين: #‏triangle_right‏ } ‏width: 0‎‏;‏‏ height: 0‎‏;‏ border-top: 70px solid transparent‏;‏ border-left: 140px solid #ff5a00‎‏;‏ border-bottom: 70px solid transparent‏;‏ }الشكل المعين (الماسة)‏ HTMLيحتاج المُعين إلى ‏div‏ باسم ‏diamond‏: ‎<div id="diamond"></div>‎CSS‎يُمكن عرض المُعيّن بعدة طرق، وذلك باستخدام خاصية ‏transform‏ مع ‏rotate‏. بهذا يصبح لديك مُثلثان ‏متقابلان ومتلاصقان ببعضهما: #‏diamond‏ } ‏ ‏ width: 120px‏;‏ height: 120px‏; background: #1eff00‎‏;‏ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); ‏ webkit-transform-origin: 0 100%‎‏;‏ moz-transform-origin: 0 100%‎‏;‏ -ms-transform-origin: 0 100%‎‏;‏‏ -o-transform-origin: 0 100%‎‏;‏ transform-origin: 0 100%‎‏;‏ margin: 60px 0 10px 310px‏;‏ }شبه المنحرف HTMLيتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏trapezium‏‏: ‎<div id="trapezium"></div>‎CSS‎نقوم الآن بصناعة الشكل المطلوب، حيث نجعل الحدَّ الأيمن والأيسر متساويين مع الاحتفاظ بالحدّ السفليّ مُسَطّحًا: #‏trapezium‏ } ‏ ‏ height: 0‎;‏ ‏ ‏width: 120px‏;‏‏ border-bottom: 120px solid #ec3504‎‏;‏‏ border-left: 60px solid transparent‏;‏ border-right: 60px solid transparent‏;‏ }متوازي الأضلاع HTML‎قُم بإنشاء ‏div‏ وأعطه اسم ‏parallelogram‏‏: ‎<div id="parallelogram"></div>‎CSS‎ثم قم بضبط قيمة الانحراف ‏skew‏ لخاصية ‏transform‏ لحرفه بزاوية 30 درجة: #‏parallelogram‏ } ‏ ‏ width: 160px‏;‏ height: 100px‏;‏ background: #8734f7‎‏;‏ -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg); }النجمة HTML‎يلزمنا ‏div‏ لإنشاء النجمة مع اسمٍ له وليكن ‏star‏‏: ‎<div id="star"></div>‎CSS‎يتطلب إنشاء النجمة بالـ‏CSS‏ تعديلات عجيبة في خصائص الحدود مع استعمال قيمة ‏rotate‏ لخاصية ‏‏‏transform‏، لاحظ ذلك في الكود‏: #‏star‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏ margin: 50px 0‎‏;‏ color: #fc2e5a‏;‏ position: relative‏;‏‏ display: block‏;‏ border-right: 100px solid transparent‏;‏ border-bottom: 70px solid #fc2e5a‏;‏ border-left: 100px solid transparent‏;‏ -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); ‏ } ‏#‏star:before‏ { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); ‏} #‏star:after‏ { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); ‏ }النجمة السداسية HTMLتتطلب النجمة السداسية وجود ‏div‏ مع اسمٍ للشكل، ولنطلق عليه اسم ‏parallelogram‏‏: ‎<div id="parallelogram"></div>‎CSSبخلاف النجمة السابقة، فإننا سنقوم بتعديل خصائص الحدود. سننشئ مجموعة من الأشكال ومن ثم نُلصقُها ببعضها ‏البعض لنحصل على الشكل المطلوب: #‏star_six_points‏} ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ display: block;‏ ‏ ‏position: absolute‏;‏‏ border-left: 50px solid transparent‏;‏‏ border-right: 50px solid transparent‏;‏ border-bottom: 100px solid #de34f7‎‏;‏‏ margin: 10px auto‏;‏ } ‏#‏star_six_points:after‏ } ‏ ‏ content: '';‏ ‏ ‏width: 0‎‏;‏ height: 0‎‏;‏ position: absolute‏;‏ border-left: 50px solid transparent‏;‏‏ border-right: 50px solid transparent‏;‏‏ border-top: 100px solid #de34f7‎‏;‏‏ margin: 30px 0 0 -50px‎‏;‏‏ }‏ المضلع الخماسي HTML‎يتطلب المُضلعُ الخماسي وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pentagon‏‏: ‎<div id="pentagon"></div>‎CSS‎نحتاج إلى عنصرين لإنشاء المضلع الخماسي. أول عنصر نقوم بإنشائه هو شكل شبه المنحرف والعنصر الثاني هو ‏المثلث حيث سيكون أعلى الشكل الأول: #‏pentagon‏ } ‏ ‏ width: 54px‏;‏ position: relative‏;‏ border-width: 50px 18px 0‎‏;‏‏ border-style: solid‏;‏ border-color: #277bab transparent‏;‏ } ‏#‏pentagon:before‏ } ‏ ‏ content: '';‏ ‏ ‏height: 0‎‏;‏‏ width: 0‎‏;‏‏ position: absolute‏;‏‏ top: -85px‎‏;‏ left: -18px‎‏;‏‏ border-width: 0 45px 35px‏;‏ border-style: solid‏;‏‏ border-color: transparent transparent #277bab‏;‏‏ }المضلع السداسي HTML‎ يلزمنا ‏div‏ لإنشاء المُضلع السداسي مع اسم له وليكن ‏hexagon‏‏: ‎<div id="hexagon"></div>‎ CSS‎هناك عدة طرق لإنشاء المُضلع السداسي. إحدى هذه الطرق مطابقة بشكل كبير لطريقة إنشاء المُضلع الخماسي. حيث ‏نقوم بإنشاء مستطيل في البداية ومن ثم نضيف أعلاه مُثلثين: #‏hexagon‏ } ‏ ‏ width: 100px‏;‏‏ height: 55px‏;‏ background: #fc5e5e‏;‏‏ position: relative‏;‏‏ margin: 10px auto‎‏;‏‏ } ‏#‏hexagon:before‏ } ‏ ‏ content: '';‏ ‏ ‏width: 0‎‏;‏‏ height: 0‎‏;‏ position: absolute‏;‏ top: -25px‎‏;‏ left: 0‎‏;‏‏ border-left: 50px solid transparent‏;‏ border-right: 50px solid transparent‏;‏‏ border-bottom: 25px solid #fc5e5e‏;‏‏ } ‏#‏hexagon:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏ position: absolute‏;‏‏ bottom: -25px‎‏;‏ left: 0‎‏;‏‏ border-left: 50px solid transparent‏; border-right: 50px solid transparent‏;‏‏ border-top: 25px solid #fc5e5e‏;‏‏ }المضلع الثماني HTML قُم بإنشاء ‏div‏ وأعطه اسم ‏octagon‏‏: ‎<div id="octagon"></div>‎CSS‎يُمكن إنشاء هذا الشكل بطرق مُشابهة للشكل السابق. حيث نقوم بإنشاء شكلين شبه منحرفين ومن ثم نضع مُثلثين على ‏كل جانب منهما. على الرغم من وجود بعض الطرق الأخرى لعمل ذلك؛ إلا أن هذه هي أفضل طريقة لذلك: #‏octagon‏ } ‏ ‏ width: 100px‏;‏ height: 100px‏;‏‏ background: #ac60ec‏;‏‏ position: relative‏;‏‏ } ‏#‏octagon:before‏ } ‏ ‏ content: '';‏ ‏ ‏width: 42px‏;‏‏ height: 0‎‏;‏ position: absolute‏;‏ top: 0‎‏;‏‏ left: 0‎‏;‏ border-bottom: 29px solid #ac60ec‏; border-left: 29px solid #f4f4f4‎‏;‏‏ border-right: 29px solid #f4f4f4‎‏;‏‏ } ‏ #octagon:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 42px‏;‏ height: 0‎‏;‏ position: absolute‏;‏ bottom: 0‎‏;‏‏ left: 0‎‏;‏ border-top: 29px solid #ac60ec‏;‏ border-left: 29px solid #f4f4f4‎‏;‏‏ border-right: 29px solid #f4f4f4‎‏;‏‏ }شكل القلب HTML يتطلب شكل القلب وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏heart‏‏: ‎<div id="heart"></div> ‎CSS‎يُمكن أن يكون إنشاءُ شكل القلب صعبًا بعض الشيء؛ ولكن نستطيع القيام بذلك عن طريق عمل استدارة للعناصر من ‏زوايا مختلفة وتغيير قيمة خاصية ‏transform-origin‏ حتى نتمكن من تغيير موضع العنصر المُحَدَّد: ‏#‏heart‏ } ‏ ‏ position: relative‏;‏ ‏ } ‏#heart:before, #heart:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 70px‏;‏‏ height: 115px‏;‏ position: absolute‏;‏ background: red‏;‏ left: 70px‏;‏‏ top: 0‎‏;‏ -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; ‏{‏ #‏heart:after‏ { ‏ left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; ‏ }البيضة HTML يلزمنا ‏div‏ لإنشاء شكل البيضة مع اسمٍ له وليكن ‏egg‏‏: ‎<div id="egg"></div>‎CSS‎إنَّ شكل البيضة مطابق إلى حدٍّ ما للشكل البيضاوي؛ إلا أن ارتفاعها أكبر بقليل من عرضها. نقوم بضبط خاصية ‏الزوايا المستديرة بشكل دقيق حتى نحصل على مرادنا بالضبط: #‏egg‏ } ‏ ‏ width: 136px‏;‏ height: 190px‏;‏ background: #ffc000‎‏;‏‏ display: block‏;‏‏ -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px‏;‏‏ border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%‎‏;‏‏ } ‏شكل اللانهائية HTML قُم بإنشاء ‏div‏ وأعطه اسم ‏infinity‏‏: ‎<div id="infinity"></div>‎CSS‎يمكن الحصول على شكل اللانهائية بالضبط الدقيق لخصائص الحدود وزاويا الدائرة كما بالشكل السابق: #‏infinity‏ } ‏ ‏ width: 220px‏;‏ height: 100px‏;‏ position: relative‏;‏‏ } ‏#‏infinity:before, #infinity:after‏ } ‏ ‏ content: '';‏ ‏ ‏ width: 60px‏;‏ height: 60px‏;‏‏ position: absolute‏;‏‏ top: 0‎‏;‏ left: 0‎‏;‏ border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } ‏#‏infinity:after‏ { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); ‏}بالون التعليقات HTML قُم بإنشاء ‏div‏ وأعطه اسم ‏comment_bubble‏‏: ‎<div id="comment_bubble"></div>‎CSS‎نقوم بصناعة هذا الشكل بواسطة إنشاء مستطيل ذي زوايا مستديرة، ثم ننشيء مُثلثًا ونضعه على الجانب الأيسر كما ‏بالصورة: #‏comment_bubble‏ } ‏ ‏ width: 140px‏;‏ height: 100px‏;‏ background: #088cb7‎‏;‏ position: relative‏;‏ -moz-border-radius: 12px; -webkit-border-radius: 12px; ‏ ‏border-radius: 12px‏;‏ } ‏#‏comment_bubble:before‏ } ‏ ‏ content: '';‏ ‏ ‏width: 0‎‏;‏ height: 0‎‏;‏ right: 100%‎‏;‏‏ top: 38px‏;‏‏ position: absolute‏;‏‏ border-top: 13px solid transparent‏;‏‏ border-right: 26px solid #088cb7‎‏;‏‏ border-bottom: 13px solid transparent‏;‏ }شكل باكمان (لعبة آكلة الجبنة)‏ HTMLيتطلب شكل الباكمان وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pacman‏‏: ‎<div id="pacman"></div>‎CSS‎إنشاء شكل الباكمان غير صعب، فكل ما يحتاجه هو نفس خطوات إنشاء الدائرة مع تعديل بسيط في الحدود وخاصية ‏‏‏radius‏ لصنع فتحة على الجانب الأيسر من الدائرة‏: #‏pacman‏ } ‏ ‏ width: 0‎‏;‏‏ height: 0‎‏;‏‏ border-right: 70px solid transparent‏;‏ border-top: 70px solid #ffde00‎‏;‏‏ border-left: 70px solid #ffde00‎‏;‏‏ border-bottom: 70px solid #ffde00‎‏;‏ border-top-left-radius: 70px‏;‏‏ border-top-right-radius: 70px‏;‏‏ border-bottom-left-radius: 70px‏;‏ border-bottom-right-radius: 70px‏;‏‏ }في الختامتوجد هناك العديد من الميزات في استخدام الأشكال المصنوعة بالـ‏CSS‏، فهي أفضل بكثير من وضع صور ‏جاهزة على موقعك. فأنت تستطيع استخدامها الآن كجزء من تصاميم المواقع، على الرغم من أنها قد لا تعمل على ‏بعض المتصفحات مثل إنترنت إكسبلورر بإصداراته القديمة. ‏ الآن وقد انتهيت من درس اليوم، أتمنى أن تكون قد استمتعت فيه، وأنا على استعداد لتقبل أي تعليقات أو تساؤلات أو ‏اقتراحات في هذا المجال.‏ ترجمة وبتصرف للمقال: How to Create Different Shapes in CSS. حقوق الصورة البارزة: Designed by Freepik.

هل أنت مُستعد للقيام بشيءٍ جديد كليًا وثوريّ في مجال التسويق بواسطة الشبكات الاجتماعية؟ تُعتبر خدمة دعم العملاء في الواقع فرصةً نادرةً للتواصل مع الزبائن بأسلوبٍ عاطفي، حيث أنّك لن تحصل على هذه الفرصة من أي وسيلة أخرى. وعلى الرغم من أن هناك المزيد من الشركات التي تتجه نحو الاستفادة من ذلك؛ إلا أنه لا يزال هناك فجوةٌ كبيرة بين ما يريده الزبائن من خدمة دعم العملاء عبر الشبكات الاجتماعية وبين ما هو حاصلٌ بالفعل، وحول ردم هذه الفجوة سنتحدّث اليوم. إن تجاوز التوقعات وتحقيق الأفضل قد لا يكون أمرًا صعبًا بل لعلّه أسهل مما تظنّ، فالتعامل مع العملاء يُشبه التعامل مع الناس في حياتك الطبيعية، حيث يمكنك عن طريق الاهتمام الفعلي بمشاكلهم وحلّها تحقيقَ نجاحٍ باهر. يُناقش هذا الدليل جميع التفاصيل المُتعلّقة باستخدام الشبكات الاجتماعية في خدمة دعم العملاء، بدءًا من أهمية الموضوع وانتهاء بالحديث عن التعابير الصحيحة والأدوات المناسبة لقياس النتائج. ما أهمية تقديم خدمة العملاء على الشبكات الاجتماعيةلنبدأ مع الجانب السّيّئ؛ فحتّى لو كنتَ تعتقد بأنك تُقدّم خدمة عملاء مُذهلة على الشبكات الاجتماعية فإن هناك احتمالًا كبيرًا بأنك لا تقدّم خدمة مُذهلة كما تتوقّع! إليك هذه الأرقام التي جمعتها HelpScout: هذا ببساطة يعني أنه وبينما يرغب الزبائن ويتوقعون الحصول على خدمة عملاء عظيمة عن طريق الشبكات الاجتماعية، فإنّ معظم العلامات التجارية تفشل في الوصول إلى مستوى توقعاتهم هذه. على الجانب الآخر فإن الجانب المُشرق يُنبئ بوجود فرصة هائلة لك للتميّز وتقديم ما يُبهر العملاء (وهي فرصة كبيرة أيضًا لمنافسيك في حال لم تستلم زمام المبادرة). لماذا أقول فرصة "هائلة"؟ دعونا نُلقي نظرة على الأرقام التالية: - 36% فقط من المستهلكين الذين أرسلوا استفساراتهم لخدمة العملاء عبر الشبكات الاجتماعية قالوا بأنّ مشاكلهم قد حُلّت بسرعة وفاعلية. - ينفق العملاء أكثر بنسبة تتراوح من 20% إلى 40% مع منتجات الشركات التي تعتمد الشبكات الاجتماعية لتقديم خدمة دعم العملاء وتستجيب للاستفسارات الواردة منها. - 71% من العملاء الذين يحصلون على خدمة دعم جيّدة من الشبكات الاجتماعية (كأن تكون الاستجابة لهم سريعة ومجديّة) يميلون إلى توصية الآخرين بالتعامل مع ذات الشركة، مقارنةً بـ 19% فقط ممن لم يتلقوا أيّة استجابة. - 43% من المستهلكين قالوا بأن الردّ المباشر على أسئلتهم أكثر أهميةً على الشبكات الاجتماعية.31% منهم يرون أن الشبكات الاجتماعية هي المكان المناسب للتواصل بشكلٍ مباشر مع مندوبي خدمة العملاء أو خبراء المُنتج. - 86% من الزبائن سيُسروّن من ردّ الشركة وسماع شيء يتعلق بشكواهم عبر الشبكات الاجتماعية. أظنّ أنها أرقام مُقنعة بالفعل، أليس كذلك؟ لا سيما عند توضيح الاختلاف في التوقعات بين زبائن خدمة دعم العملاء عبر الشبكات الاجتماعية وغيرهم. يُظهر الجدول التالي دراسة أجرتها American Express توضّح أن التفاعل مع العملاء عبر الشبكات الاجتماعية يثير إعجابهم ورضاهم بشكل أكبر، إلا أنّ ذلك يعني أيضًا مزيدًا من المخاطر في حال فشل ذلك! هناك نقطة أخرى عند الحديث عن الشبكات الاجتماعية وهي الشفافية والانفتاح أمام الرأي العام، فهناك أكثر من مليون شخص يقرؤون تغريدات حول خدمة دعم العملاء أسبوعيًا، وفي الواقع فإن 80% تقريبًا من هذه التغريدات تحمل مضمونًا سلبيًا أو مُحرجًا، إضافةً إلى أن تفاعل واحد سيء قد يمحو تفاعلات عديدة إيجابية. إلا أن القدرة على استثمار زخم الشبكات الاجتماعية لتصبّ في مصلحتك وتدعم اتجاهك غير محدودة في الوقت نفسه. ما الذي يريده عملاء الشبكات الاجتماعيةأدركنا إلى الآن الفرص المُذهلة التي ينطوي عليها تقديم خدمة دعم العملاء عبر الشبكات الاجتماعية؛ لذا دعونا نتعرف على ما الذي يٌريده العملاء وما الذي يتوقّعونه على وسائل التواصل الاجتماعي. 1- استجابة سريعة لمشاكلهملو سألتني عن أكثر ما يتوقّعه عملاء الشبكات الاجتماعية فسيكون جوابي الاستجابة السريعة. حيث أنّ 42% من العملاء وفقًا لدراسة Edison يتوقّعون الحصول على رد عبر الشبكات الاجتماعية في غضون ساعة واحدة، و 32% منهم يعتقدون بأنّ الرد ينبغي أن يكون خلال 30 دقيقة. وإليك ما هو صادم بالفعل: يميل العملاء للتوصية بالعلامة التجارية التي تُقدّم استجابة سريعة لأسئلتهم ولو كانت غير فعّالة أكثر من العلامات التجارية التي تُقدّم حلولًا فعّالة لكنها تستغرق وقتًا أطول. وبعبارة أخرى، فإن السرعة أكثر أهمية من الصحّة لدى عملاء الشبكات الاجتماعية. هذا لا يعني بالطبع بأنّ على مُمثلي الشركة أن يهرعوا لإعطاء إجابات سريعة لا فائدة منها، لكننا فقط أردنا توضيح مدى أهمية السرعة بالنسبة لعملاء الشبكات الاجتماعية. وعلى العموم فإنّ الغالبية العظمى من مُستخدمي فيس بوك وتويتر - 83% و 73% على التوالي - يتوقعون الحصول على رد في غضون 24 ساعة، ورغم ذلك فإن الكثير من العلامات التجارية لا تهتم بتوقعات عملائها. 2- الاهتمام والصدقرغم صعوبة رسم حدود لهذه القيم إلا أنها لا تقلّ أهميةً عن السرعة، لا سيما عندما تعلم بأنّ 70% من تجربة الشراء تعتمد على الكيفية التي يُفكّر بها العميل تجاه الشركة ومعالجتها للمشاكل. من السهل أن يشعر المرء وكأنه قطرة واحدة في بحر وسائل التواصل الاجتماعي؛ لذا سيكون ضروريًا أن تُشعر زبائنك بخلاف ذلك عندما يتعاملون معك، وبأن مشاكلهم مُهمةً لك بالقدر الذي تُهمهم. يمكن لعبارات بسيطة مثل "أنا أصغي إليك" أو "أنا أسف" أن تنقل المحادثة لصالحك لتبدأ في بناء علاقة حقيقية. حتى إذا كنتَ لا تملك حلًا أو جوابًا فقل ذلك بشكل صريح وبأسرع ما يمكن، ثم ابق على تواصل مع العميل حتى تُحلّ المشكلة. نصيحة أخرى قد تساعدك؛ اجعل تعاملك مع الزبائن أكثر شخصيةً وإنسانيّة. على سيبل المثال استخدم الأسماء الأولى للعملاء عند كتابة تعليق أو إرسال ردٍ لهم (ستلاحظ أثر ذلك بوضوح على تويتر). بهذا الأسلوب ستُشعر الناس بأنهم يتحدّثون لشخصٍ حقيقي مثلهم وليس إلى جدار أو إلى شعار الشركة. كما أنه ليس من السّيّئ أن تستخدم أسماء الأشخاص عند الحديث معهم كما هو شائع، حتى على الشبكات الاجتماعيّة. يقول ديل كارنيجي "اسم الشخص بالنسبة له هو أحلى وأهم صوت يسمعه في أي لغة". 3- ساعدهم أينما كانوابشكل عام يتوقّع الناس الحصول على المساعدة من ذات المكان الذي أرسلوا منه سؤالهم. فإذا طلب أحد العملاء مساعدة على تويتر، فإنه سيتوقع الإجابة على شكل تغريدة، وليس كبريد إلكتروني، وإذا أتاك السؤال من منصة فيس بوك، أجب على فيس بوك بدل أن تطلب من العميل الاتصال على رقم الدعم الفني. من أكثر الأمور إثارة لغيظ المستخدم تحويل المسؤولية وإرساله من موظف لآخر -سواء في خدمة العميل المباشرة أو عبر الإنترنت-، فحسب دراسة American Express -وحسب كلّ شخص قابلتُه أيضًا في حياتي-. لذا فإن معرفة الأماكن التي يبحث فيها عملاء الشبكات الاجتماعية عن المساعدة سيكون مفيدًا. حتى وقتٍ قريب كان فيس بوك هو المكان الأكثر استخداما لمن يبحث من العملاء عن دعم فني، إلا أنه ووفقًا لأحدث المعلومات الواردة من SocialBakers فإن موقع تويتر بات المكان الأرجح لنسمع فيه شكاوى العملاء هذه الأيام. علاوةً على ذلك قد تصلك أسئلة العملاء على المدونة الخاصة بك، أو على شبكة اجتماعية أخرى حيث تنشط هناك، أو حتى كمشاركة في أحد المنتديات. بكل الأحوال يتوجّب عليك دراسة أنماطك الخاصة لكل شبكة يستخدمها عملائك والتأكّد من أن خططك في تقديم الدعم تتوافق مع نتائج دراستك. كيف ومتى تستجيب وترصد؟حالما تعرف أين يوجد زبائنك وما الذي يتوقّعونه منك، عليك أن تبدأ بالتفكير في إبهارهم، وإليك كيفية القيام بهذا: 1- راقب علامتك التجاريةالخطوة الأولى لتقديم خدمة عملاء مميزة على الشبكات الاجتماعية هي التأكّد من معرفة كل شيء يدور عن علامتك التجارية. الإنصات لكل ما يقال سيمكّنك من معرفة المشكلات والرد عليها عند الحاجة. إذا كنتَ تسأل عن أداة لرصد الشبكات الاجتماعية -وهناك الكثير بالطبع- إليكم هذا الرابط من Giant Wiki والذي يحتوي عددًا منها، أما إذا كنتَ تبحث عن أدوات مجانية للبدء فإليك بعضها: Google AlertsmentionSocial MentionTalkwalkerTopsyأما فيما يناسب الشركات الكبيرة والتي تحتاج لحلول كاملة لرصد الخدمات الاجتماعية فلدينا أدوات مثل SparkCentral بالإضافة إلى Salesforce Social Hub ،Zendesk ،Freshdesk وغيرها الكثير. 2- اعرف متى عليك أن تتدّخل -ومتى لا يجب عليك ذلك-لكن حتى في حال رصدك الكامل لردود الأفعال فإنّه لا يتوجّب عليك الرد على كل إشارة mention لشركتك -أو حتى كل شكوى-. لا تتصرف إزاء كلّ منها كما لو كانت دعوةً للدخول في محادثة. كشفت دراسة استقصائية لـNetbase عند سؤالهم المستخدمين عن شعورهم حيال الإنصات إلى ما يكتبونه عن العلامات التجارية؛ أن ما يزيد عن نصفهم يحبّذون الحديث عبر الشبكات الاجتماعية دون أن يلفتوا انتباه الشركات، حتى أن البعض منهم يعتبر تتبّع العلامات التجارية لأحاديثهم عنها اختراقًا مباشرًا للخصوصيّة. 3-استغل التعاطف معكمن الممكن أن يكون فهم الفارق بين الحاجة للتدخل أو مجرد الاستماع أمرًا صعبًا، لكنّه يساعدك على تنمية شعورٍ جيّد بالمؤازرة لدى المستخدم. إن قراءة كل رسالة من وجهة نظر العميل ستُساعدك على فهمه وتمنحك القدرة على توضيح مكمن الالتباس ومعرفة المشكلة بدقة واكتشاف اللهجة التي يتوجّب عليك الرد بها. تُشير دراسة Netbase ذاتها إلى أربعة مبادئ أساسيّة لتعرف فيما إذا كانت الخطوة التالية هي إجراء محادثة مع العميل أم لا: لا تكن مُستمعًا فحسب: افهم المشكلة، ما القصد الأساسي الكامن خلف التعليق أو السؤال؟خُذ سياق الرسالة بعين الاعتبار: هل هي محادثة مع صديق أم مجرد فضفضة.تدخّل فقط عندما يمكنك إضافة قيمة حقيقية ما.ركّز على الاستماع البنّاء للأفكار والعلاقات، لا استماع التطفّل.قياس النجاح:إذن كيف يمكنك قياس تطوّرك وقدرتك على إبهار العملاء عبر الشبكات الاجتماعية؟ إليكم بعض المعايير لتبدؤوا معها: 1- كمية الرسائلهذه إشارة واضحة للبدء، كم عدد طلبات العملاء، المواضيع والمشاكل التي تُجيبون عنها خلال كل فترة زمنية؟ على سبيل المثال، أرسلت شركة buffer في يناير 2013 ما يقارب 9771 رسالة إلكترونية، و5700 تغريدة، وأجرت 265 محادثة مباشرة مع العملاء. يساعدك رصد كمية المراسلات المنفّذة على تحديد أمرين: الأول حجم الجهد في هذا العمل، وبالتالي عدد الأشخاص الذين تحتاجهم لتُبقي العملاء على درجة عالية من الرضا، الأمر الثاني هو قدرتك على المقارنة -مع مضي الوقت- فيما إذا كنتَ تجيب على أسئلة أقل أو أكثر. 2- مُعدّل المشكلات المحلولةأن يكون صندوق بريدك خاليًا من الرسائل هو شعورٌ رائعُ بالنسبة للجميع، لكن لا بد أن تعلم أنه شريان الحياة بالنسبة لخدمة العملاء. يمكّنك قياس معدّل المشكلات المحلولة من قسمة عدد المشكلات التي قمت بحلها على العدد الكلي الذي قدّمه عملاؤك خلال فترة محددة. 3- زمن المعالجة-الإجابة عرفنا للتو أن السرعة عنصر مهم وأساسي في خدمة العملاء على الشبكات الاجتماعية، لذا سيكون من المنطقي أن تقيس متوسط الزمن اللازم للإجابة على سؤال أو حلّ مشكلة. 4- رضا العملاءوأخيرًا وليس آخرًا، من المهم أن تكون لديك فكرة عن طبيعة شعور العملاء حيال علامتك التجارية عمومًا. بإمكانك الحصول على هذا الانطباع عبر جمع الإشارات Mentions الخاصة بعلامتك التجارية على الشبكات الاجتماعية في فترة إعداد التقرير، وتحليلها تبعًا للمشاعر الواردة فيها: سلبية، إيجابية، محايدة. بالإضافة لجمعها كل الإشارات؛ تقدّم بعض الأدوات مثل buffer معلومات إضافية مثل القنوات الاجتماعية التي تمّت الإشارة فيها إليك. بالنسبة لرسائل البريد الإلكتروني، تستخدم بعض الشركات أدوات مثل Hively، والتي تُعطي المستخدم خيارًا لتقييم رسالة ما عقب استلامها كردّ من خدمة العملاء في الشركة. الأمر الذي يمكّن الشركات من معرفة درجة رضا الزبائن عن خدمة العملاء والمنتج، بل وحتى معرفة المرات التي أُبهر فيها الزبون. أمثلة ملهمة:Peter Shankman كاتب واستشاري، مُلمٌّ ببعض خفايا خدمة العملاء، أراد إرسال مزحة عبر تويتر لمطعم اللحوم المفضل لديه: وخلافًا لما توقّعه Shankman فقد وجد مندوبًا من مطعم Morton’s ينتظره في المطار مع وجبة كاملة، بعد أن قطع مسافة 23 ميلًا ليلقاه. يعترف Shankman بأن مزحته كانت خارجة عن المألوف، لكنه يقول حول ذلك: خدمة العملاء لا تكون عبر إخبارك لزبائنك كم أنت عظيم ورائع، وإنما بخلق تجارب وقصص يتجلّى فيها ذلك. خاتمةتَعتبر معظم الشركات الشبكات الاجتماعية كوسط للتسويق، لكن العملاء يتوقّعون ما هو أكثر من ذلك، وهم على استعداد لمكافأة العلامات التجارية التي تتمكن من التقدم خطوة للأمام في هذا السياق. إن استخدام الشبكات الاجتماعية كقنوات لخدمة العميل يُمكن أن يمنحك وسائل إضافية لإبهار الزبون، وهو ما يستحق أن تبذل لأجله كل جهدك؛ لأنه يعدل وزنه ذهبًا. تُرجم وبتصرّف عن مقال the complete guide to useing social media for customer service لكاتبه Courtney Seiter. حقوق الصورة البارزة: Designed by Freepik.

واحدة من الأمور المفضّلة لديّ هي مساعدة الأشخاص في أولى خطواتهم على درب الشركات الناشئة، فقد عشت شخصيًّا العديد من التجارب الفاشلة قبل مشروع Buffer، لذا سيكون من الرائع مشاركتكم بعض الدروس المستوحاة من الفشل؛كما أنني أشعر بالمتعة لاسترجاع تحدّيات الأيام الأولى لمشروع Buffer والتي مضى عليها خمسة أعوام حتى اليوم. في الأسبوع الأخير عقدتُ خمس جلسات -كلّ واحدة منها بحدود ثلاثين دقيقة بشكل شخصيّ أو عبر Hangouts- حيث كنت أحاول مساعدة أحدهم، كنتُ مُندهشّا من تكرار نفس التحديّات في ثلاثة من هذه الجلسات الخمس، لذا بدا لي بأن الموضوع جدير بأن يُطرح في مقال. التفكير بالتّعهيد الخارجي لبناء لشركتك الناشئة (outsourcing)من الطبيعي للغاية إذا لم تكن لديك خلفية تقنية وإذا لم تكن قادرًا على البرمجة أن تفكّر بعدم استطاعتك في بناء شركتك الناشئة دون مساعدة؛ وغالبا ما ستراودك فكرة تتمثل بأحد احتمالين: إمّا إيجاد شريك تقنيّ technical co-founder، أو التعهيد ببناء المنتج الفعّال القاعدي MVP لمستقلّ أو شركة خارجية. وحسب تجربتي؛ فإن هذان الخياران هما أقل المناهج جدوى لنجاح شركتك الناشئة بالسرعة المطلوبة. وإليكم الأسباب التي لأجلها أرى أنه لا يجدر بكم الاستعانة بمصادر خارجية لبناء شركاتكم الناشئة: 1. عدم وجود تطابق بين أهدافك وأهداف المستقلّإذا كنتَ تفكّر أن تستعين بمساعدة خارجيّة؛ فيجدر بك أن تعلم أنّ هدف الأشخاص المستقلين أو وكالات التطوير هو خدمة أكبر عدد من العملاء؛ وكسب المزيد من المال في نهاية الأمر، بينما يكون هدفك عندما تبدأ بشركة ناشئة هو الوصول إلى مُنتج مُلائم للسّوق Product-Market Fit وصنع شيء يمكن أن يجذب الناس traction. المشكلة الأبرز مع هذين الهدفين المختلفين؛ هو أنّ الطريق الناجح ليصل المستقل لهدفه مختلفٌ كُليّةً عن الطريق الناجح لمؤسسي الشركات الناشئة ليصلوا إلى منتج قابل للتسويق. واحدة من أبسط المشاكل التي تواجه المستقلين هي تجاوز مشاريع العميل الحدود التي رُسمت له قبل الشّروع في تنفيذها، وبالتالي فإنّ تحديد المستقل أو الوكالة لسعرٍ معيّنٍ لقاء العمل على المشروع؛ يعني أنهم سيحتاجون لاتخاذ عدة خطوات للتأكدّ أن المشروع لن يتجاوز الحجم المخطّط له منذ البداية، لذا سيتّجهون أوّلًا لتحديد الخصائص التي سيتضمنها المشروع بشكل واضح ومبيّن، فالمستقلّ يهدف في النهاية لكسب المال؛ والأداة الرئيسية في هذا هي في التفصيل الدقيق أثناء تحديد الخواص المطلوبة من المشروع منذ البداية؛ وتجنّب التغييرات في المواصفات على طول الطريق بقدر المستطاع. بينما تهدف أنت كمؤسّس لشركة ناشئة الوصول لمنتج مناسب للتسويق، ثمّة لمحات عظيمة في قول لـِ مات مولينويج (مُؤسس Wordpress/automattic) حول الأسباب التي يجدر بالمؤسسين لأجلها إطلاق شركاتهم الناشئة في أبكر مرحلة ممكنة؛ إذ يقول: لذا، فإنّ النهج المثاليّ لبناء شركة ناشئة ناجحة هو إطلاقها بأقصى سرعة ممكنة، لتستفيد بعدها من التغذية الراجعة والمعلومات التي تحصل عليها من آراء المستخدمين وخدمة العملاء في تعديل وتحسين المنتج، الأمر الذي سيكون موضع خلافٍ كليّ مع منهج معظم المستقلين في العمل. ليس هذا فقط؛ فمعظم المستقلين يفضّلون مشاريع من قبيل بناء مواقع ويب للأعمال التجارية الأكثر توقّعًا وثباتًا؛ لذا لن يفهموا غالبًا جوهر الشركات الناشئة. لا يعني هذا أن المستقل أو الوكالة يقومون بالأمور بشكل خاطئ، لكنهم فقط يجتهدون في أكثر أنواع المشاريع شيوعًا بين الزبائن: برمجة موقع ويب. على سبيل المثال موقع ويب لمطعم، لمقهى، أو نادي جولف، نحن نعرف تمامًا ما يجب أن يكون عليه موقع ويب خاص بمطعم؛ إذ يجب أن يحتوي قائمة الطعام الذي سيقدّمه؛ موقع المطعم الجغرافيّ؛ إلخ. أما في عالم الشركات الناشئة فنحن نعيش حالةً من"مشاكل غير معروفة، وحلول غير معروفة" حسب تعبير إيريك رايس، إذ لا ندري إذا ما كانت فكرتنا الجديدة ستنجح أم لا، لذا فإن الأمور بالنسبة لنا تحتاج لمنهج مختلفٍ بشكل كليّ؛ وأحسبُ أن ذلك لا يتفقّ أبدًا مع منهج المستقلين في تنفيذ المشاريع. 2. الصورة الذهنية الخاطئة حول "ما تحتاجه لتحصل على منتج من الصفر"بشكلٍ مرتبط جدّا بالتحديّ الأول المذكور للتوّ، أعتقد أن تفكيرك في الحصول على دعمٍ خارجيّ لتنفيذ فكرة شركتك الناشئة؛ يشير إلى وجود صورة ذهنية خاطئة لديك حول كيفية إنشاء شركة ناشئة بنجاح، إذ يدلّ على وجود انطباع مسبق بأن الجزء الأساسي من نجاح أيّة فكرة هو بناؤها فحسب، التفكير بهذه الطريقة يتجاهل أمرًا مهمّا؛ إذ كثيرًا ماتكون الفكرة بحدّ ذاتها بعيدة عمّا تريد؛ ولن تحصل على النجاح حالما تُطلقها وتطرحها للعموم. لحسن حظّي؛ بدأتُ تعلّم البرمجة منذ الثانية عشرة من عمري. لذا كنت مرتاحًا عندما فكّرت بتأسيس شركة ناشئة لأنّ الجانب البرمجيّ من العمل مغطّى، بعد عدّة سنوات من خوضي هذا المضمار؛ أدركتُ أن معرفتي البرمجية جعلتني أغفل عما يلزمني لإنشاء منتج ناجح، كنتُ أستمر بالبناء فحسب؛ ولكنّي اليوم لا أعتبر أنّ البناء هو الجزء الرئيسي من النجاح في إنشاء شركة ناشئة. ما يلزمُك بدايةً لإنشاء منتجٍ ناجح هو استبعاد كل الأفكار التي لم تتحقَّقْ من رغبة الناس بها؛ إيجاد فكرة لشيء يحتاجُه المستخدمون أو الزبائن بشدّة، ما يجعله منتجًا مناسبًا للتسويق وقابلًا للجذب، الأمر المهم في هذه الخطوة أنك لن تحتاج البرمجة لتحقيقها. ما أؤمن به -اليوم بشكل خاص- هو أنّك قادر على بناء النسخة الأولى الفعّالة تمامًا من شركتك الناشئة دون برمجة على الإطلاق -وإن كانت تلك النسخة أشبه بدليل أو بمجموعة خطوات مُحدّدة مُسبقًا-، يمكنك استخدام أدوات مثل Wufoo ،Unbounce، ووردبريس، نماذج Google، ووسائل أخرى لتنظم الأمور بنفسك مع بعضها، قد تقع في بعض الثغرات أثناء محاولتك تنفيذ الأفكار بشكل يدويّ وذاتيّ، إذ لن تكون الأمور متوازنة تمامًا، لكنّها الطريقة الأساسية للبدء بالنموّ والفهم؛ واختبار ما يصلح من أفكارك وما لا يصلح. ثق تمامًا أنه في وسعك الحصول على منتج أوّلي -غير قريب من المثالية- دون أية برمجة، بل قد يبدأ حصد بعض التفاعل traction إذا تابعت العمل عليه وبدأت بحل الجوانب التي لم يتم التّحقق منها بعد فيه. حالما تبدأ فكرتك بجذب تفاعل الناس؛ ستفتح لك أبوابًا كثيرة لمساعدتك في برمجة منتجك وجعله أجمل. من الأمور التي تُواجه وُترهق المُبرمج المُخضرم التالي: يعرض عليه صاحب فكرة فكرته ويطلب منه بناء المُنتج له. لكن في المقابل المُبرمج الجيّد سيكون مُهتمًا بالانضمام إليك في شركتك النّاشئة إن كُنت قادرًا على بناء مُنتج أولي ومن دون أية برمجة وحصلت على قدر كبير من الاهتمام والنّمو traction. 3. يجب على فريق التأسيس أن يكون ملمًّا بكل شيءأمر آخر يجعلني أؤمن بضرورة الانطلاق دون دعم خارجي لشركتك الناشئة: يجب على فريق المؤسسين أن يتعلّموا القيام بكل المهام في المشروع؛ وإليكم الأسباب: يجعلك هذا تؤمن بقدرتك على تنفيذ أية فكرة وجعلها حقيقة، عليك فقط أن تكتشف ولعَك والطرق المختصرة للقيام به؛ لتحقّق ما تريد بقدراتك الحالية.يسمح لك بالتّحكّم الكامل بكل أجزاء مشروعك، بما يضمن لك إمكانية التعديل والتغيير بشكل مباشر وسريع.سيعرّفك توظيف الآخرين للعمل معك على الفرق بين الإنسان المبدع في عمله وبين آخر ليس جيدًا بما فيه الكفاية.سيصحبك شغفُك بمستوياته المتعدّدة في مختلف مراحل بناء شركتك الناشئة، الأمر الذي يمكن أن يساعدك بإتقان مهارات كثيرة في آن معا أثناء ذلك. من الصعب أن تستأجر الشغف، ومن الصعب على أي شخص آخر أن يستغرق في بناء شيء لا يشعر بوجود حماس كافٍ لدى مؤسّسه.لهذا؛ أنصحك بشدة بالقيام بكلّ شيء مع شُركائك في بدايات المشروع. في البدايات المبكرة؛ قمنا أنا وشريكي بالتطوير، التصميم، إعداد قاعدة البيانات، وإدارة النظام، خدمة العملاء، التسويق، وأشياء أخرى، حتى أنني قمت ببناء النسخة الأولى من تطبيق الأندرويد قبل أن نضمّ مُطوّرًا لفريقنا ليتولّى المهمة. تقريبًا لا يوجد زاوية في مشروع Buffer لم نقم بها بشكلٍ شخصي ويدويّ أنا وشريكي في مرحلة التأسيس، النتيجة هي الحماسة الشديدة التي اكتسبناها بقدرتنا على إدارة الأمور في جميع المجالات، والقدرة على الحديث بعمق واستفاضة حول أي جزء من أجزاء المشروع لأيّ شخص. ما الذي نفعله عوضًا عن التّعهيد الخارجي؟حسب اعتقادي الشخصي؛ فإنّ بناءك لمنتج بنفسك هو الطريق الأمثل؛ بل لعلّه في الحقيقة الطريق الأسرع لإنشاء شركتك الناشئة بنجاح. قد يبدو الأمر معاكسًا للبديهة، فكيف يكون بناء المنتج بنفسك أسرع طريقة للنجاح في حين أنك لا تمتلك أية معرفة برمجية؟ الفكرة أنني لا أتحدث عن البرمجة، بل عن بناء المنتج بأية وسيلة يمكنك البناء بها. قد يعني هذا بناؤه من دون أية برمجة، ومن الممكن أن يعني التقاط المهارات وتعلّمها من هنا وهناك، وهو أمر عظيم في رأيي. السبب الذي يجعلني أعتبر بناء مُنتجك بنفسك هو الطريق الأقصر والأمثل؛ هو أنّه في حال كان ما تمتلكه هو الفكرة فقط؛ فإنّك ستجد عواقب كثيرة للحصول على شريك ذي خلفية تقنية ليشارك في بنائها؛ أو تُعهد بالأمر لمستقل أو وكالة، لكن قيامك بهذ الخطوة وعدم وجود علاقات عمل مع من يبني لك المنتج قد يحرمك من كونك جزءًا من أهم حلقة في إنشائه؛ وهي حلقة البناء-القياس-التعلم، والتي يؤدي تكرارها عادة لوصولك إلى منتجك مُتناسب مع السّوق product/market fit. لأجل ذلك كلّه، فإن النهج الذي أنصح به هو أن تفعل ذلك بمفردك؛ وفي الوقت ذاته أن تبقى على تواصل مع الأفراد الملمّين بالتقنية في محيطك أثناء بناء شركتك الناشئة، سيمرّ مشروعك بنقطة تحوّل واضحة عندما يصبح جذّابا بشكل كافٍ ليجذب شريكًا تقنيًًا إلى المشروع. لذا فإن لم تنجح بعد في جذب شريك تقنيّ -أو شخص ملمّ بالتقنية يرغب بالعمل معك كأول موظّف-؛ أرى أن عليك الاستمرار بالعمل والبحث والاهتمام بتطوير العميلcustomer development، التحقّق من افتراضاتك لإنشاء "شيء ما" يجذبهم إليك ويُحقّق النّمو والانتشار traction. تُرجم بتصرّف للمقال: 3reasons you shouldn't outsource your startup, and what to do instead لصاحبه جويل غاسكوين (مؤسس Buffer).

من السهل أن نكون مبهمين، عموميّي التفكير، وغير محدّدي الوجهة، فالتخصّص أمر شاق بل ومخيف أحيانًا. لقد تعلّمتُ أمورًا كثيرة حول بناء المشاريع في العامين الماضيين، ومن الأمور الرئيسية التي تعلّمتها لإحراز تطوّر حقيقي في العمل؛ أهميّة أن نكون محدّدين. ربّما يجد البعض أن هذا الطرح بعيدٌ عن موضوعنا الأساسي "البريد الإلكتروني"، إلا أنّ مثالًا واحدًا سيجعل الأمر أسهل على الفهم. لماذا نواجه صعوباتٍ في كتابة رسائل محدّدة؟في الواقع، شعرتُ بالإحراج عندما استرجعتُ مؤخّرًا بعض الرسائل الإلكترونية التي كنتُ قد أرسلتُها في بداية دربي مع المشاريع الناشئة؛ إذ كانت بمعظمها طويلةً للغاية، ولا تحتوي دعوةً واضحة تجتذب تفاعل المتلقّي. إلا أنّ للرسائل الإلكترونية أهميةً بالغة تستحقّ نضال مؤسسي المشاريع الجديدة، والذين غالبًا ما يتساءلون عن سبب ندرة تلقّيهم ردودًا على رسائلهم. أدركتُ في ذلك الوقت مدى صعوبة التحديد والوضوح، لنفترض مثلَا أنّك تسعى لمقابلة مستثمر مشهور، إننا غالبًا ما سنترك لهم حرّية تحديد وقت اللقاء، لذا سنستخدم كلمات من قبيل: يبدو هذا معقولًُا، فربّما لن يناسبهم أي موعد ستقترحُه لانشغالهم الشديد. كيف يُفشل الغموض عقد موعد مهمّ؟خلافًا للمتوقّع؛ يُسهم عرض مجموعة كبيرة من الخيارات في إحجام الزبون عن الخدمة؛ لأنه سيحتاج إلى جهدٍ أكبر في اتخاذ القرار؛ وهكذا يقرّر العميل ألا يقرّر، ولا يشتري المنتج. وهذا ما يحدث عادةً عند تلقّي المستثمر رسالة تتضمّن العديد من الخيارات لموعد ما في "الأسبوع القادم"، فبدلًا من بذل الجهد في اتخاذ القرار؛ يقرّر ألا يقرّر، وهكذا لا تتلقّى ردًّا على رسالتك. لقد واجهتُ شخصيًا هذا الأمر عددًا لا يحصى من المرات. كيف تعلّمت أن أكون محدّدًا في رسالتي؟لحسن الحظّ، فقد أجبرتُ على تحسين أسلوب مراسلتي، إذ كنّا في مرحلة البحث عن تمويل؛ لكنّ الرسائل لم تكن أداة فعالة كما يُفترض لها أن تكون في هذه المرحلة. تعلّمتُ بتكرار الأخطاء مرة إثر مرّة، قررت أننا بحاجة لمنهج جديد. استشرتُ من حولي طالبًا منهم النصح، كما ناقشتُ شريكي بمنهجنا الحالي، قرأتُ مقالات عديدة أيضًا تتضمّن لمحات رائعةٍ، كالاقتباس التالي من ايلاد جيل: لذا سيكون من الأفضل أن تقترح أنتَ وقت اللقاء عوضًا عن زيادة أعباء المستثمر. كيف تتلقى المزيد من الردود على رسائلك؟عدّلتُ طريقتي في كتابة الرسائل بعد عدّة محاولات فاشلة في الحصول على لقاء، فبدلًا من: بدأت بكتابة: الاقتباس الأخير هو جزء حقيقي من رسالة إلكترونية أرسلتُها أثناء محاولتنا الحصول على أول جولة استثمار لنا seed round. الأمر المثير للاهتمام أن إرسال موعد محدّد بهذه البساطة لا يعني أنه مناسبٌ للمتلقّي دائمًا، لكنّه سيسهل عليه الردّ على رسالتك، مع بعض التعديلات الطفيفة، حيث نلتقى عادةً ردودًا من قبيل: أو: من هنا، صار بمقدورنا غالبًا تأكيد موعد ما برسالة إلكترونية أو اثنتين، وكانت هذه التقنية حاسمة لنا في تأمين المستثمرين في مرحلة البذور. هل حاولتَ سابقًا أن تكون أكثر تحديدًا في رسائلك الإلكترونية؟ يسرّني سماع تجاربكم حول هذا الأمر. seed round أو seed money: وهي المرحلة التي تَجمع خلالها نقودًا تحتاجها للبدء بالمشروع ومن ثم توليد أرباح، ويأتي استخدام كلمة بذور للإشارة إلى أن المرحلة مبكرة جدَا من عمر المشروع. تُرجم -وبتصرّف- من المقال: A Simple Strategy To Get More Replies To The Emails You Send. لصاحبه: Joel Gascoigne

هل أنت في حيرة من أمرك بخصوص أي الخدمات والتطبيقات التي يجب عليك استخدامها للقيام بأعمالك وإدارة شركتك الناشئة على الوجه الأمثل؟ إذن هذا المقال قد كُتب خصيصًا لك؛ حيث سنُقدّم 12 خدمة أساسية، كما راعينا اختيار الخدمات مفتوحة المصدر، أو تلك التي تسمح ميزانيات الشركات الناشئة تحمل نفقاتها. 1. ‏Trello لإدارة المشاريع تطبيق وموقع Trello هما إحدى الأدوات المجانية التي تساعدك على إدارة مشروعك وتنظيم عملك ومهامك – ليست المهام اليومية فحسب، ولكن الخطط المستقبلية كذلك – وذلك من خلال لوحات تمثل المشروعات، بداخلها توجد أقسام متعددة، وبداخل الأقسام تُضاف المهام كي يسهُل عليك متابعتها. بإمكانك أيضًا إبقاء إحدى المشروعات سرية وخاصة بك، أوإضافة أعضاء فريقك للعمل معك؛ حيث تخصص لكل شخص مهمة محددة بوقت، وبذلك يُصبح عملك بالكامل مرتّبًا ومنظّمًا. خدمات أخرى بديلة: ‏Asana‏‏Basecamp‏مدير المشاريع (عربي)2. ‏‏NameCheap لحجز أسماء النّطاقات لا يتميز موقع NameCheap بتوفيره لكافة الامتدادات فحسب، أو بتقديمه أسعارًا زهيدة لأسماء النطاقات مقارنة بالمواقع الأخرى فحسب، وإنما يتميز أيضًا بلوحة تحكم بسيطة وغير معقدة، كذلك يقدم خدمة "WhoisGuard Privacy Protection" مجانًا لمدة عام كامل ويوفّر دعمًا فنيًّا سريعًا ومميزًا. ويبدأ سعر اسم النطاق في موقع NameCheap من 10 دولارات للامتداد "‎.com"، وفي حالة حجزك اسم النطاق لأول مرة، فلن يتعدى سعره 4 دولارات لمدة عام. ويوفر الموقع العديد من طرق الدفع المختلفة مثل PayPal وبطاقات VESA وMasterCard، وغيرها من طرق الدفع المتنوعة. خدمات أخرى بديلة: ‏GoDaddy‏‏name.com‏‏1and1‏3. DigitalOcean‏ لاستضافة المواقع والتّطبيقات إنها الاستضافة السحابية الأسرع والأنسب لإدارة موقعك من خلال لوحة تحكم بسيطة ومرتبة، وذات خوادم سريعة الإقلاع؛ فلن يستغرق إعداد الموقع سوى 55 ثانية فقط ليكون بعدها مُتاحًا على الإنترنت، كما تتميز كافة خطط الاستضافة التي تبدأ أسعارها من 5 دولارات شهريًّا بمعدل نقل بيانات (bandwidth) يبدأ من 1 تيرابايت/الشهر بسرعة 1 جيجابت/ثانية يمكن زيادته، كذلك تحتوي كافة الخوادم على أداة KVM لتحسين أداء الخادم، وتوفير الحماية القصوى له. وبخصوص الأجزاء المادية التي تتكون منها خوادم استضافة Digital Ocean، فإنها تتكون من معالجات سريعة من النوع Hex Core، وذاكرات تخزين من النوع EEC RAM، بالإضافة إلى RAID SSD Hard Storage التي تحسن من أداء وسرعة الموقع. خدمات أخرى بديلة: Rackspace‏Linode‏Amazon Web Services4. Dropbox‏ للتخزين السحابي تقدم Dropbox مبدئيا مساحة 2 جيجابايت مجانية في خدمتها للتخزين السحابي، يمكن رفعها إلى 16 جيجابايت عبر دعوة أصدقاء للخدمة (حيث تحصل على 500 م.ب زيادة عن كل صديق)، ويمكنك تخزين كل أنواع الملفات عليها لتصبح متوفرة دائمًا، كما يمكنك الوصول إليها من أي هاتف ذكي أو جهاز لوحي أو كمبيوتر، في أي وقت تريد، ومن أي مكان. يمكنك أيضا مشاركة هذه الملفات مع فريق العمل من أجل التعاون المشترك لإنجاز المهام بالتزامن. يمكن ترقية المساحة الخاصة بك إلى 100 غيغابايت مقابل 1.99 دولار شهريًّا، أو إلى 1 تيرابايت مقابل 9.99 دولار شهريًّا. خدمات أخرى بديلة: ‏Google Drive ‏Amazon Cloud Drive‏‏Box‏5. Wordpress لإدارة المحتوىيعتمد ما يقرب من 23% من مواقع الإنترنت على WordPress، كونه مفتوح المصدر ويقوم بتطويره آلاف المطورين والمبرمجين المحترفين من كل دول العالم. كما يمكن تطويعه ليعمل بالشكل الأمثل الذي تريده؛ فلا يوجد فرق بين استخدامه كمدونة أو كمتجر الكتروني لأنه ملائم للجميع ولكافة الأفكار. ويقدم موقع WordPress قاعدة بيانات ضخمة تحتوي على آلاف القوالب والاضافات المجانية التي تساعدك في عمل أي شيء تريده. أنظمة إدارة محتوى بديلة: جوملا‏Drupal‏ 6. OpenCart‏ لبناء متجر إلكتروني ‏OpenCart هو برنامج مفتوح المصدر لإنشاء متجر إلكتروني متكامل؛ حيث يمكنك من إضافة عدد غير محدود من الأقسام والمنتجات والمصانع والعملات واللغات والتقييمات. كما يتوفر مع البرنامج أكثر من 20 طريقة لقبول الدفع من العملاء. وOpenCart مناسب لمحركات البحث، ومدمجة معه لوحة تحكم بسيطة تعطيك نتائج وتحليلات شاملة حول كل كبيرة وصغيرة بموقعك. متاجر إلكترونية بديلة: ‏OSCommerce‏‏Magento‏‏Presta shop‏7. Google Analytics‏ لتحليل المواقع خدمة التحليلات المقدمة من Google هي الأشهر من بين مثيلاتها المجانية؛ فهي توضح لك كل شيء بخصوص زوار موقعك من المكان الذي أتى منه الزائر لموقعك، وحتى يخرج من الموقع. ولا تقف Google Analytics عند تحديد أي الصفحات قد شوهدت، ولكن تعطيك معلومات مفصلة عن نوعية الزائر؛ حيث توضح لك إحصائية بالزوار الفريدين الذين دخلوا الموقع للمرة الأولى، والزوار العائدين للموقع. كذلك توضح Google Analytics نوعية جهاز المستخدم، نظام التشغيل، نوع المتصفح، وتقدم لك إحصائيات متكاملة عن عدد الزيارات والزوار خلال مدة زمنية محددة. خدمات أخرى بديلة: ‏Piwik‏‏Bloomberg‏8. LiveChat‏ للتواصل مع العملاء إذا كنت تدير موقعًا لبيع إحدى المنتجات، أو تقدم خدمة ما، فحتمًا ستحتاج إلى خدمة LiveChat للدردشة الفورية مع العملاء بشكل مفتوح ومباشر. إذ تتميز هذه بعدد من المميزات، منها: إمكانية تقسيم فريق العمل إلى أقسامنظام تذاكر الدعم الفنيحماية المحادثةعمل تقارير نهائية لكافة المحادثاتإمكانية وضع مهام للفريقإمكانية توجيه المحادثات للعميل فور الانتهاءتقييم الخدمة فور انتهاء المحادثة.خدمة LiveChat ليست مجانية؛ فهي بمقابل 39 دولارًا شهريًّا للمواقع متوسطة الحجم، و59 دولارًا شهريًّا للشركات الكبيرة ذات التعاملات الكبيرة والكثيرة؛ لأنها توفر خدمات أكثر. خدمات أخرى بديلة: خدمة Pure Chat‏خدمة Mibew‏9. ‏‏Osticket للدّعم الفنّي لأصحاب المواقع الناشئة الصغيرة الذين يريدون خدمة للدعم الفني تكون بسيطة دون الدردشة المباشرة مع العملاء، نقدم لهم Osticket المفتوح المصدر؛ حيث يمكنك عمل نموذج مخصص وإضافة كافة الحقول التي تريدها إلى هذا النموذج، كما يمكنك إضافة أقسام بعدد غير محدود كقسم الدعم الفني، وقسم المبيعات. ويتمتع Osticket بخصائص متنوعة مثل خاصية إعادة توجيه الرسائل؛ وذلك في حالة أن العميل اختار القسم الخطأ. ويَمنع المستخدم من إضافة نفس التعليق مرتين في نفس الوقت، كذلك فهو مزود بالردود الآليّة لإعلام العميل بأن شركتك قد استلمت رسالته. ويمكن للعميل الاستفسار عما حدث بشأن شكواه من خلال لوحة تحكم مخصصة لهذا الغرض. خدمات بديلة: ‏eTicket‏‏HelpDesk Lite‏‏OTRS‏10. HootSuite‏ لإدارة الشبكات الاجتماعية أنت بحاجة إلى نظام محكم لإدارة الشبكات الاجتماعية، فبدلاً من تخصيص وقت معين لموقع فيس بوك، ووقت آخر لموقع تويتر، أصبح كل ما عليك فعله هو تخصيص وقت محدد لموقع HootSuite؛ وذلك لإدارة كافة الشبكات الاجتماعية من مكان واحد فقط باحترافية تامة؛ حيث بإمكانك جدولة المنشورات لكافة الشبكات التي تتعامل معها، ومتابعة التقارير والإحصائيات الخاصة بكل شبكة اجتماعية من مكان واحد. يمنحك HootSuite حسابًا مجانيًّا لاستخدامه مع ثلاثة شبكات اجتماعية مختلفة، أما إن أردت أن تتمتع بكافة الخصائص فهناك حساب مدفوع بقيمة 8.99 دولار شهريًّا. خدمات أخرى بديلة: ‏MarketMeSuite‏‏Sprout Social‏‏Sendible‏‏Oktopost‏‏Agora Pulse‏11. MailChimp‏ لإنشاء القوائم البريدية موقع MailChimp هو أحد المواقع التي تتيح لك إنشاء قوائم بريدية والتي تعد من أهم الخدمات التي يحتاج إليها أي موقع سواء كان جديدًا أو قديمًا؛ فهي تحفظ الزوار وتحثهم على الرجوع إلى الموقع مرة أخرى. ويقدم لك موقع MailChimp معلومات مفصلة عن المشتركين بقائمتك البريدية، كما يمكنك إرسال رسائل تلقائية مجدولة مسبقاً لمن تريد من المشتركين حسب صفات معينة فيهم، مثل أعمارهم وجنسهم وبلادهم في الوقت الذي تحدده. خدمات أخرى بديلة: ‏AWeber‏‏GetResponse‏12. PayPal‏ للدفع الإلكتروني حتما أنت بحاجة إلى خدمة من خلالها تستقبل الدفع من عملائك، وتريد وسيلة آمنة لا يمكن للمخترقين أن يتخطوها، لذلك نحن نقترح عليك موقع PayPal الشهير؛ فهو يقدم خدمات الدفع الإلكتروني الاحترافية والتي تجعله خدمة الدفع الإلكتروني الأولى على مستوى العالم. يوفر لك PayPal –بجانب الحماية القوية– كافة الأدوات التي تحتاج إليها لتمكين الدفع في موقعك، بالإضافة إلى كونه اسم موثوقًا به من قبل ملايين العملاء. بدائل PayPal: ‏Stripe‏‏2Checkout‏كاش يو‏ (عربي)13. Google Apps for Work‏ للبريد الإلكتروني احصل على بريد إلكتروني احترافي بامتداد اسم النطاق الخاص بك لنشاطك التجاري عبر الإنترنت باستخدام Google Apps for Work التي توفر أدوات مخصصة للأنشطة التجارية تتيح لك تنفيذ المزيد من المهام، بتصميم مناسب تمامًا لفرق العمل. ويوفر لك Google Apps بريدًا إلكترونيًّا احترافيًّا بسعة 30 جيجابايت وفي زيادة مستمرة، وبدون إعلانات، وبحماية شديدة من الرسائل المزعجة، بسعر 5 دولارات في الشهر أو 50 دولارًا في السنة لكل مستخدم. أو يمكنك الحصول على سعة تخزينية غير محدودة وبإمكانيات أكثر مقابل 10 دولارات في الشهر. ‏Google Apps متكامل مع باقي خدمات Google ومنها Drive التي تطرقنا لها بالأعلى، ويمكنك متابعة البريد الإلكتروني الخاص بك من أي مكان باستخدام الهاتف الذكي، أو الجهاز اللوحي أو جهاز الكمبيوتر. كما يقدم Google Apps إمكانية إجراء محادثات فيديو جماعية. خدمات أخرى بديلة: خدمة Zoho‏تطبيق RoundCupe‏موقع Dotster‏إلى هنا نكون قد قدمنا إليكم 12 تطبيقًا وخدمة هامة جدًا وأساسية لكل من يود أن يبدأ شركته الجديدة أو موقعه الجديد عبر الإنترنت.