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

تعتمد صفحات الويب على HTML التي تُحدد محتوى الصفحة.تعدّ CSS لغة منفصلة عن HTML ودورها هو تحديد الشكل والمظهر الخاص بصفحة الويب. الشفرة الخاصّة بـ CSS عبارة عن قواعد ساكنة. كل قاعدة تأخذ مُحدِدًا Selector أو أكثر، وتُرجع قيم لمجموعة من الخصائص الشكلية. تُطبَّق هذه الخصائص بعد ذلك على عناصر صفحة الويب المشار إليها بواسطة المحددات. ملاحظة: لتعلم CSS بطريقة صحيحة، ولأن مخرجات هذه اللغة عبارة عن نتائج مرئية، يجب عليك ممارسة كل ما تتعلمه وننصحك بتطبيقه على موقع dabblet. الهدف الرئيسي من هذا المقال التركيز على كيفية الكتابة الصحيحة مع بعض النصائح. سنتناول في هذا المقال العناوين التالية: التعليقات. المحددات. الخصائص. طريقة استخدام CSS في الصفحة. الأولوية أم التتالي. استعلامات الميديا. التوافقية. التعليقات توجد طريقة واحدة لكتابة التعليقات في ملف CSS وهي كتابة التعليقات بين الرمزين /* */. /* التعليقات تُتكتب هنا ولا يوجد نمط لكتابة التعليق في سطر واحد سوى هذه الطريقة */ المحددات يُستخدم المحدد في استهداف عنصر في صفحة، ويُكتَب بالطريقة التالية: selector { property: value; /* خصائص أخرى*/ } لنفترض وجود العنصر التالي من نوع div في صحة ويب: <div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' /> تستطيع تطبيق قاعدة CSS على هذا العنصر باستخدام أحد أسماء الأصناف Classes التي ينتمي إليها في الصفحة: .class1 { } أو باستخدام جميع أسماء الأصناف المطبَّقة عليه: .class1.class2 { } أو باستخدام نوع العنصر: div { } أو باستخدام الرقم الخاص بالعنصر: #anID { } نستطيع تحدد العنصر من الصفحة في حال وجود صفة Attribute باسم معين: [attr] { font-size:smaller; } أو في حالة وجود صفة بقيمة معينة: [attr='value'] { font-size:smaller; } في حالة وجود صفة معينة في عنصر، ونريد تطبيق قاعدة على هذا العنصر بشرط وجود قيمة تبدأ منها الصفة نستخدم الطريقة التالية: [attr^='val'] { font-size:smaller; } أما إن كان الشرط يتعلّق بقيمة معينة تنتهي بها الصفة: [attr$='ue'] { font-size:smaller; } نستطيع تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها بمسافة فارغة (يوافق الشرط أدناه العناصر التي لديها صفة otherAttr تساوي “foo” أو “foo bar” أو “foo bar far” …إلخ): [otherAttr~='foo'] { } أو تحديد العنصر في حالة احتواء الصفة على قيمة معينة ضمن قائمة قيم منفصلة عن بعضها برمز – كما في المثال التالي: [otherAttr|='en'] { font-size:smaller; } نستطيع جمع أكثر من مُحدد ببعضها للحصول على مُحدد مُركز كما في المثال التالي: div.some-class[attr$='ue'] { } من الممكن أيضا أن تقوم بتحديد عنصر يكون تابعا (ابن) لعنصر آخر: div.some-parent > .class-name { } في المثال السابق، يكون العنصر الابن على مستوى واحد أسفل من العنصر الأب. تستطيع أن تُحدد عنصر من سلالة عنصرآأخر (الأب)، وهذا يعني من أي مستوى أسفل من مستوى العنصر الأب (ليس شرطا أن يكون مستوى واحد أقل): div.some-parent .class-name { } يختلف المُحدد التالي عن المُحدد السابق لوجود مسافة فاصلة بين الأسماء: div.some-parent.class-name { } نستطيع تحديد العنصر بناءً على عنصر آخر مجاور له باستخدام الطريقة التالية: .i-am-just-before + .this-element { } أو بناءً على أي عنصر يسبق العنصر الذي نريده: .i-am-any-element-before ~ .this-element { } توجد بعض المُحددات تسمى الأصناف الزائفة pseudo classes تطبَّق على العنصر عندما يكون بحالة محددة، فمثلا، نستطيع تحديد عنصر عندما يمر عليه المؤشر: selector:hover { } أو رابط تمت زيارته: selector:visited { } أو لم تتم زيارته: selected:link { } أو عنصر في حالة التركيز: selected:focus { } لتحديد أول عنصر تابع لعنصر: selector:first-child {} لتحديد آخر عنصر تابع لعنصر: selector:last-child {} نستطيع تنسيق أجزاء محددة من العنصر باستخدام العناصر الزائدة Pseudo elements، فمثلا، نستخدم before لإضافة محتوى قبل محتوى عنصر معين: selector::before {} وafter لإضافة محتوى بعد محتوى عنصر معين: selector::after {} في أماكن معينة، يُستخدم رمز * كحرف “بدل” لاختيار كافة العناصر. * { } /* كل العناصر */ .parent * { } /* كل التابعين */ .parent > * { } /* كل الأبناء */ الخصائص selector { وحدات الطول إما مطلقة أو نسبية. الوحدات النسبية: width: 50%; /* نسبة من عرض العنصر الأب */ font-size: 2em; /* مضاعفة حجم الخط الخاص بالعنصر نفسه*/ font-size: 2rem; /* مضاعفة حجم الخط حسب حجم الخط الخاص بالعنصر الأب */ font-size: 2vw; /* مضاعفة حجم الخط بالنسبة ل 1% من عرض المساحة المرئية للمستخدم*/ font-size: 2vh; /* من الارتفاع*/ font-size: 2vmin; /* مضاعفة حجم الخط لأصغر قيمة من الارتفاع أو العرض*/ font-size: 2vmax; /* لاكبر قيمة */ القيم المطلقة: width: 200px; /* بكسل */ font-size: 20pt; /* نقطة */ width: 5cm; /* سنتميتر */ min-width: 50mm; /* مليميتر */ max-width: 5in; /* إنش */ الألوان: color: #F6E; /* صيغة سداسية قصيرة */ color: #FF66EE; /* صيغة سداسية طويلة */ color: tomato; /* حسب الاسم */ color: rgb(255, 255, 255); /* كقيم rgb */ color: rgb(10%, 20%, 50%); /* كنسبة rgb */ color: rgba(255, 0, 0, 0.3); /* كقيم rgba */ color: transparent; /* الشفافية صفر*/ color: hsl(0, 100%, 50%); /* كنسب hsl */ color: hsla(0, 100%, 50%, 0.3); /* كنسب hsla */ الحدود: border-width:5px; border-style:solid; border-color:red; border: 5px solid red; /* اختصار القواعد السابقة في قاعدة واحدة */ border-radius:20px; /* خاصية ابتداء من css3 */ الصور: background-image: url(/img-path/img.jpg); الخطوط: font-family: Arial; إذا كان اسم الخط به مسافات فيجب وضع الاسم بين علامتي تنصيص: font-family: "Courier New"; في نسرُد لائحة من الخطوط وإن لم يجد المتصفح الخط، يستخدم نوع الخط التالي: font-family: "Courier New", Trebuchet, Arial, sans-serif; } دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن طريقة استخدام CSS في الصفحة توجد ثلاث طرق لإجراء عملية تنسيق صفحة الويب وهي كالتالي: 1- تضمين اسم الملف بالامتداد .css داخل العنصر head في بداية صفحة html كالتالي (وهي الطريقة المُوصى بها): <link rel='stylesheet' type='text/css' href='path/to/style.css'> 2- كتابة قواعد css مباشرة في ملف الصفحة: <style> a { color: purple; } </style> 3- تنسيق العنصر بطريقة مباشرة: <div style="border: 1px solid red;"> </div> الأولوية أم التتالي العنصر الواحد في صفحة الويب قد يكون مُستهدفا (محددا) من قبل مجموعة متعددة من المحددات، وقد يكون هناك تعديل أو تحديد لقيمة خاصية تابعة لهذا العنصر من قبل أكثر من مُحدد. في مثل هذه الحالات، فإن قاعدة واحدة سيكون لها الأولوية في التطبيق على هذا العنصر. القواعد التي تمتلك محددات مُفصلة لها أولوية على المحددات ذات التفاصيل الأقل، والقواعد التي تأتي في النهاية تقوم بالتعديل على القواعد التي قبلها (وهذا يعني أنه في حالة تضمين ملفي css وكلاهما يقومان بتحديد عنصر والتعديل على خصائصه، فإن ترتيب ربط الملفات يحكم تنسيق العنصر حسب قاعدة الترتيب المذكورة والتي تُسمى التتالي أو التتابع). استعلامات الوسائط Media queris استعلامات الوسائط هي خاصية بدأت من CSS 3 وتسمح لك بتحديد متى تُطبَّق قواعد CSS، مثلا عند الطباعة، أو عند كثافة وأبعاد شاشة معينين. أمثلة: هذه قاعدة CSS تُطبَّق على كل الأجهزة. h1 { font-size: 2em; color: white; background-color: black; } يعدّل استعلام الوسيط التالي القاعدة السابقة عند الطباعة: @media print { h1 { color: black; background-color: white; } } يجعل استعلام الوسيط التالي حجم الخط أكبر في شاشة بعرض 480 بكسل على الأقل: @media screen and (min-width: 480px) { h1 { font-size: 3em; font-weight: normal; } } تحتوي استعلامات الوسائط على الخصائص التالية: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color,color-index, monochrome, resolution, scan, grid. من الممكن أن يسبق أغلب الخصائص السابقة خاصيتي min- و max-. خاصية الدقة Resolution غير مدعومة على الأجهزة القديمة، وبدلا من ذلك استخدم خاصية device-pixel-ratio. تحاول كثير من أجهزة الجوال والأجهزة اللوحية عرض الصفحة كما لو كانت على سطح المكتب العادي إلا إذا قمت بإضافة الصفة viewport بالشكل التالي: <head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> </head> التوافقية أغلب المميزات والخصائص الموجودة في CSS2 وكثيرا من CSS3 موجودة في كل المتصفحات والأجهزة، ولكن ينصح من باب الممارسة الأفضل أن يتم الفحص قبل استخدام الخاصية الجديدة. ترجمة – بتصرّف – للمقال Learn X in Y minutes Where X=CSS.

إن كنت مطور ويب فأنت تعاني حتماً من مشكلة اكتشاف الأخطاء ومعالجتها أو ما يعرف بـ debugging، فمثلاً إذا كان لديك خطأ في شيفرة JavaScript فهناك احتمال ضئيل أن يظهر لك المستعرض رقم السطر الذي يحوي الخطأ، وحتى إن أظهره لك فليس من الضروري أن يكون هذا السطر هو المسبب للخطأ. وإذا ما اتجهنا نحو أخطاء ومشاكل مظهر الصفحة CSS فالأمر أشبه بالتنجيم. فمثلاً إذا واجهت مشكلة في تنسيق الصفحة فالحل الوحيد هو العودة إلى ملف CSS والقيام ببعض التعديلات ومن ثم الرجوع إلى المستعرض لرؤية ما إذا كانت هذه التعديلات قد حلت المشكلة، وهكذا في رحلة مكوكية بين المحرر والمستعرض حتى تجد المشكلة. لكن باستخدام أدوات المطور DevTools تستطيع تتبع مشاكل المظهر بفعالية، واكتشاف أخطاء جافاسكربت بسهولة، بالإضافة إلى أنها تقدم لك إضاءات ومعلومات حول الأداء والتي يمكن استخدامها لتحسينه. الشيفرة المصدرية الخاصة بمثال الرزنامة

أعتقد بأنّني لست في حاجة إلى أن أخبركم بأن تسعير الويب هو عملية حرجة جدًّا، فهو يتطلب الكثير من الرؤية، الخبرة والحظ (المقصود بالحظّ هنا هو التّجربة والخطأ). هناك عدّة طرق تسمح لنا إعطاء قيمة نقدية لما نقوم به، ولكلٍ منها إيجابيات وسلبيات. قد يبدو من النظرة الأولى أن نماذج التسعير تبدأ وتنتهي في مرحلة اقتراح المشروع، ذلك أن التسعير هو مُجرد مُفاوضات تجارية. لكن سواء إن كنا نتحدث عن التصميم، التطوير، أو منهجيات العمل، فإن آليات عملنا ستؤثر على دوافعنا، وتؤثر على النتائج وغالبًا يكون التأثير في جميع مراحل المشروع. سوف نتطرّق إلى كلّ من مُحفزات العميل والوكالة Agency في مقارناتنا بنماذج التسعير، وبالتّالي يُمكنك أن تحكم فيما إذا كانت تلك الدوافع ستُساعدك على القيام بعمل أفضل مع عملائك. إن جميع أنظمة التسعير هذه تعمل مع نفس المُتغيرات: السعر، الوقت والنّطاق scope. في بعض الأنظمة مثل التسعير الساعي تعتمد هذه المُتغيرات بشكل مُباشر على بعضها البعض (على سبيل المثال: إذا عملت لساعة فسوف أتقاضى أجرة تلك الساعة وأقدم قيمة ساعة من العمل). وفي حالات أخرى مثل الأسعار الثابتة والتسعير بالقيمة فإن العلاقات بين هذه المُتغّيرات لا تكون بالضّرورة خطيّة (على سبيل المثال: يُدفع لي مبلغ من المال لتحقيق مجموعة من النتائج بغض النظر عن الوقت الذي سأصرفه لتحقيق تلك النتائج). إن هذه الاعتماديات dependencies هي التي تحدّد المخاطر الكامنة في كُل نظام مع إمكانيات الربح، وكل الاختلافات يُمكن أن تكون مُحيّرة جدًا. إن خبرة شخص واحد بالكاد تكون كافية لفهمها جميعها بشكل جيّد، لذا فقد قُمت بالاستعانة ببعض من الأصدقاء من وكالات ويب مُختلفة المستويات لمعرفة طريقة تعاملهم مع قضية التّسعير. كما هو الحال مع مُعظم الأشياء في الحياة فإنه لا يوجد حلّ مثالي، فإذا كنت ترغب في الحصول على مال فعليك أن تعمل شيء ما. لذا دعونا نُلقي نظرة على بعض الطرق المُختلفة التي يعتمدها الناس في تسعير مشاريع الويب. التسعير الثابت في المشاريع ذات السعر الثابت، تتّفق أنت والعميل مُقدمًا على تكلفة مُجمل المشروع. إن كثيرًا من الناس يصلون إلى هذا السّعر من خلال تقدير عدد الساعات التي يعتقدون بأنهم يحتاجونها لتنفيذ المشروع، ومن ثم ضرب هذا العدد بتسعير الساعة الواحدة، وتلك التكلفة ستكون ما سيدفعه العميل بغض النظر عن عدد الساعات التي سيتم قضاؤها بالفعل في تنفيذ المشروع. حافز العميلعندما يكون سعر المشروع ثابتًا فإنّ ما سيتغيّر هو نطاق العمل، وهو ما سيُشجّع العملاء إلى مُحاولة الحصول على أقصى قدر من النتائج مُقابل هذه التكلفة. يُمكن التّعامل مع هذه الحالة من خلال التّوصّل إلى اتّفاق على مدّة زمنية قُصوى للمشروع وهو ما سيُبقي طلبات التّعديل محدودة. حافز الوكالةأما من ناحية الوكالة فإن حافزك هو أن تكون فعالًا قدر الإمكان لتحقيق أقصى قدر من النتائج مع تخفيض الوقت الذي ستستغرقه. وقت أقل + مزيد من المال = قدر أكبر من الأرباح الإيجابياتبما أنك تعلم بالضّبط مقدار المال الذي ستجنيه فإنه يُمكن التنبؤ بالإيرادات إلى حدٍ ما، ولأن الإيرادات ليست مُرتبطة بالوقت التي ستقضيه في العمل فإن الربح يُحتمل أن يكون أكبر بالمُقارنة مع النموذج المُعتمِد على التّسعير مُقابل الوقت وخصوصًا عندما تكون التكلفة عالية والجدول الزمني قصير. السّلبياتإن نفس العوامل التي يُمكن أن توفّر إمكانية أكبر للربح ستخلق إمكانية أكبر للخسارة. التحديد بدقة ما سيحصل عليه العميل مُقابل ما سيدفع يُصبح أولوية وتحديد هذا الأمر بشكل دقيق يُمكن أن يكون أكثر صعوبة مما يبدو عليه. تشرح Webb مديرة الإستراتيجية في "Webmeadow" كيفية تعريفها للنّطاق scope مع عملائها كالتّالي: الوصول إلى هذا التعريف في المقام الأول قد يكون عملًا شاقًا. وإن العمل الشاق هو شيء ينبغي أن تتقاضى مالًا لأجله. القيام بهذا الأمر سيكون مُفيدًا لأي مشروع، لكن بالنسبة للمشاريع ذات السعر الثّابت فإنه يُمكن أن يُصبح ضروريًا. إن توفير الموارد لمشروع مُحدّد السعر يُمكن أن يكون أيضًا صعب التقدير لأن معرف الجُهد السّاعي الذي يحتاجه نطاق مُعيّن ليست عملية بسيطة. لكن الصعوبة الأساسية مع السعر الثابت تكون من خلال الصراع الطبيعي بين حافز العميل لطلب المزيد وحافز الوكالة لتوفير الأقل. من أجل أن يكون المشروع ذو السعر الثابت ناجحًا يجب أن يتمّ التّفاهم حول الأمر بشكل واضح من البداية. تذكّر بأن نقاشات تحديد ما يقع وما لا يقع ضمن نطاق المشروع ليست سوى نقاشات فقط، وتذكّر دائما بأنّ المزيد ليس دائمًا أفضل، وبأن من بين مهامك هو أن تُساعد جميع من يعمل على المشروع على التّركيز على تقديم نتائج أفضل وليس على تقديم نتائج أكثر فقط. التسعير بالساعة في الجوهر، التسعير بالساعة بسيط للغاية، فإذا عملت لساعة سوف تتقاضى أجرًا لساعة، فالتسعير الساعي مثل كل التسعير على أساس الوقت يُشير إلى أن ما يتم الدّفع مُقابله هو خدمة أكثر من كونه مُنتجًا. Rob Harr المدير الفني في شركة "Sparkbox" يوضّح كيف أنهم يميلون للعمل وفق المشاريع الساعية بقوله: حافز العميللدى اعتماد التّسعير الساعي، يتشجّع الزبائن لطلب العمل في الحالات التي يبدو فيها واضحًا بأنه يستحق التكلفة الساعية فقط. بما أنه لم يتمّ التفاهم على مشروع واضح المعالم لتنفيذه فإنه ومع كل ميزة أو مَهمة يرغب صاحب المشروع في طلبها سوف يسأل نفسه "هل فعلا يستحق هذا أن أنفق مالي عليه أو يجدر بي توفيره لشيء آخر؟" تأخير المشاريع لا يُمثّل مُشكلًا للعميل إذ أنه لا يوجد أي خسارة مالية خلال هذا الوقت. حافز الوكالةكلما عملت الوكالة أكثر كلما زاد ما تتقاضاه وبالتالي وبكل وضوح هذا الأمر سيدفع الوكالة ببساطة إلى رغبتها في العمل بقدر المستطاع، الأمر الذي يُمكن أن يتم الحد منه من خلال بضعة عوامل بما في ذلك الميزانية أو عدم تجاوز المدة الزمنية في المشروع. تأخير المشاريع Project delays هو أحد المشاكل الرئيسية التي تُواجه الوكالة، كونها ستخسر دخلًا خلال هذه الفترات. الإيجابياتكل ساعة يقضيها عضو في الفريق ستكون مدفوعة الأجر، لذا فإن الخطورة في هذا النموذج مُنخفضة للغاية. فإذا كانت الشركة تُعاني من تراجع في الفوائد فإن هذا الأمر يُعدّ طريقة جيّدة للعودة إلى المسار الصحيح. السلبياتعلى خلاف نماذج السعر الثابت فإن ما يُكتسب هنا محدود بمقدار العمل الذي يُمكنك القيام به، ولا يُمكن للأرباح أن تزداد إلى بزيادة أجرة الساعة (الذي يُمكنه أن يرتفع بقدر ما يحتمل السوق) أو من خلال زيادة حجم الفريق. بما أن الوكالة تتقاضى الأجر فقط عندما تعمل فإن هذا يعني عدم توازن كبير في كيفية تأثير تأخير المشاريع على كلا الطرفين. لذا فإن العملاء الذين ليسوا على عجلة لإنهاء العمل أو لا يملكون هيكلية صنع قرار قد لا يقلقون حيال التأخيرات الطويلة مما قد يرهن وضع الوكالة المادّي. هذا يُمكن الحديث عنه بشكل ما من خلال وضع جملة من الشروط حول ما يحدث خلال فترات التأخير، كأن يدفع العميل رسومًا أو أن يؤخّر المشروع بشكل يسمح للوكالة أن تأخذ عمل جديدًا لملء الفراغ في جدول عملها. رغم هذه الإجراءات فإن من شأن التأخيرات أن تُسبّب خسائر ماديّة للوكالة. التسعير الأسبوعي أو الشهري بالرغم من أنه يشبه التسعير الساعي بطرق عديدة إلّا أن التسعير الأسبوعي أو الشهري يمتلك بعض من الاختلافات الواضحة، فبهذين النموذجين تفترض التكلفة بأن الناس يعملون عددًا مُحددًا من الساعات كل أسبوع أو شهر وأن العميل يُحاسَب وفقًا لعدد الساعات بغض النظر فيما إذا كانت الساعات التي صُرفت أقل أو أكثر من المُفترض. يُوضّح Trent Walton مُؤسس " Paravel" لماذا يميل إلى هذا النهج ويُشير بقوله: حافز العميليميل العملاء لجعل الوكالة تعمل قدر المُستطاع خلال الفترة الزمنية للحصول على أقصى قدر من العمل أو القيمة. يمكن كبح طلبات العميل عبر تسقيف عدد الساعات التي يُمكن قضاؤها خلال الأسبوع والتأكيد على ضرورة عدم العمل خلال الليل أو خلال عطلة نهاية الأسبوع. من فائدة العميل أيضًا عدم السّماح للمشروع للتّعرّض للتأخير. حافز الوكالةمن جانب الوكالات فإنّها تُدفع إلى أن يكون مردودها عاليًّا لتحقيق أقصى نتائج كل أسبوع وذلك خلال قضاء ساعات أقل في إنجاز هذه المهام. طالما أنه تتمّ مقارنة النّتائج بما هو مُتوّقع فلا يُشكّل ذلك أي إشكال. في الشّركات التي تنتهج هذا النّهج فإنه عادة ما يتوافق عدد السّاعات المفترض في البداية مع عدد الساعات الفعلي الذي يتم عمله، رغم وجود زيادة أو نقصان ما بين الحين والآخر. الإيجابياتمعرفة أن فترة زمنية محجوزة ومدفوعة الأجر تُبقي الخطر المالي مُنخفضًا للغاية. بحكم أنّه يتمّ الدّفع للوكالة بشكل أسبوعي أو شهري فإن العملاء يميلون إلى القيام بكل ما هو ضروري لتفادي أي تأخيرات يُمكنهم السيطرة عليها من جانبهم، الأمر الذي يُزيل نهائيًا خطر خسارة الوكالة للمال عندما يتم إيقاف المشاريع، لكن أيضًا يتطلب من الوكالة أن تستخدم آلية عمل لا تُشجّع التأخير. في شركة "Bearded" على سبيل المثال انتقلنا إلى آلية عمل تعتمد على تسليم أعمال أصغر حجمًا وبشكل مُتواصل بحيث يُمكننا الاستمرار في العمل بينما ننتظر تعليقات وآراء العميل. السّلبياتمثلما هو عليه الحال مع التّسعير السّاعي، فإن ربح الوكالة مُحدّد بالسّعر الأسبوعي أو الشهري الذي يتقاضوه. ولزيادة الدخل أكثر فإن الحّل هو إما رفع التّكلفة لنفس "كمية" العمل أو توظيف مزيد من الأشخاص. التّسعير بالقيمة التّسعير بالقيمة هي طريقة تكون فيه تكلفة المشروع مُستوحاة من فهم العميل لقيمة العمل. قد يكون السّعر ثابتًا وقد يُحسب بناءً على التّأثير الذي سيتركه العمل (أقرب ما يكون من نظام التّراخيص royalty system) Dan Mall مُؤسس "SuperFriendly" يُوضّح الآلية التي يعتمدها في التّسعير الثّابت: يُمكن تلخيص الفكرة التي يرغب Dan Mall في إيصالها كالتّالي: إن كان الفائدة التي ستجينها الشّركة من وراء العمل الذي ستقوم به يُقدّر بملايين الدّولارات فإنه من غير المعقول أن لا يتجاوز تسعيرك بضعة آلاف من الدّولارات فقط، حيث أنّه يجب الأخذ بالحسبان القيمة التي تُقدّمها للشّركة مما قد ينتج عنه سعر ثابت أعلى. طريقة أخرى للتسعير بالقيمة تتمّ عبر ربط تكلفة المشروع مُباشرة بنتائجه. يُمكن تقييم النّتائج بأيّة مقاييس يتمّ الاتّفاق عليها مُسبقًا، مثل التغيرات في الدخل، مُعدل زيارات الموقع أو في عدد المُستخدمين. يُمكن اعتماد هذه الطّريقة كإضافة على نظام تسعير آخر، ويُمكن تطبيقه على التّسعير السّاعي أو على التّسعير الثّابت على حد سواء. أودّ الإشارة إلى أنّه خلال بحثي لتحضير هذا المقال لم أتصادف مع من يستخدم هذا النّوع من التّسعير، لكنه يُمكنك أن تعرف المزيد حول الأمر بقراءة هذا المقال Pricing Strategy for Creatives. حافز العميليرتبط الأمر بالنظام الآخر الذي تستخدمه في التّسعير بالموازاة مع التّسعير بالقيمة. في المُقابل إذا أدرك العميل النّتائج المُتوقّعة من المشروع فإنّه سيُركّز بشكل عام على الطّريقة التي سيؤّثر فيها المشروع على تلك النّتائج. حافز الوكالةعندما يُربط الدّفع بوحدات قياس مُعيّنة فإنّ الوكالة ستُركّز أكثر على العمل الذي سيُؤثّر بشكل كبير على تلك القياسات. مثلما هو عليه الحال مع حوافز العميل فإنّ باقي حوافز الوكالة ستكون مُرتبطة بالحوافز المُتعلّقة بنظام التّسعير المُستخدم إلى جانب نظام التّسعير بالقيمة. الإيجابياتبسبب العلاقة اللاخطية بين العمل والدخل فإن هذه الطّريقة تملك إمكانية تحقيق أكبر ربح مُمكن. وطالما أن التّسعير معقول فإنّ المخاطر المالية المُرتبطة به مُنخفضة. السلبياتبحكم أن التسعير بالقيمة مُرتبط بأمور تكون خارج سيطرتك فإنّه مُعقّد ولا يُمكن بالضّرورة التّنبؤ بنتائجه. إذا كان الدخل مبنيًا على قياس الأداء المُستقبلي فإن تحديد مداخيلك بدقة يتطلّب معرفة وحدات القياس تلك إضافة إلى جُهد إضافي من طرفك. هناك أيضًا إمكانية تأخير الدفع إلى أجل آخر مع احتمال عدم الحصول عليه من أساسه. وطالما كان السّعر القاعدي المُتّفق عليه كافيًا لتغطية مصاريف التّشغيل فإنّ ذلك من شأنه أن يُقلّل من نسبة القلق المُرافقة للأمر. لدى التّسعير بالقيمة، هناك أيضًا حاجة إلى تقييم قيمة العمل قبل الاتفاق على السعر. لهذا السبب – كما هو الحال مع مشاريع السعر الثابت- فإنّ هذا التّسعير ينجح أكثر لما يتعلّق بمشروع إضافي يأتي بعد مشروع أوّلي يسمح باكتشاف الوضع والتّمهيد لأرضية عمل مُشتركة. يشرح كل منPatty Toland و Todd Parker المؤسّسان الشّريكان في Filament Group طريقة قيامها بذلك: أيّها أفضل وأنسب؟إذن ما هو النهج الأفضل بالنسبة لك؟ الأمر نسبي. تكلمت مع الكثير من الأشخاص الناجحين شديدي الذكاء، الذين ينتهجون مناهج مُتنوعة مُختلفة جدًا، كل نهج له فوائده وأضراره التي ينبغي الحذر منها، وكل نهج يبدو أنس لأشخاص دون غيرهم وذلك تبعًا لشخصياتهم، ميولاتهم، وطريقة عملهم. في النهاية يعود القرار إليك. حدسك وخبرتك وبعض التّجربة ستساعدك على اختيار أفضل طريقة لك ولفريق عملك ولعملائك. لكنه من المُحتمل جدًا بعد أن تجد النّظام الأنسب لك فإنّك ستعتمد إلى إدخال تغييرات عليه، فطالما أن نشاطك التّجاري ينمو ويتطوّر فإن الأنظمة التي يتبنّاها تنمو وتتطوّر أيضًا. ترجمة -وبتصرّف- للمقال Pricing the Web لصاحبه Matt Griffin

يتحدث الجميع تقريبًا في عالم العمل عن حالات الصعود والهبوط المُفاجئ، أعني تلك الفترات التي يكون لديك فيها الكثير من الأعمال التي لا تعرف كيف ستنهيها، ثم تأتي فترات أخرى تجاهد فيها للحصول على عملاء. ويذكر تقرير "53 مليون" من اتحاد المستقلين أن الحصول على أعمال وتحقيق ثبات في الدخل هما أكبر الحواجز التي تواجه المستقلين وتمنعهم من إنجاز المزيد من الأعمال. وفي المقابل فإن كسب المزيد من المال والتحرر من الجداول الروتينية يأتيان على قمة المحفزات التي تدفع الناس إلى العمل الحر، وما يريده المستقلون هو تحقيق التوازن بين الجانبين. ولديك كمستقل في كل الأحوال طرقًا تجني بها مالًا رغم تأرجح كثافة الأعمال في جدولك بين تلك الأيام التي لا تجد وقتًا تحك فيه ظهرك والأيام التي تسمع فيها صوت أفكارك من الهدوء وقلة الأعمال. وستساعدك تلك الأموال في هذه الأوقات التي لا يكون لديك فيها أعمال كثيرة في تغطية نفقاتك، حتى لو لم يكن هدفك بالنهاية هو جمع المال. ويمكنك أن تستغل ذلك الوقت –أي الذي لا تكون لديك فيه أعمال كثيرة- في العمل على مشاريع تحبها، التخطيط لأعمال مستقبلية، أو الاسترخاء بالطبع. وإن أكثر الحلول بداهة لكسب المال هو أن تعمل أكثر، أليس كذلك؟ ربما يمكنك ذلك بالفعل، لكنك ستجهد نفسك بتلك الطريقة بشكل يجعلك تخسر أعمالًا (وأموالًا أيضًا) على المدى الطويل، كما ستخسر أيضًا الحرية والمرونة اللتيْن كنت تنشدهما من وراء العمل الحر، وإليك الآن خمس طرق غير العمل الزائد، تكسب بها مالًا أكثر كمستقل: 1. ركز على الأعمال ذات القيمة العالية ستتعلم مع الوقت كيف تعرف تلك الأعمال التي تعود عليك بأفضل عائد دون أن تستهلك الكثير من الوقت، وأيها تستهلك وقتك وطاقتك الذهنية ولا تعود عليك بدخل يساوي ما أنفقته فيها من مجهود. قد يكون العمل أو المشروع نفسه أحيانًا هو السبب في إهدار طاقتك، وأحيانًا أخرى يكون العميل المتعِب هو السبب، لذا إن أردت كسب المزيد من المال، اصرف تركيزك إلى الأعمال ذات القيمة العالية. ولن تجد صعوبة في تحديد أي من تلك الأعمال ستعود عليك بأفضل عائد من استثمار وقتك وجهدك، عليك فقط أن توثِّق تجربتك مع عملائك أولًا بأول، سجل ملاحظات عن أسلوبهم في التواصل قبل وأثناء المشروع. سيساعدك ذلك في تسليط الضوء على النمط الذي يتبعه العملاء الذين يحملون أعمالًا عالية القيمة –عائدها مرتفع مقارنة باستثمار مواردك للعمل عليها-، فتستطيع بعدها أن تتنبأ مبكرًا بمثل تلك الأعمال، وتقبل المشاريع من أصحابها باطمئنان. كذلك، فإن الطريقة التي تمت بها هيكلة العمل أو المشروع تؤثر أيضًا في قيمته، فنوع المشروع الذي يحمل أكبر قيمة لك –سواءٌ أكان بأجر ثابت أو بعدد الساعات، مرة واحدة أو مستمر- يعتمد على طبيعة العمل الذي تقوم به، وستتعلم مع الوقت والخبرة أيَّ المشاريع التي يجب تسعيرها بعدد الساعات وأيها بأجر ثابت. فعلى سبيل المثال، فإن مصمم الشعارات سيفضِّل نوعية المشاريع القصيرة الأجل وبأجر ثابت، على عكس صانع المُحتوى مثلًا. راجع هذا الدليل إن شئت كي تعرف أي وسيلة أنسب لك في اختيار نوع التسعير لكل مشروع. 2. نظِّم سير العمل بشكل احترافي وأتمت ما يُمكن أتمتته إن وقتك من مال أيها المستقل، فكلما أنشأت آليات ونظمتها معًا كلما أنجزت أكثر في وقت أقل، واعلم أن إزاحة العمل المُشغِل عن طريقك لا تقل أهمية عن إزاحة المشاريع ذات القيمة المنخفضة. ولفعل ذلك، حدد المهام التي تتكرر لكل مشروع وصمم هيكلًا يسمح بمضاعفة تلك المهام بسهولة وسرعة، فمثلًا يمكنك حفظ وتخزين قوالب InDesign التي تستعملها بكثرة، إنشاء اختصارات لبرامجك المفضلة، أو حفظ مقاطع نصية، إلخ. أما إن كان عملك الحقيقي ليس به عناصر مكررة يمكن تنظيمها، فابحث عن طرق لتنظيم أجزاء أخرى من حياتك بكفاءة. فهناك مثلًا الكثير من التطبيقات التي تغنيك عن القيام بالعديد من المهام المكررة مثل المهام الإدارية، الاجتماعات، القياسات (Metrics)، وغيرها. وسيمنحك ذلك مزيدًا من الوقت لما يسميه كالفن نيوبورت –أستاذ مساعد بقسم علوم الحاسوب، جامعة جورج تاون- بالعمل العميق (عمل قيِّم وإبداعي)، ويقلل من وقتك على الأعمال السطحية (الأعمال المُشغِلة). 3. ابدأ مشروعًا جانبيًا أو جهز خدماتك لتعود عليك بدخل خامل يمكنك كمستقل بناء قنوات دخل خامل تدر عليك مالا بشكل متواصل، بل قد وجد بعضهم طرقًا لكسب المال من الأمور التي يحبونها "شغفهم" عبر العمل الحر، ووجد آخرون طرقًا لتحويل بعض خدماتهم في العمل الحر إلى منتجات كاملة ومستقلة بذاتها (Productize their services). باختصار فإنهم جميعًا قد وجدوا طرقًا لكسب المال خارج نطاق المشاريع التي قاموا بها لأعمالهم. هل يمكنك أنت أن تستخدم مهاراتك لإنشاء منتج يريده الناس، وقابل للتوسع؟ لم لا تنظر في تحويل إحدى خدماتك أو مهاراتك إلى كتاب إلكتروني، كتاب ورقي، أداة، دورة تعليمية، أو حتى جلسة استشارية. هناك مشاريع جانبية أخرى يمكن أن تكون مصدرًا للدخل الخامل (Passive Income)، مثل أن يرفع مصور أو مصمم أعماله على موقع مثل Creative Market أو Shutterstock كي تباع هناك. ويمكن لعملك أنت أيضًا أن يتحول إلى منتج فعلي أيضًا. 4. ابحث عن مزيد من العملاء أنت تعلم أنك تريد إيقاف تلك المشاريع ذات القيمة المنخفضة وقطعها كي تركز على مشاريع تقبض فيها أجرًا أعلى وتحقق أثرًا أكبر، لكن كيف ستحصل على تلك المشاريع؟ وفقًا لاتحاد المستقلين، فإن 69% من المستقلين يقولون أن التقنية سهلت عليهم إيجاد مزيد من الأعمال الحرة. وإن أحد أسهل الطرق التي تحصل أنت بها على مزيد من المشاريع هي مواقع العمل الحر مثل مستقل، مجموعات فيس بوك، أو أي منصات وظائف أخرى، المهم أن تبني علامتك وسمعتك في المجتمع الذي تحاول الحصول على أعمال فيه. يمكنك أيضًا أن تُظهر نفسك لأنواع الوظائف التي تريد أن تجذبها إليك، فبتلك الطريقة ستبني سلسلة من العملاء دون جهد يذكر. فمثلًا يمكن للعملاء الآن أن يرسلوا إلى المستقلين في موقع مستقل مشاريع خاصة إن رأوا أن المستقل مناسب لمشروعهم، لكن هذا لن يحدث إلا إن كان معرض أعمالك جذابًا بما يكفي لنوع الوظائف التي تريد أن يتم توظيفك بها. ولتجعل معرض أعمالك يظهر بأفضل صورة، ركز على القيمة التي تضيفها لعملائك، أضف أمثلة من أفضل الأعمال السابقة لك مع أفضل عملائك السابقين، ولتعلم أن التوصيات والترشيحات لها قيمتها هنا، فالناس تريد أن تعرف ما إذا كنت شخصًا يسهل التعامل معه، هل تتخلف عن مواعيد تسليمك، هل تقدم خدمات بجودة عالية. إليك بعض النصائح التي تساعدك على إنشاء معرض أعمال جذاب 5. طارد عملاءك الحاليين إذا كنت تشعر أن لديك كمية أعمال لا بأس بها وتحب العمل مع عملائك، فاعلم أنك لا تحتاج أن تضيف شيئًا آخر إلى مائدتك، بل عليك التركيز على هؤلاء العملاء لتوسيع مجال عملك معهم أو للتفاوض على أجر أعلى بناءً على القيمة التي تقدمها لهم. افتح حوارًا معهم لتعلم أين يمكن أن تفيدهم خدماتك أو مهاراتك. إذا كنت قد أثبتَّ بالفعل قيمتك من خلال عملك، وإذا كانت لديك علاقة عمل جيدة مع عملائك، فلن تمثل زيادة التعامل مع زبائنك مشكلة في تحقيقها. وبالمثل، إذا كنت تجد نفسك تقدم قيمة أعلى كل أسبوع أو كل شهر، فربما حان الوقت كي تناقشهم في زيادة الميزانية أو الأجر، ألق نظرة أخرى على العقد بينكما، واشرح لهم كيف أنك تقدم لهم الآن قيمة إضافية، متجاوزًا بذلك المدى الذي يتوقعوه منك. حدد مطلبًا بعينه في ذهنك، وسهِّل عليهم الموافقة بشرح المجال الجديد للعمل والأجر والميزانية، وكيف سيفيدهم في عملهم. إن الأمر يتعلق بكيفية ضبطك للأولويات إذا كنت تريد كسب مزيد من المال كمستقل، عليك أن تحدد أولًا أي الأنشطة التي تجلب أكثر الأموال، ثم رتب أولويات تلك الأنشطة. وستكون تلك العملية على عدة خطوات، كأي شيء في الحياة، وستتعلم المزيد بينما تتقدم على الدرب، لكنك ستكون بخير في طريقك لكسب المزيد من المال عن طريق فعل الأمور التي تحبها بشدة، فقط إن اهتممت بمعرض أعمالك وكان لديك تركيز واضح على نوع العمل الذي تريد. هل أنت مستعد للبدء؟ أنشئ حسابًا في مستقل الآن أو سجل الدخول وأضف لمسات جديدة على معرض أعمالك، وتفقد بعض المشاريع المعروضة هناك. ترجمة –بتصرف- للمقال How to make more money as a freelancer لصاحبته Shannon Byrne حقوق الصورة البارزة محفوظة لـ freepik