جميل بيلوني

لا يخفى على أي مطور ويب خصوصًا مطوري واجهة المستخدم الأمامية (front end developers) أهمية إضفاء بعض الحيوية في المواقع التي يصممونها عبر الحركات، إذ هنالك عدة فوائد يمكن تحصليها من إضافة الحركات إلى صفحات الموقع أهمها الابتعاد عن السكون الممل، ولفت الانتباه، وتحسين التواصل مع الزائر أو المستخدم ...إلخ. تحاول هذه المقالة تسليط الضوء على الحركات وأهميتها في مواقع الويب مع ذكر لمحة تاريخية عنها، وتوفر للقارئ مصادر علمية نظرية وعملية لتعلم كيفية إنشاء الحركات عبر CSS باحتراف. جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة، سنذكر هنا جدول المحتويات باختصار: ما هي أهمية الحركات؟ ظهور الحركات في الويب أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ دروس نظرية: مبادئ الحركات والتحريك دروس تطبيقية عملية ما هي أهمية الحركات؟ لا شك أنَّك لاحظت من خلال تصفحك للمواقع كمية الحركات المُطبَّقة فيها بدءًا من الحركات الصغيرة في الأزرار والقوائم وحتى الصور المتحركة (GIFs) والفيديوهات التي تعمل تلقائيًا. وبمناسبة الإشارة إلى الصورة المتحركة، فقد انتشرت كثيرًا في الآونة الأخيرة وهذا طبيعي بالموازنة مع الصور الساكنة المملة. فيمكنك عبر صورة متحركة رواية قصة قصيرة أو إيصال فكرة للناظر بطريقة تتفوق فيها على عدة فقرات مكتوبة. بعبارة أخرى، معلومٌ أنَّ الإشارات والحركات أبلغ من الكلمات وتترك أثرًا أعمق في الذهن، فكيف لا وهي اللغة التي يمكن أن يتخاطب بها جميع البشر مهما كانت لغتهم وخلفيتهم! أي يمكنك عبر الحركات التواصل مع شريحة أوسع من المستخدمين. إذا نظرت حولك عمومًا أو أمعنت النظر في الطبيعية خصوصًا، ستجد أنَّ الحركة في كل مكان وهي سمة الطبيعية الأساسية، فكلمة «حيوية» هي مصدر صناعي من «حياة» ويراد بها الفاعلية والنشاط. وتركبية جسم الإنسان وعدد مفاصله تؤكد أهمية الحركة التي تمثِّل سمة أساسية فيه. فمثل التحريك كَمَثل أي فنٍّ سواءً كان الشعر أو الرسم أو غيرهما من الفنون، وأصبح في عصرنا هذا علمًا يُدرّس وعملًا يُنجَز. هل خطر في ذهنك الآن أفلام الرسوم المتحركة؟ تمامًا، فهذا ما قصدته. لابد أنَّك تعرف ديزني وشخصيتها المشهورة ميكي ماوس والمحقق كونان وشهرة سلاسل المانغا اليابانية (أي القصص المصورة) وتطورها إلى رسوم متحركة (أنمي)؛ فكل ذلك أساسه الحركة والتحريك وإبداع الإنسان في توظيف الحركة في شتى المجالات. ظهور الحركات في الويب إن كنت من جيل الثمانينات والتسعينات، فلابد أنَّك زرت الكثير من المواقع التي كانت تستعمل حركات شتى مثل بطاقات لامعة أو نجوم مشعة أو قطط راقصة أو غيرها من الأشكال والتي كنت أراها مزعجة لي في بعض الأحيان؛ فلا أحب الاستعمال الزائد للحركة كثيرًا وكنت أهرب من المنتديات التي تفرط في استعمالها. أغلب ذلك كان يجري عبر تقنية Flash (الفلاش) التي أحدث ثورة في الحركات والتحريك آنذاك (بعد الصور المتحركة GIF). على أي حال، كانت ذلك يُسبِّب بطئيًا كبيرًا في تحميل الموقع مما يؤثر سلبًا عليه. في هذه الأيام ومنذ فترة ليست ببعيدة، ظهرت تقنيات حديثة يمكن عبرها إضفاء الحيوية والحركة إلى مواقع الويب وذلك عبر HTML و CSS وجافاسكربت وصور SVG دون أن تؤثر على الأداء تأثيرًا ملحوظًا أو سلبيًّا. وبالتالي، دخلت الحركة إلى أغلب عناصر الصفحة بأدق تفاصيلها. فلم يعد الغرض منها إضفاء الحيوية والمتعة للمستخدم فقط، بل تحسين تجربة وواجهة المستخدم أيضًا (UX/UI) مما يجعل الموقع أفضل وأسهل للاستخدام خصوصًا إذا كان موقع الويب (أو تطبيق الويب) تفاعليًّا مع المستخدم. أريد تعلم إنشاء الحركات، فمن أين أبدأ؟ حسنًا، إن اقتنعت بضرورة وأهمية الحركات في صفحات الويب، فقد تتساءل: من أين أبدأ وهل يوجد مرجع يشرح لي التحريك شرحًا كافيًا ووافيًا؟ أجيبك، نعم يوجد وبالعربية أيضًا. وفرنا في أكاديمية حسوب سلسلة مقالات عن تعلم التحريك في CSS والتي تأخذك خطوة بخطوة لإنشاء حركات احترافية وإضافتها إلى موقعك. هذه السلسلة هي ترجمة لفصول كتاب CSS Animation 101. ستغطي هذه المقالات المواضيع التالية: أولًا: ما هي الحركات؟ سنحاول أن نفهم سبب استخدام الحركات. سنقدم أيضًا الخاصيتين transition و animation، إضافة إلى بعض مصادر الإلهام. ثم: سنتحدث بتفصِيل عن الخاصية transition. ونتعلم كيفية عمل الانتقالات، والخاصيات التي تُمكّننا من التحكم في الحركة. بعد ذلك: سنركز على الخاصية animation، ونتعلم كيفية إنشاء الإطارات المفتاحية التي تتيح لنا فعل أشياء تتجاوز إمكانيات الانتقالات البسيطة. أخيرًا: سنجمع كل ما تعلمناه في الفصول السابقة. سندرس بعض الأمثلة المتقدمة التي تستخدم كلا الخاصيتين، ونتعلم الرابط بين الحركات وسهولة الوصول (accessibility)، ونشارك بعض مصادر CSS المفيدة التي يمكنك تطبيقها في مشاريعك، وأدوات JavaScript التي يمكن استخدامها لإنشاء تأثيرات أكثر تقدمًا. بعد قراءتك هذه السلسلة، ستفهم مبادئ التحريك في CSS فهمًا جيدًا، بالإضافة إلى الأدوات اللازمة لإنشاء الحركات وإضافتها إلى مشاريعك. تجمع مقالات هذه السلسلة بين الأمثلة النظرية والعملية. سوف تتعلم كيفية إعداد بيئة العمل الخاصة بك، وستطالع الكثير من الأمثلة العملية عن الحركات في ثنيّات الطريق. دروس نظرية: مبادئ الحركات والتحريك سأكتب عناوين مقالات سلسلة التحريك في CSS مع شرح مبسط عن ما ستتعلمه فيها هنا لسهولة الوصول إليها: 1. ما هي استخدامات الحركات؟ هذه المقالة هي أول مقالة في السلسلة وتناقش سبب إضافة الحركات وتبنيها في مواقع الويب وكيف يمكن أن يستفيد منها مصممو مواقع الويب. 2. تجهيز بيئة العمل لإنشاء الحركات ستتعلم في هذه المقالة كيفية تجهيز بيئة العمل لديك لإنشاء الحركات عبر CSS وتشغليها إضافةً إلى تحديد سير العمل. سيكون العمل إمَّا باستعمال المتصفح نفسه (سيكون الاعتماد غالبًا على CodePen) أو بتجهيز بيئة تطوير محلية. سيتطرق المقال إلى أداة البناء Gulp لأتمتة بعض العلميات الروتينية. 3. مدخل إلى الإنتقالات: التنقل بين الحالات تشرح هذه المقالة كيف يجري تحريك عنصر عبر توضيح مبدأ تحويل إحدى خصائصه وصفاته ونقلها تدريجيًّا بزمن محدَّد لتوليد شعور بالحركة. ستلقي هذه المقالة أيضًا نظرة تفصيلية على خاصية التحويل transition في CSS وكيفية استعمالها في ذلك الغرض مع أمثلة عملية. 4. مدخل إلى الحركات: مفهوم الحركة يشرح هذا المقال أولًا الفرق بين الإنتقال والحركة ويوضح كيف يُنفِّذ المتصفح حركة ما على عنصر. يعرِّفك هنا على خاصية الحركة animation في CSS شقيقة خاصية التحويل transition وكيفية استعمالها لإنشاء الحركات. يعرض أيضًا مثالين عمليَّين ويحللهما لفهم كيف تجري الحركة. يشرح أخيرًا متى تُستخدَم الحركة ومتى يُستخدَم الانتقال. 5. تطبيق عملي: الانتقالات تتعمق هذه المقالة في استعمال الخاصية transition وتعرض مثالًا عمليًّا عن تطبيقها على زر لتغيير حالته أثناء تحويم مؤشر الفأرة فوقه. تناقش المقالة أيضًا موضوع دعم هذه الخاصية عبر مختلف المتصفحات. 6. خاصيات الانتقالات تشرح هذه المقالة جميع خاصيات الانتقالات المرتبطة بالخاصية transition مع عرض بعض الأمثلة. أي أنها ستعرض الصياغة المختزلة والصياغة التفصيلية المطوَّلة لها. ستتطرق أخيرًا إلى شرح موضوع مهم يتعلق بالأشياء التي لا يطبَّق الانتقال عليها. 7. دوال التوقيت تتحدث هذه المقالة عن دوال التوقيت (timing function) وكيفية استعمالها مع الانتقالات المطبقة على العناصر، وتشرح أشهر أنواع دوال التوقيت المستعملة حاليًّا مع عرض صور وأمثلة توضيحية تساعد على فهمها. 8. الانتقالات المتعددة سترى في هذه المقالة ما يحدث عند تطبيق عملية انتقال واحدة على عنصر تغير فيه عدة حالات، أي كيف يمكن توليد حركة جديدة عبر تطبيق عملية انتقال واحدة على عنصر واحد تحدث له عدة تغييرات. يجري تطبيق ذلك على مثاليين عمليين ملهمين. 9. الانتقالات وجافاسكربت تتحدث هذه المقالة عن طريقتين لتطبيق الانتقالات على العناصر عبر استخدام لغة جافاسكربت هما: إضافة وإزالة الأصناف (أي إضافة تنسيقات مكتوبة مسبقًا أو إزالتها)، أو التحكم مباشرةً في الانتقالات (أي تعديل شيفرة CSS مباشرةً). 10. تطبيق عملي: التحريكات ستلقي هذه المقالة نظرة أعمق على الخاصية animation شيقية الخاصية transition والمكملة لها في توليد الحركات مع ذكر عدة تطبيقات عملية عليها. سيجري أيضًا شرح الإطارات المفتاحية (keyframes) وارتباطها الوثيق بتلك الخاصية وكونها أساس الحركة. 11. خاصيات الحركات تشرح هذة المقالة الصياغة المختزلة والصياغة التفصيلية المطوَّلة للخاصية animation وتشرح بعدها الخاصيات المرتبطة بها ووظيفة كل منها. تتطرق أخيرًا إلى كيفية استخدام دوال التوقيت ضمن الإطارات المفتاحية. 12. تطبيق عملي: الإطارات المفتاحية تلقي هذه المقالة نظرة أعمق على الإطارات المفتاحية (keyframes) وصياغتها وكيفية استعمالها مع الحركات لتحريك العناصر تحريكًا مخصَّصًا. سيجري شرح كل ذلك شرحًا تفصيليًّا عبر تطبيق عملي لتحريك زر حركة مُخصَّصة. 13. الحركات المتعددة المتزامنة تتحدث هذه المقالة عن كيفية استخدام عدة مجموعات من الإطارات المفتاحية (keyframes) لإنشاء حركة معقدة مؤلفة من عدة حركات تعمل بشكل متزامن مع بعضها بعضًا. المثال العملي في هذا الدرس هو إنشاء إشارة مرور. 14. موجز الحركات نتوقف هنا في هذه المقالة للالتقاط الأنفاس وأخذ استراحة بسيطة يجري فيها مراجعة وتلخص كل ما تعلمته مسبقًا في المقالات السابقة عن الحركات والانتقالات وتطبيقها لتحريك العناصر في CSS. 15. رواية القصص عبر الحركات تطبِّق هذه المقالة كل ما تعلمته مسبقًا لإنشاء حركات هادفة مفيدة، إذ تشرح مفهوم الصورة الرئيسية المستعملة بكثرة في الصفحات الرئيسية للموقع وصفحات الهبوط والتي تحكي هدف الوقع أو تُعلِّم كيفية استخدامه. 16. حرب النجوم (Star War) سنطبق في هذه المقالة كل ما تعلمته في المقالات السابقة لصنع حركة متجِهيًّة (SVG) مرحة، وذلك بالعمل على تحريك عنوان فيلم حرب النجوم من إعلان "The Force Awakens" ليظهر وكأنه ثلاثي الأبعاد. في أثناء ذلك، سيجري شرح الخاصية transform ودوالها‏ scale()‎ و translateZ()‎ و rotateY()‎. 17. إظهار المحتوى أثناء التمرير سوف تتعلم في هذه المقالة كيفية إظهار العناصر عند تمرير (scrolling) إليها وعرضها على نافذة المتصح مع إضافة حركة إليها. يعرض لتحقيق ذلك إطاري عمل هما: Wow.js و Animate.css مع عدم نسيان الدعم الذي يوفره Modernizr احتياطًا من أولائك المستخدمين الذين لا يشغّلون JavaScript لسبب ما. 18. سهولة الوصول تنتقل هذه المقالة بعيدًا عن الحركات للتحدث عن سهولة الوصول (accessibility)، إذ لا تقل عملية تسهيل وصول جميع الأشخاص للمحتوى أهمية عن عملية إنشاء الحركات. تدور رحى هذه المقالة حول مناقشة العبارة التالية: ما الفائدة من الحركات إن منعت بعض الأشخاص (مثل الذين يستخدمون قارئات الشاشة مثلًا) من الوصول إلى المحتوى وعرضه، أو سببت إزعاجًا لآخرين وأعاقتهم عن استخدام موقعك أو تطبيقك بأريحية وكفاءة. 19. نهاية الرحلة تعرض هذه المقالة الأخيرة من سلسلة التحريك في CSS بعض المصادر والمراجع المفيدة في إنشاء حركات متقدمة وتحاول توجيهك إلى الخطوات اللاحقة لتطوير نفسك والانتقال إلى مراحل متقدمة في مجال التحريك. دروس تطبيقية عملية @media screen and (min-width: 650px) { .response_image { width: 33%; display: inline-block; vertical-align: top; margin-top: 0px; } .response_descrip { width: 64%; display: inline-block; margin-right: 10px; vertical-align: top; margin-top: 0px; } } تحوي الأكاديمية على مقالات عدة تتحدث عن الحركات في CSS بمستويات متفاوتة ومواضيع متنوعة تصب جميعها في موضوع واحد ألا وهو «التحريك في CSS»، لذا جمعت لك جميع هذه المقالات لسهولة الوصول إليها من مكان واحد ولتكون لك مرجعًا تستعين به في المستقبل. مبادئ التحريك في صفحات الويب باستخدام CSS تشرح هذه المقالة المبادئ الاثنا عشر لأساسيات التحريك عبر CSS - المنشورة بكتاب عنوانه: "وهم الحياة: الرسوم المُتحركة في ديزني" - وتناقش كيف لها أنّ تُطبَّق في صناعة صفحات الويب مع أمثلة توضيحيّة وإتاحة الوصول إلى مصدر شيفرة HTML و CSS الخاصّة بهذه الأمثلة. تأثيرات حركية على عناصر قوائم HTML باستخدام CSS ستتناول هذه المقالة كيف يُمكن للحركات المُساعدة على تقديم مُحتوى جديد، وذلك عبر إظهار وإخفاء عناصر القوائم. تتطرق أيضًا إلى شرح كيفية استخدام JavaScript لإضافة عناصر جديدة إلى القائمة، إذ يجري تطبيق حركة عليها أثناء إظهارها. تحريك شبه العناصر (pseudo-elements) في CSS ستتعرف في هذه المقالة على كيفية استخدام عنصر زائف (pseudo-element) لإضافة تأثير بصري على زر في CSS. يشرح أولًا ماهية شبه العناصر (أو العناصر الزائفة) وفائدتها وكيفية الاستفادة منها في إنشاء الحركات، ثم ينتقل إلى كيفية توظيفها في إنشاء زر برَّاق عبر الحركات. تحريك زر تفضيل التغريدة الخاص بتويتر باستخدام CSS فقط يعرض هذه المقالة طريقة لمحاكاة حركة زر "التفضيل" في تويتر الذي حدثه مؤخرًّا المعتمدة على سلسلة من الصور ولكن ستجري عملية محاكاة الحركة وتقليدها باستعمال CSS مع دوال التوقيت بالإضافة إلى شرح مفهوم وهم الحركة. تنبيهات مؤقتة باستخدام CSS ستتعلم في هذه المقالة البسيطة كيفية عمل تنبيهات مؤقتة بحركة جميلة باستخدام CSS فقط حتى تخطر المستخدم بوجود شيء جديد. ما سيجري تطبيقه هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفاؤها. وسنضيف شريط تقدم (progress bar) لنعرف كم تبقى من الوقت حتى يختفي التنبيه. كيفية إنشاء قائمة متحركة من نوع off-canvas في CSS يشرح هذا المقال كيفية إنشاء قائمة تنقل من النوع الذي يكون خارج الشاشة (off-canvas)، إذ ستتعلم ببناء شيء شبيه بهذه المعاينة (انظر إلى Demo2) بحيث تكون الأيقونة التي تفتح القائمة موجودة في أعلى يسار الشاشة والحد (border) يكون اسمك من جهة اليسار. تأثير الانتقال في مشهد فضائي يشرح هذا الدرس طريقة إنشاء تأثير الانتقال في مشهد فضائي يضم الأرض والقمر ، إذ يهتم المقال بتعليمك كيفية استخدام الانتقالات لدب الحياة في محتوى الصفحة، بالإضافة إلى إنشاء تأثيرات مرور الفأرة فوق العناصر لتبدو بأجمل مظهر. أضف إلى ذلك أنها تناقش مفهوم الانتقالات والحركات والفرق بينهما وأيهما يجب أن تستخدمه. كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript يشرح هذا الدرس طريقة إنشاء ساعة متحركة باستخدام تأثيرات CSS و JavaScript. أساس إنشاء هذه الساعة سيكون باستخدام HTML و CSS وخلفية SVG إضافةً إلى بعض أسطر JavaScript. ستستعمل أيضًا التحريكات Animations والانتقالات Transitions في CSS، وسنعتمد على JavaScript لضبط التوقيت الابتدائي. تحريك وانتقال العناصر في CSS3 (الانتقال) يشرح هذا المقال كيفية تطبيق الانتقالات (الخاصية transition) على العناصر عبر في CSS فقط مع ذكر أهم خصائص العناصر القابلة للانتقال مع أمثلة عملية. يتطرق أيضًا إلى زمن وسرعة الانتقالات، والتأخير في الانتقالات، وكيفية تطبيق الانتقال بتعليمة واحدة مختزلة. تحريك وانتقال العناصر في CSS3 (التحريك) يكمل هذا المقال شرح مفهوم تحريك العناصر وتطبيق التأثيرات البصرية عبر الحركات (الخاصية animation) في CSS ويوضح كيفية تحريك العنصر بين عدة حالات مع أمثلة عملية. المواضيع التي يتحدث المقال عنها أيضًا هي الإطارات المفتاحية، ومدة الحركة ودوال التوقيت، وتأخير تشغيل الحركة، واتجاه الحركة وحالتها، وتخصيص الحركات، وكيفية تطبيق حركة بتعليمة واحدة مختزلة. تأثير الانتقال والحركة في CSS يُعرِّفك هذا المقال على تأثيرات الانتقالات (Transitions) والحركات (Animations) في CSS3 بالإضافة إلى الحديث عن دعم المتصفحات لها، والخصائص التي تسمح بتطبيق تأثيرات الانتقال عليها، ومدة وتوقيت تأثير الانتقال، والإطارات المفتاحية في الحركات، ودوال التوقيت، وأزمنة الحركات، وتكرار واتجاه وحالة الحركة، وغيرها. أفضل 25 مكتبة تحريك في CSS يعرض لك هذا المقال أفضل مكاتب التحريك في ‏CSS، والتي تساعدك في حفظ وقتك عند تصميم ‏موقع الويب الخاص بك من خلال استخدامك لهذه المكاتب التي تضفي بعض الديناميكية والتفاعل إلى ‏عملك، إذ تحوي هذه المكتبات على العديد من الحركات والمؤثرات لأي نوع من أنواع عناصر صفحات الويب كالنصوص، الصور، الإطارات، الأزرار، والبطاقات والعديد غيرها. تأثيرات إبداعية لإضافة وإزالة عناصر قائمة باستخدام تحريكات CSS يشرح هذا المقال استخدام الحركات (animations) والانتقالات (transitions) في CSS3 لإعطاء تأثيرات عند إضافة أو إزالة عناصر من قائمة بالإستعانة بتقنية التخزين المحلي للمتصفح، إذ من الضروري أن يكون للانتقالات والحركات هدف واضح ومحدّد، ألا وهو تحسين تجربة المستخدم. كيفية إنشاء قائمة تنقل دائرية باستخدام CSS Transforms يعلمك هذا المقال كيفية إنشاء قائمة تنقل (navigation) دائرية الشكل باستخدام الانتقالات في CSS. يراعي المقال شرح ذلك خطوة بخطوة بالإضافة إلى الحسابات والمنطق البسيط وراء هذه الطريقة حتى يتسنى لك فهم كيفية عمل هذه القائمة المميزة. استخدام المحدد target: ضمن CSS لإنشاء تأثيرات واجهة المستخدم UI بدون JavaScript يشرح هذا المقال كيفية استخدام المحدد target: ضمن CSS لتحديد وتنسيق مظهر العنصر أو الفقرة الموجودة ضمن نفس الصفحة والمعرفة عبر الخاصية href ضمن رابط ما، إذ يتم تطبيق هذه التنسيقات على العنصر الهدف عند النقر على ذلك الرابط بدون اللجوء لاستخدام JavaScript. يشرح المقال أيضًا كيفية استعمال الخاصية animation لتطبيق تنسيق ما بشكل متدرج.

واحدة من الطرق المتبعة لزيادة العائد والتي غالبا ما تُترك غير مكتشفة بواسطة المسوقين هي «الارتقاء بالصفقة» أو «البيع البديل» (Upselling). فكثيرًا ما نسمع عن كل تلك الطرق الجديدة لجلب المزيد من الزوار لموقعك الإلكتروني أو الإستراتيجيات الجديدة للتسويق الإلكتروني. ومع ذلك فليس هناك اهتمام كبير «بالارتقاء بالصفقة»، فهي تقوم بشكل أساسي بزيادة الاستفادة من المبيعات التي تقوم بها بالفعل، و يُمكن القيام بها "بأقل مجهود" و" بتكاليف أقل" من السعي وراء مبيعات جديدة. فما الذي لا نحبه في تلك الطريقة؟ انظر كيف يمكنك البدء باستخدام " الارتقاء بالصفقة" للحصول على ميزة تميزك عن منافسيك، وزيادة العائد الخاص بك. تعريف الارتقاء بالصفقة يتمحور مصطلح الارتقاء بالصفقة حول فكرة تعظيم العائد من كل عملية بيع تقوم بها، فبدلا من إهدار الوقت والطاقة على عملاء قد يشتروا أو قد لا يشتروا منك، فبإمكانك أن تستهدف العملاء الجاهزون بالفعل للشراء. فعلي سبيل المثال، قد يقترح متجر إلكتروني زيادة مدة الضمان الخاصة بمنتجاته، وذلك نظير سعر إضافي. قد يبدو ذلك انتهازيًا قليلًا، ولكن إذا تم بشكل صحيح، فسوف يؤدي إلى زيادة عظيمة للعائد الخاص بك. فمتى ما قُدمت إليك خدمات إضافية مع مشترياتك، أو إذا ما قُدم إليك نسخة نهائية أفضل من السلعة التي تختارها، فذلك يعد «إرتقاء بالصفقة»، فمعظم سلاسل محلات التجزئة الخاصة ببيع الإلكترونيات يقومون بذلك لتعظيم الأرباح المُكتسبة من كل زبون. فيما يلي مثال على الارتقاء بالصفقة: لا تسئ فهمي، ولكن إذا ما وصلت الممارسات الخاصة بالارتقاء بالصفقة إلى مستويات سخيفة، فسوف تؤدي إلى إلحاق الضرر بعملك، لكن إن كانت هناك قيمة فيما تعرضه، فسوف تجني الأرباح فقط. إن القاعدة الذهبية للارتقاء بالصفقة هو تقديم قيمة إضافية للعميل، فطالما أن القيمة الإضافية التي توفرها تتناسب مع التكلفة الإضافية، فأنت ناجح. الفرق بين الارتقاء بالصفقة والبيع المتقاطع الآن، عندما نتناقش حول الارتقاء بالصفقة فإنه من الواجب علينا الإشارة إلى الأخ الأصغر والغير معروف للارتقاء بالصفقة ألا وهو: «البيع المتقاطع» (cross-selling). فهي وسيلة أخرى لزيادة العائد والتي تعتمد على نفس الفكرة: العميل الذي يرغب بشراء شيء ما من الممكن دائما أن يشتري أكثر. إن الفرق بين الطريقتين هو: في البيع المتقاطع فإنك تقدم منتجات مختلفة كليًّا وليس فقط تحديثات أو إضافة للسلعة المبدئية للعميل. فيما يلي مثال لعملية البيع المتقاطع: فعلى سبيل المثال، إذا اشتريت سماعات أذن جديدة، فمن الممكن أن يُقدم إليك جهاز آيبود إذا كان المحل يتبع سياسة البيع المتقاطع. ومن الممكن أن يكون ذلك إما اقتراحًا خاصًّا لمنتج معين، أو اقتراحًا تلقائيًّا تبعًا لعادات التسوق الخاصة بالعملاء السابقين. أراهن أنك قد رأيت في المتاجر الإلكترونية اقتراحات - إعلانات- مثل : "العملاء الآخرين الذين يحصلون على المنتج س يحصلون كذلك على المنتج ع"، في تلك الحالة فإنَّ ذلك يُعد بيع متقاطع حرفيًّا. ما الذي تستطيع الحصول عليه من الارتقاء بالصفقة والبيع المتقاطع الإجابة المباشرة لذلك هي: عائد أعلى. ومع أن الجزء الأفضل حول الارتقاء بالصفقة والبيع المتقاطع يكمن في التفاصيل، فإنها عائدات لا يتوجب عليك حقا العمل لأجلها. أعني إنه توجد بعد الحيل القليلة بشكل واضح هنا وهناك والتي ستحتاج للقيام بها والتي تتطلب منك بعض العمل، ولكنها تحتاج مجهود أقل بكثير من الذي ستحتاجه لجذب عملاء جدد لموقعك الإلكتروني. بالنسبة للمبتدئين، فإنه ليس عليك العمل بجد مع هؤلاء العملاء كما تفعل مع العملاء العاديين الذين يقومون فقط بإلقاء نظرة، فهؤلاء العملاء قد اتخذوا بالفعل قرارهم لشراء شيء ما، إن السؤال يكمن فيما إذا كانوا سيرغبون في شراء المزيد. كما توجد ميزة أخرى للارتقاء بالصفقة والبيع المتقاطع وهي التكلفة المنخفضة أو الشبه منعدمة للاستحواذ، فعادة ستحتاج لإستثمار مبلغ معين من المال للحصول على عملاء محتملين لموقعك الإلكتروني. فسوف تحتاج للاستثمار في حملات Ad Words - برنامج شركة جوجل للإعلانات- وبرامج تحسين محركات البحث SEO - لتحسين ظهور موقع إلكتروني أو صفحة موقع إلكتروني في نتائج محركات البحث المجانية مثل جوجل- والمحتوى الخاص بك، فقط لكي تجذب شخص ما إلى موقعك الإلكتروني، وسوف تحتاج حينها إلى إقناعهم لشراء شيء ما منك. أما عندما تستخدم الارتقاء بالصفقة والبيع المتقاطع فإنَّ الجزء الصعب يكون قد تم بالفعل، بدون تكاليف إضافية. أنا لا أقول أن اجتذاب أناس أكثر لموقعك الإلكتروني لن يفلح إذا ما أردت أن تزيد من أرباحك، إنها طريقة صالحة تماما، ولكن تأكد فقط من أنك لا تفوت بعض فرص الارتقاء بالصفقة والبيع المتقاطع. في النهاية، ومع ارتفاع قيمة حياة عملائك، فسوف يصبحون أيضا أكثر ولاء لعلامتك التجارية، أي كلما اشتروا منك أكثر، زادت ثقتهم بك أكثر، والعميل الذي يثق بك سوف يعود دوما لشراء المزيد. وتجدر الإشارة أيضا إلى أنَّ الولاء سوف يأتي من الاستثمار الذي يقوم به العميل. فعلى سبيل المثال إذا اشتروا منك منتجًا واحدًا فإنه من السهل استبداله بمنتج منافس، أما إذا اشترى العميل فهرس كامل من منتجاتك وكل تلك المنتجات تعمل معا، فسيكون التغيير حينها مكلفًا حقًا. وسائل الارتقاء بالصفقة و البيع المتقاطع فيما يلي فكرتان حول كيفية البدء في استخدام الارتقاء بالصفقة والبيع المتقاطع في أعمالك الإلكترونية. استخدمهم بحرص وسوف ترى أرباحك وهي ترتفع لتتخطى عنان السماء. الارتقاء بالصفقة بطريقة عربة التسوق واحدة من الوسائل الشائعة للارتقاء بالصفقة والتي يمكنك استخدامها هي الارتقاء بالصفقة من خلال عربة التسوق، فتستطيع أن تقترح منتجات أو خدمات من أجل عملائك الذين دخلوا للتسوق لكي تؤكد عملية شرائهم للمنتجات. ونجد أن واحدة من الطرق التي تمكنك من فعل ذلك هي باقتراح منتجات بناء على محتويات عربة التسوق الخاصة بالعملاء، فعلى سبيل المثال إذا ما اشترى أحدهم دراجة هوائية، فبامكانك الإقتراح بأنه يجب عليهم شراء خوذة للرأس ومضخة هواء. ومن الممكن أن يكون اقتراحك إما مخصصا لمنتجات محددة، أو يكون اقتراحًا تلقائيًّا مستندًا إلى سجل المعاملات السابق لعملاء آخرين، فعلى سبيل المثال إذا ما وُجد أن الكثير من العملاء الذين يشترون تلفاز يشترون أيضا جهاز " أكس بوكس- Xbox "، ففي المرة القادمة حينما يقوم أحدهم بشراء تلفاز فيجب عليك أن تقترح عليه أن يقتني جهاز أكس بوكس أيضًا. وإذا ما اشترى عميل ما منتجًا يمكن أن يتطلب عملية إعداد إضافية، فمن الممكن أن تعرضها كخدمة إضافية، فبإمكانك أن تستخدم طريقة الارتقاء بالبيع في تلك الحالة بضبط إعدادت جهاز حاسوب جديد أو تثبيت تلفاز على الحائط. أخيرًا، أي ضمانات مدفوعة، أو دعم ممتد من أجل المنتجات التي يشتريها العميل هي أيضا طريقة جيدة للارتقاء بالصفقة في طريقة عربة التسوق. الارتقاء بالصفقة في تطبيق إلكتروني بإمكانك استخدام الارتقاء بالصفقة مباشرة في تطبيقك الإلكتروني بتقديم خدمات إضافية محددة حينما يحتاج العميل لها. على سبيل المثال، إذا كانت رخصة عميل على وشك الانتهاء، فبإمكانك إرسال إشعار قصير لينتبه إلى أنه قد حان الوقت لتمديد الاشتراك، إذا أراد ألا يفقد القدرة على استخدام التطبيق. يمكن أيضا إظهار الميزات الغير متوفرة في النسخة التي يستخدمها العميل وتقوم بإبرازها. من خلال تلك الطريقة سوف يروا أنهم يغفلون مميزات من الممكن جدا أن تساعدهم. المفتاح هنا يكمن في عرض تلك الإشعارات في اللحظة المناسبة، وإذا كان العميل لا حاجة له بميزة معينة فليس هناك داعي للإرتقاء بالصفقة معه. فحينما تبرز الحاجة حينها يجب أن تقدم عرضك. تمامًا كما حدث بينما أكتب المقالة، فإن تطبيق Dropbox الخاص بي أعلمني أن المساحة الخاصة بي على وشك النفاذ وأنني أستطيع ترقية البرنامج إلى مساحة أكبر، هذا مثال عظيم على المزامنة للارتقاء بالصفقة في التطبيقات الإلكترونية. بمجرد ظهور المشكلة، فإن Dropbox استغل الفرصة لعرض حل بواسطة الارتقاء بالصفقة. خطط الدفع للارتقاء بالصفقة إذا كنت تدير عملا بخطط عديدة، فبإمكانك استخدام قوة الاقتراح لترتقي ببيع أغلى خططك. دعنا نقول أنك تمتلك ثلاث خطط أسعار، ودعنا نصفهم كالآتي: رخيص وعادي ومكلف. فبإمكانك وضع إشارة " الأكثر شعبية" أو " الاختيار الأمثل" على الخطة العادية لكي تضيف إليها بعض الأدلة الإجتماعية وجعل العميل الذي كان ينوي اختيار الخطة الرخيصة يفكر مرتين بخصوص اختياره. إن امتلاك العديد من خطط الأسعار المتوفرة هو نوع من الارتقاء بالصفقة الخاصة بالخدمات الخاصة بك في حد ذاته. إذا كانت لديك خطة واحدة فقط، فإن العملاء ما كانوا ليعرفوا إن كانت رخيصة أو مرتفعة الثمن، حيث إنه بإضافة خطة رخيصة إلى حد ما و لكنها خطة بدائية إلى ذلك المزيج من الخطط، فأنت بذلك تجعل خطتك العادية أكثر جاذبية. أيضًا توفير مقارنة للخطط هي طريقة جيدة للارتقاء بالصفقة الخاصة بخدماتك، فبإمكانك عرض خططك جنبا إلى جنب لحث العملاء على التفكير. فأنت تريد أن تخلق مواقف يتحدث فيها العملاء إلى أنفسهم مفكرين "ربما يجب علي أن أدفع 5 دولارات إضافية لأتمتع بكل المميزات الإضافية". إننا نرى الآن أن زيادة طفيفة في السعر يمكن أن تكون حافزًا كبيرًا للعملاء لجني المزيد من الأرباح. الارتقاء بالصفقة من خلال تخصيص الاختيارات طريقة أخرى لزيادة الأرباح من خلال الارتقاء بالصفقة هي توفير الإختيارات المخصصة المدفوعة. أن تسمح بشكل أساسي للعميل بإن يُعدل المنتج بشكل كامل ليلائم احتياجاته بالضبط. فكر في الوكلاء وفي كيفية سماحهم للعملاء بإختيار اللون والمواد الداخلية وكل التفاصيل الصغيرة حين يشترون سيارة. مثال أخر وهو شركة أبل والتي توفر اختيارات التخصيص والتعديل حينما يشتري أحدهم جهاز ماك Mac، فممكن أن تختار معالج أقوى، مساحة ذاكرة أعلى ، أو شاشة أكبر. إن كل تلك الإختيارات المخصصة المدفوعة لا تكون ضمن علامة السعر الخاصة بالمنتج، ومع ذلك إذا كانت صغيرة بشكل معقول - اسعار الاختيارات المخصصة- فلن يمانع العملاء من الدفع لأجلها، إذا كانوا يدفعون 20000 دولار لشراء سيارة جديدة، فإن ال300 دولار المطلوب دفعها لكي يحصلوا على دهان مخصص لا يبدو كمبلغ كبير. ومن زاوية عملية، فإن كل تلك الزيادات الصغيرة في السعر تجتمع وتعزز بشكل كبير هامش ربحك. توصيل القيمة من خلال الارتقاء بالصفقة ما هو السر لجعل جهودك في الارتقاء بالصفق ناجحة؟ ما الذي سيجعل عرضك لا يقاوم بدلا من أن يكون مزعجا؟ اسم اللعبة هو القيمة. طالما أن الارتقاء بالصفقة أو البيع المتقاطع الذي تقوم به يبدو منطقيا في عين العميل، فسوف ينجح. التكلفة الإضافية تحتاج أن ترافقها قيمة إضافية مُضافة إلى العرض الأصلي. ومع ذلك، إذا قمت بعمليات تواصل أكثر مما يجب قليلًا، فسوف تبدأ في إزعاج العملاء بعروض انتهازية لا يحتاجون إليها، وذلك لن يعود عليك بالنفع في حالة ما إذا كنت تريد أن تزيد من أرباحك، ومن الممكن أيضا أن يعرض ذلك علاقتك مع العملاء للخطر. استخدم الارتقاء بالصفقة بحرص وسوف يصبح واحد من أقوى الأدوات الخاصة بك لتعظيم العائد. هل بالفعل تستخدم الارتقاء بالصفقة أو البيع المتقاطع على موقعك الإلكتروني؟، تأكد من مشاركة نتائجك في التعليقات. ترجمة -وبتصرف- للمقال What Is Upselling and How It Can Increase Your Revenue لصاحبه Jacob Firuta

Lighthouse هو أداة مُؤَتمتة (Automated) مفتوحة المصدر لتحسين صفحات الويب. يمكن تطبيق الأداة على أي صفحة ويب سواء كانت عامّة أو تحتاج للاستيثاق (Authentication). يمكن استخدام الأداة للتدقيق في الأداء، قابليّة الوصول (Accessibility)، صفحات الويب التقدميّة (Progressive web apps) وغيرها. تستطيع تشغيل Lighthouse من أدوات المُطوّر في Chrome أو سطر الأوامر أو بصيغة وحدة Node. تستقبل الأداة Lighthouse رابط URL لتدقيقه فتُشغِّل سلسلة من التدقيقات على الصفحة ثم تولّد تقريرًا عن حالة الصفحة. اعتمد على التقرير واستخدم التدقيقات التي أخفقت فيها الصفحة دليلا لكيفية تحسينها. يوجد في كلّ تدقيق توثيق مرجعي يشرح أهميّة التدقيق وكيف تصلح الصفحة لتتوافق معه. البداية اختر سير عمل Lighthouse الذي يناسبك: أدوات التطوير في Chrome. دقّق الصفحات التي تحتاج الاستيثاق بسهولة واقرأ التقارير بصيغة مفهومة للمستخدم. عبر سطر الأوامر. أتمت تشغيلات Lighthouse بسكربتات Shell. وحدة Node. ادمج Lighthouse في نظام التكامل المستمر (Continuous integration) الخاصّ بك. ملحوظة: تتطلّب كل واحدة من طرق العمل في Lighthouse وجود Google Chrome مثبَّت على جهازك. شغّل Lighthouse من أدوات تطوير Chrome يشغّل Lighthouse لوحة Audits في أدوات تطوير Chrome. اتبع الخطوات التالية لتشغيل تقرير: نزّل Google Chrome للأجهزة المكتبية. استخدم Google Chrome لتصفّح الصفحة التي تودّ تدقيقها. يمكنك تدقيق أي صفحة على الوِب. افتح أدوات التطوير DevTools في Chrome. انقر على اللسان Audits. يظهر في يسار الشاشة الإطار المعروض من الصفحة التي ستُدقَّق. تظهر في اليمين لوحة التدقيقات (Audits) التي يشغّلها Lighthouse. انقر على Perform an audit. تظهر أدوات التطوير قائمة بتصنيفات التدقيق. اتركها جميعا مُعلَّمة. انقر على Run audit. يعطيك Lighthouse بعد 60 إلى 90 ثانية تقريرًا عن الصفحة. تثبيت سطر أوامر Node وتشغيله اتبع الخطوات التالية لتثبيت وحدة Node: 1- نزّل Google Chrome للأجهزة المكتبية. 2- ثبّت الإصدار طويل الدعم الحالي من Node. 3- ثبّت Lighthouse. يشير الخيار ‎-g إلى تثبيت الوحدة على مستوى النظام. npm install -g lighthouse 4- نفّذ الأمر التالي لتنفيذ تدقيق: lighthouse <url> 5- لعرض خيارات التدقيق: lighthouse --help تشغيل وحدة Node برمجيا راجع استخدام هذا الرابط لمثال على تشغيل Lighthouse برمجيًّا على صورة وحدة Node. تشغيل Lighthouse عن طريقة إضافة Extension على Chrome ملحوظة: يُفتَرض استخدام خطة سير عملا مبنية على أدوات المطوِّر في Chrome بدلا من هذه الإضافة، إلا إذا كان لديك سبب خاصّ. تُوفّر أدوات المطوّر في Chrome نفس الفوائد التي توفّرها الإضافة، علاوةً على كون الأدوات لا تحتاج لتثبيت. اتبع الخطوات التالية لتثبيت الإضافة: نزّل Google Chrome للأجهزة المكتبية. ثبّت إضافة Lighthouse من مخزن إضافات Chrome. اتبع الخطوات التالية لتشغيل تدقيق: استخدم Google Chrome لتصفّح الصفحة التي تودّ تدقيقها. انقر أيقونة Lighthouse. يُفتَرَض أن توجد الأيقونة بعد شريط العنوان في Chrome. إن لم تكن هناك، افتح القائمة الرئيسية في Chrome وانقر على الأيقونة في أعلى القائمة. تتمدّد قائمة Lighthouse بعد النقر على الأيقونة. انقر على الزرّ Generate report. يدقّق Lighthouse الصفحة النشطة ثم يفتح لسانًا جديدًا يحوي تقريرًا عن نتائج تدقيق الصفحة. شارك التقارير واعرضها على الشبكة استخدم Lighthouse Viewer (عارض Lighthouse) لعرض التقارير ومشاركتها على الشبكة. شارك التقارير بصيغة JSON يحتاج Lighthouse Viewer إلى مُخرج بصيغة JSON من تقرير Lighthouse. تشرح الخطوات أدناه كيفية الحصول على مُخرج بصيغة JSON، حسب طريقة العمل التي اخترتها. بالنسبة لأدوات التطوير: انقر على تنزيل التقرير (السهم المتّجه إلى الأسفل). سطر الأوامر: lighthouse --output json --output-path <path/for/output.json> إضافة Chrome: انقر على زرّ التصدير Export ثم Save as JSON. لمعاينة بيانات التقرير: افتح Lighthouse Viewer في متصفّح Chrome. اسحب ملف JSON إلى العارض ثم أفلته، أو انقر في أي مكان في العارض لفتح متصفّح الملفّات لديك واختيار الملفّ. مشاركة التقارير عبر GitHub Gists إن لم تكن ترغب في تمرير تقاريرك يدويّا بصيغة ملفات JSON فيمكنك مشاركتها بسريّة عبر خدمة GitHub Gists. أحد فوائد الخدمة هو الحصول على تحكّم مجاني في الإصدارات Version control. اتبع الخطوات التالية لتصدير التقارير إلى GitHub Gists عبر إضافة Lighthouse على Chrome: انقر على Export ثم Open In Viewer. يُفتَح التقرير في العارض المتوفّر على الرابط https://googlechrome.github.io/lighthouse/viewer/. انقر على المشاركة Share في العارض. ستطلُب منك نافذة منبثقة في المرة الأولى السماح بالوصول إلى بياناتك الأساسية على GitHub، وصلاحية القراءة والكتابة على GitHub Gists. أنشئ Gist يدويًّا ثم انسخ التقرير بصيغة JSON وألصقه، إن أردت تصدير التقرير إلى GitHub Gists من سطر الأوامر. يجب أن ينتهي اسم Gist الذي يحوي مُخرَج JSON باللاحقة lighthouse.report.json. راجع هذا الرابط لمثال على كيفية توليد مُخرَج JSON من سطر الأوامر. اختر إحدى الطريقتيْن التاليّتين لعرض تقرير محفوظ على GitHub Gists: . أضف ‎?gist=<ID>‎ إلى رابط العارض، حيثُ ID هو معرّف Gist: https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>‎ افتح العارض وألصق فيه رابط Gist المساهمة في Lighthouse Lighthouse مفتوح المصدر، ويرحّب مطوّروه بالمساهمة فيه. تحقّق من متتبّع المشاكل Issues tracker في المستودع للعثور على علل (Bugs) يمكنك إصلاحها، أو تدقيقات يمكنك إنشاؤها أو تحسينها. يعدّ متتبّع المشاكل مكانا جيّدا للنقاش حول قياسات التدقيق أو أفكار لتدقيقات جديدة أو أي أمر آخر له علاقة بأداة Lighthouse. ترجمة - بتصرّف - للمقال Lighthouse من موقع مطوّري Chrome.