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

سنتعلّم مبادئ HTML و CSS لإنشاء مشاريع ويب خاصة بنا. سيتميّز هذا الدرس بتركيزه على الجانب العملي بشكل كبير، حيث سنبدأ فورًا بإنشاء مشروع خاص بنا. أمّا بالنسبة للنواحي النظرية فسنشرحها عند الحاجة أثناء تقدّمنا ببناء المشروع. بهذه الطريقة سنكتسب أساسًا متينًا وسريعًا في مجال تطوير الويب. سأوجّهك خلال هذا المشروع إلى روابط خارجية تُشير إلى مصادر أخرى للتوسُّع في نقاط معيّنة إن أحببت ذلك. المشروع سيكون المشروع عبارة عن بناء ملف شخصي portfolio على الويب. سيضم صفحة بداية Home ومدوّنة Blog وصفحة تُظهر مشاريع ويب المستقبلية التي تنوي إنشائها Projects، بالإضافة إلى صفحة للتواصل Contact. الهدف من المشروع الهدف منه هو جعلك تدخل عالم برمجة الويب ومساعدتك كي تتعلّم كيفية إيجاد المزيد من المعلومات حول أي موضوع لوحدك. ستصبح قادرًا بعد ذلك على معالجة مشاريع ويب أكثر تعقيدًا. ما هو HTML و CSS؟ لغة الرُماز المعلَّم Hypertext Markup Language والتي ندعوها اختصاراً HTML هي لغة مسؤولة عن بُنية structure صفحة الويب. فمثلًا يمكنك تعريف عناوين headings وفقرات paragraphs ونصوص texts وصور images في HTML. أمّا بالنسبة لأوراق الأنماط المتتالية Cascading Style Sheet وندعوها اختصاراً CSS فهي مسؤولة عن تنسيق (تنميط) style وتخطيط layout صفحة الويب. يمكنك تعريف تنسيقات جديدة خاصة بالألوان والخطوط وطرق المحاذاة وحتى يمكنك إنشاء بعض التحريكات animations البسيطة في CSS. تذكّر: تزوّدنا HTML بالمحتوى في حين تُنسّق CSS هذا المحتوى. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن موقع ويب أم تطبيق ويب يمكننا بناء مواقع ويب websites معقّدة جدًّا باستخدام HTML و CSS فحسب. لكن ستكون مواقع الويب هذه ساكنة static، ويعني ذلك أنّ زوّار الموقع يمكنهم استعراض الصفحات لكنّهم لا يمكنهم التفاعل مع هذه الصفحات (باستثناء النقر على الروابط الموجودة في الصفحات). لبرمجة مواقع ويب ديناميكية dynamic تكون تفاعلية مع المستخدم، سنحتاج إلى لغة برمجة إضافية مثل JavaScript أو Dart. ويمكننا باستخدامهما تطوير (هو مفهوم أوسع من البرمجة) تطبيقات ويب Web Applications كاملة مثل التطبيقات التي تهتم بإجراء الحسابات المختلفة أو تطبيقات الألعاب أو تطبيقات المحادثة وغيرها الكثير. تعمل هذه التطبيقات في الواقع ضمن متصفّح الويب. كما توجد لغات برمجة وتقنيات أخرى مثل PHP وRuby وASP.NET تسمح ببناء تطبيقات ويب ديناميكية أيضًا ولكن تعمل هذه التطبيقات ضمن مزوّد خدمة الاستضافة (على المخدّم). كما يمكن المزج بين هذين الأسلوبين لإنشاء مواقع ويب فعّالة للغاية. يمكنك بعد الانتهاء من هذه الدروس، البدء بتعلّم مثل هذه اللغات والتقنيات وإنشاء تطبيقات ويب ديناميكية. أنشئ موقع احترافي لأعمالك وعزّز حضورك الرقمي صمم موقع إلكتروني فريد وجذاب لعملائك في دقائق دون خبرة برمجية باستخدام سنديان منشئ المواقع العربي أطلق موقعك الآن الأجهزة المحمولة يُشكّل الوصول إلى مواقع الويب عن طريق الأجهزة المحمولة كالهواتف الذكيّة أو الأجهزة اللوحية نسبة كبيرة من عمليات الوصول العامة. وهكذا فإنّه من الضروري أن يظهر موقعنا بشكل جيّد على الشاشات الصغيرة. على العموم سنولي هذا الأمر اهتمامًا خلال هذه السلسلة التعليمية. الأدوات المستخدمة نحتاج إلى تطبيقين للدخول في عالم تطوير وبرمجة الويب، محرّر نصوص لإنشاء الملفات الخاصة بموقع الويب، ومتصفّح ويب لعرض وتجربة الموقع. 1- المحرر Editor سيكون كافيًا استخدام محرّر نصوص عادي (كبرنامج المفكرة Notepad في ويندوز مثلًا). ولكن من الأفضل استخدام محرّر نصوص يسهّل عملنا إلى حدٍّ كبير. لهذا الغرض أنصح باستخدام محرّر نصوص عصري ومخصّص لتحرير HTML. محرّر النصوص الذي أنصح به حاليًا هو Brackets (مجّاني من شركة أدوبي Adobe). يمكنك أن تستخدم أي محرّر تريده، ولكنّني في هذه السلسلة سأُشير أحيانًا إلى بعض وظائف تطبيق Brackets. يوجد محرّر نصوص جيّد أيضاً ويمكنك استخدامه وهو Atom، ويوجد محرّر نصوص آخر أيضًا، قديم قليلًا لكنّه جيّد وهو ++Notepad. حمّل ونصّب المحرّر Brackets إذا أردت ذلك. 2- المتصفح Browser يتوجّب على موقعنا أن يعمل على جميع المتصفحات الرئيسية بالطبع (Internet Explorer و Firefox و Chrome و Safari). على أية حال، أنصح باستخدام المتصفح Chrome لأغراض التطوير والبرمجة. يضم Chrome أدوات مفيدة للغاية لمطوّر الويب والتي سيستخدمها على نحو متكرّر. بالإضافة إلى ذلك، يدعم المحرّر Brackets المتصفّح Chrome بشكل جيّد، بحيث أنّ التغييرات التي تحدث في النص ستظهر مباشرةً ضمن Chrome (عن طريق ميزة اسمها Live Reload). حمّل ونصّب المتصفح Chrome الآن من هنا. إنشاء مستند HTML لنبدأ الآن بإنشاء مستند HTML الأوّل لنا من أجل موقع الويب: أنشئ مجلّدًا من أجل المشروع. سمّ المجلّد بالاسم Portfolio (أو أي اسم آخر ترغبه). افتح برنامج Brackets. من القائمة File اختر الأمر …Open Folder لتحديد وفتح المجلّد الذي أنشأناه قبل قليل. انقر بزر الفأرة الأيمن أسفل اسم المجلّد واختر New File لإنشاء ملف جديد، سمّه index.html. لديك الآن ملف نصّي فارغ اسمه index.html لماذا الملف index.html؟ في الواقع للملف index.html معنى خاص، فعندما نطلب من المتصفّح عنوان موقع ويب ما، وليكن مثلًا http://code.makery.ch، فعند ذلك سيُعرَض الملف index.html أولاً بشكل تلقائي، أي كأنّنا طلبنا العنوان http://code.makery.ch/index.html. بالنسبة إلينا، سيمثّل الملف index.html الصفحة الرئيسية. عمليتا العرض والتحديث يمكننا الآن تعبئة مستند HTML (الملف index.html) بالمحتوى. اكتب الأسطر التالية ضمن مستند HTML. لعرض الصفحة ضمن المتصفّح، انقر الأيقونة التي تُشبه البرق في الطرف الأيمن من البرنامج (المعاينة الحية Live Preview). سيُفتَح المتصفّح Chrome وسيُعرض المستند ضمنه، وفي حال أجريت أي تغيير جديد على مستند HTML فسترى نتيجة ذلك على المتصفّح مباشرةً، وهي في الحقيقة ميزة هامة وفعّالة. إذا لم تظهر الصفحة، اذهب إلى المكان الذي يوجد فيه الملف index.html وافتحه مباشرةً باستخدام Chrome أو أي متصفّح آخر. أمّا لم تُحدّث الصفحة تلقائياً، فاحفظ جميع الملفات المفتوحة (سننشئ ملفات أخرى تباعاً) ثم من نافذة المتصفح اضغط F5 على لوحة المفاتيح. تهانينا، لقد أنشأت موقع ويب الأوّل الخاص بك. التحييد Indentation لكي نُبقي الشيفرة نظيفة وواضحة، من المهم أن تعمل على تحييد النص بشكل صحيح باستخدام مفتاح الجدولة Tab من لوحة المفاتيح. يأخذ مفتاح Tab في برنامج Brackets أربعة فراغات بشكل افتراضي. بالنسبة لي أجد ذلك كثيراً بعض الشيء، لذلك أنصح أن تغيّر هذا لتصبح الفراغات spaces التي يأخذها المفتاح Tab تساوي 2، وذلك من أسفل نافذة Brackets. من المهم جدًّا أن ننتبه إلى تحييد الشيفرة من البداية، لكي نكتب شيفرة نظيفة وواضحة من بداية تعلّمنا للبرمجة عموماً. تلميح 1: استخدام Shift+Tab لكي تنقل المحاذاة إلى اليسار بدلاً من اليمين. تلميح 2: يمكنك محاذاة عدة أسطر بنفس الوقت إذا اخترتهم وضغطت Tab أو حتى Shift+Tab. عناصر HTML 1- الوسوم Tags في المثال السابق رأيت رموزًا مكتوبة ضمن رمزي <> تشكل هذه الرموز كلمات نُسميها الوسوم Tags. تتألف عناصر HTML عادةً (ولكن ليس دائماً) من وسمين، وسم للفتح opening tag ووسم للإغلاق closing tag. في مثالنا السابق كان <html> هو وسم للفتح، أمّا <html/> هو وسم للإغلاق حيث نلاحظ وجود محرف slash قبل اسم الوسم. أي نص موجود بين وسمي الفتح والإغلاق يُعتبر محتوى لعنصر HTML هذا. فمثلاً بالنسبة للوسمين <html> و <html/> نُخبر متصفّح الويب عن بداية ونهاية مستند HTML لصفحة الويب الخاصة بنا. أمّا الوسم الثاني الذي صادفناه هو الوسم <body>. يُحدّد هذا الوسم أنّ جميع المحتوى الواقع بين وسم الفتح <body> والإغلاق <body/> سيظهر بشكل مرئي للمستخدم في المنطقة الرئيسية من نافذة المتصفّح. 2- السمات Attributes تُعرّف السمات معلومات إضافية لعنصر HTML. وتقع هذه السمات ضمن وسم الفتح لعنصر HTML، ويكون لها دائماً اسم name وقيمة value. كمثال على السمات، دعنا ننظر إلى عنصر HTML الخاص بالروابط. وهو ربما من أهم العناصر على الإطلاق. يضم عنصر الروابط <a> السمة href (وهي اختصار للكلمتين hypertext reference) التي تحمل القيمة في هذا المثال http://code.makery.ch.ولكن سيعرض المتصفّح هذا الرابط على شكل النص التالي: My Website. البنية الأساسية لصفحة HTML لقد رأينا قبل قليل عنصري HTML وهما <html> و <body>. ولكن بنية صفحة (مستند) HTML تتكوّن عادةً من المزيد من العناصر. استبدل محتويات الملف index.html بالشيفرة التالية، بعد ذلك سنناقش كل عنصر HTML موجود فيها. بنية ملف (مستند) HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <p>Write anything you want to tell the world.</p> </body> </html> الشرح نضع في السطر الأوّل <DOCTYPE html!> دوماً. فهي تخبر المتصفّح عن نوع المستند. يشير الوسم <html> إلى بداية المستند والوسم <html/> إلى نهايته. يحتوي العنصر <head> (بين وسمي الفتح والإغلاق له) على معلومات إضافية حول الصفحة. وبشكل مختلف عن العنصر <body>، لا تظهر هذه المعلومات في نافذة المتصفح الرئيسية. يجب أن تكون هناك إشارة ضمن العنصر <head> حول الترميز character set المستَخدَم في هذا المستند: <"meta charset="utf-8>. إذا لم تحدّد الترميز المستَخدَم فإنّ بعض الرموز قد لا تظهر بصورة صحيحة. ربما قد لاحظت أنّ العنصر <meta> لا يمتلك وسم إغلاق. توجد بعض عناصر HTML التي لا تمتلك أيضًا وسوم إغلاق، ولكنها تعتبر استثناءً. نرى بعد ذلك الوسم <title> الذي يضم عنوان المستند والذي سيظهر على شريط العنوان لنافذة المتصفّح. كل شيء ضمن الوسم <body> سيظهر ضمن نافذة المتصفّح الرئيسية. يُعرّف العنصر <h1> العنوان الرئيسي الذي سيظهر للمستخدم ضمن صفحة الويب. ويمكن إنشاء عناوين فرعية أيضاً باستخدام العناصر <h2> <h3> <h4> <h5> <h6>. النص الموجود بين الوسمين <p> و <p/> يُعتبر فقرة مستقلة، وهذا ما يُعبّر عنه العنصر <p>. بعد كل وسم فتح لعنصر ما، يجب أن نحاذي العنصر التالي (بمفتاح الجدولة Tab) لتحسين عرض الشيفرة. ورغم أنّ ذلك ليس ضرورياً ولا يؤثّر أصلاً في عرض المستند، ولكن تأكّد من امتلاكك لهذه العادة الجيّدة. تلميح 1: يمكنك استخدام بنية HTML السابقة لأي صفحة HTML جديدة. تلميح 2: استخدم الاختصار Ctrl+S من لوحة المفاتيح لحفظ الملف الحالي. تلميح 3: استخدم الاختصار Ctrl+Z من لوحة المفاتيح للتراجع عن العمليات التي أجريتها. نحن مستعدّون الآن وبعناصر HTML البسيطة هذه، أن نرتقي بموقعنا إلى مستوى أعلى. في البداية لنُضِف صورة بحيث تبدو الصفحة الرئيسية لمشروعنا أكثر جمالًا. إدراج صورة لإدراج صورة نستخدم العنصر <img>. المثال التالي سيُدرج صورة موجودة ضمن ملف اسمه marco.jpg: <img src="marco.jpg" alt="Picture of me"> للعنصر <img> وسم فتح فقط ولا يوجد له وسم إغلاق. وهو يحتوي على سمتين src و alt. السمة src تُحدّد عنوان URL الذي يُعبّر عن اسم ملف الصورة ومساره. أمّا السمة alt فتمثّل النص البديل، وهو النص الذي يصف محتويات الصورة. يُستخدم هذا النص من قِبل محرّكات البحث، وفي حال تعذّر عرض الصورة ضمن الصفحة سيُعرض هذا النص بدلاً عنها. 1- عناوين URL النسبية والمطلقة تُستخدم عناوين URL من أجل السمة src الخاصة بعنصر الصورة، وأيضاً من أجل السمة href الخاصة بعنصر الارتباط. يُحدّد عنوان URL عنوان (مسار) ملف، وبصورة عامة العنوان هو مصدر resource قد يكون صورة أو صفحة ويب من موقع آخر. بالاعتماد على موقع الملف نستخدم إمّا العنوان النسبي relative أو العنوان المطلق absolute. فإذا كان الملف موجودًا ضمن نفس موقع الويب، عندها يمكن استخدام عنوان نسبي. فكما رأينا في المثال السابق اسم الملف وحده موجود دون عنوانه الفعلي (المطلق). يكون عنوان URL من النوع النسبي، نسبيًا دومًا إلى صفحة HTML الحالية، فإذا كان الملف المستهدف وصفحة HTML التي ستستخدمه موجودان ضمن نفس المجلّد فعندها يكفي الإشارة إلى اسم الملف فقط، أمّا إذا كانا ضمن مجلّدين مختلفين فعندها يحب أن يؤخذ ذلك بعين الاعتبار. فإذا فرضنا مثلًا أنّ ملف الصورة من المثال السابق موجودة ضمن مجلّد فرعي اسمه images سيكون عنوان URL النسبي لملف الصورة images/marco.jpg. أمّا إذا كان ملف الصورة موجود ضمن المجلّد الأب، فيمكنك عندئذ الوصول إليه باستخدام البادئة ( /.. ) أي سيصبح عنوان الملف في هذه الحالة marco.jpg/.. أمّا إذا كان الملف موجوداً ضمن موقع ويب آخر، فعندها يجب استخدام عنوان URL مطلق. تحتوي عناوين URL المطلقة على الاسم والمسار الكاملين للملف. حقائق عن عناوين URL: عنوان URL الذي يبدأ بـ //:http هو عنوان URL مطلق. عنوان URL بدون //:http هو عنوان URL نسبي بالنسبة إلى صفحة ويب الحالية. تُشير النقطة ( . ) إلى المجلّد الحالي. تُشير النقطتان ( .. ) إلى المجلّد الأب. أمثلة عن عناوين ويب النسبية والمطلقة: <!-- عناوين نسبية --> <a href="image-gallery.html">Image Gallery</a> <a href="blog/first-blog-entry.html">My First Blog Entry</a> <a href="../image-gallery.html">Back to Image Gallery</a> <!-- عناوين مُطلقة --> <a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a> 2- إضافة صورة إلى موقعنا لندرج صورة ضمن الصفحة، ينبغي نسخ ملف الصورة إلى المجلّد Portfolio. من الممكن أن تستخدم نفس الصورة الموجودة مع هذا الدرس، أو أن تستخدم صورة من عندك، ولكن احرص في جميع الأحوال على أنّك ستُحدّد اسم الملف مع الامتداد بدقّة. يجب أن تحصل على شيفرة شبيهة بما يلي (لاحظ أنّني أضفت عناوين فرعية بالإضافة إلى مزيد النصوص): الملف index.html مع الشيفرة اللازمة: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html> والصورة التالية لما ستبدو عليه الصفحة في متصفّح الويب: إن أردت تعلم المزيد حول HTML و CSS وأن تصبح خبيرًا بهما وأن تطور مواقع وتطبيقات ويب عالية الجودة، فأنصحك بالاطلاع على دورة تطوير واجهات المستخدم المقدمة من أكاديمية حسوب. سنتعلّم في الدرس الثاني كيف ننشر موقعنا على الانترنت. ترجمة -وبتصرّف- للدّرس HTML & CSS Tutorial - Part 1: Your First Website لصاحبه Marco Jakob. اقرأ أيضًا المدخل الشامل لتعلم تطوير الويب دليل تعلم لغة HTML دليل تعلم البرمجة

مُنذ أن استطعت أن أترك وظيفتي ذات الدوام الكامل لإنشاء عملي الخاص وأنا ما زلت أكافح، لن أداري ذلك. كان من الضروري أن أتعلّم من جديد كيف أكون منتجًا في عملي الحُرّ حيث لا يراقبني أحد. أظنّ أنّني قد حقّقت ذلك الآن، ودوّنت خلاصة الأمر في ثلاث نقاط رئيسيّة تحتاجها من أجل النجاح والاستمراريّة في نظام العمل من المنزل. 1- الحافز هو الدافع الذي سيُجنِّبك أن تقول "ليس من الضروريّ أن أظل مستيقظًا حتي الثانية عشرة مساءً، يمكنني أن أستمرّ في النوم بدون إزعاج". هو ما يدفعك بدلًا من ذلك للنهوض من الفِرَاش، وأخذ كوب قهوة سريع مع البدء في العمل فورًا. فيجب عليك أن تجد ما الذي يحفّزك فعلًا في عملك، ومن ثَمّ استغلال هذا الدافع في تحفيزك للعمل بما يشبه سياسة العصا والجَزرة. فمثلًا بالنسبة لي: الحافز هو الناس. الأمر يبدو بسيطًا، أليس كذلك؟ أُحبّ زملائي الذين أعمل معهم في عملي الخاص، وأحبّ بيئة العمل التي أنشأناها سويًا. كلنا نعمل عن بُعد، ونستخدم موقع Slak للمراسلة ومن ثَمّ تسْيِير أمور العمل، ونستخدم أيضًا موقع Basecamp كواجهة لمقابلة العملاء (وهم أيضًا أُناس أحب العمل معهم)، وكل يوم هناك محادثة جديدة واكتشاف جديد وخبرات أكثر، فأولئك هم حافزي. نقوم بأنفسنا أنا وأخي "جيريميا" باختيار الناس الذين يعملون معنا، سواءً فريق العمل أو العملاء؛ ليكونوا دائمًا من نوعيّة الأشخاص الذين نحب أن نعمل معهم؛ ليكونوا دائمًا حافزًا لنا، فهم أشخاص مثابرون ورائعون، وأنا شخصيًا أعتقد أنّي أتعلّم منهم أكثر مما يتعلّمون هم منّي، على الرغم من أنّي أنا الذي أديرهم. فإن استطعتُ أن أستمرّ هكذا، أعتقد حينَئِذٍ أنّي أسير في الطريق الصحيح فيما يخصّ اختياري لمن ينضم إلينا، سواء فريق العمل أوالعملاء. هذا ما يحفّزني، ويوقظني من النوم، ويجعلني متحمّسًا للاندماج سريعًا في عملي. هذا واحد من أهمّ الأسباب التي تجعل أول شئ في عملي اليومي المعتاد هو تفقُّد الرسائل الواردة في بريدي ومتابعة العمل على موقع Slak و Basecamp؛ لأنّي أجد في ذلك رضاي وراحتي التامة. يجب عليك أن تعرف أكثر شئ يرضيك من عملك وتجعله بارزًا في أوْلوِيّاتك المُعتادة، ليكون هو بداية انطلاق العمل؛ لأنّك بمجرد أن تبدأ العمل بذلك الشيء، فمن السهل عليك بعدَئِذٍ أنْ تستمرّ فيه. 2- المسؤوليّة يجب عليك أن تجد القيْد الذي يُلزمك بإتمام العمل. ربما تكون قد تركت وظيفتك لأنّك لا تريد أن تُقيّد، أو تُحاسَب أو تُراقَب في عملك باستمرار. كلها أسباب وَجِيهة، لكنّك مضطر إلي تحمّل المسئوليّة أيضًا أيًا كان المجال الذي تعمل فيه. كلّنا مضطرون إلي ذلك حتي نُنْتج ونتطور باستمرار، فهي ضرورة لابدّ منها. ما الذي ستكون مسؤولًا عنه؟ ما الذي يمكن ملاحظته إذا لم تُؤدّ عملك بالمستوى المطلوب؟ بالنسبة لي، المشاريع التي أُديرها هي مسئوليّتي بشكل مباشر، فأنا المشرف على فِرق العمل، والمستشار الإداري لبعض المشاريع. إذا لم أتحمّل مسؤوليّتي وأنقل أهم متطلّبات العملاء إلى فريق العمل لديّ، وإذا لم أدفع فريق العمل للأمام بالتحفيز والتشجيع، فلن نتقدّم في النهاية، وسيقوم العملاء بالتشكيك في جودة عملنا، وهذا يمثل لي كابوسًا بمجرّد التفكير فيه، لذا يُمثل لي ذلك دافعًا مهمًا يدفعني لتحمل المسؤوليّة؛ لأنّ التقصير فيه يرعبني. كمثال آخر، إذا كنتَ مُصمّمًا، ولم تقم بتصميم أي شئ لمدة أسبوع، فسيؤثر ذلك على عملائك بشكل سلبي، وستكون النتيجة مُحبِطة لك، وهذا ما سيدفعك من البداية لتحمّل المسؤوليّة. وهذا مُماثل لحالنا مع التسويق. إذا أسّست مشروعك الخاص مُعتمدًا على اقتراحات العملاء لبعضهم وتقْييمهم لك (كما نفعل نحن) فسُمْعتك هي كل شيء. يجب أن يكون عملك على قدمٍ وساق كل يوم، وتحتاج في كل بريد يصل إليك أن تَضْمن أنّ عملاءك راضون بأقصى قدر ممكن؛ لأن ذلك هو سبيل تقدّمك، وهو بالفعل مستقبلك، وأنت متحمّل لمسؤوليّة ذلك. يرتكِز عملي على أساس قويّ يقوم على محبّتي لمن أعمل معهم، ومسؤوليّتي تجاههم وموازنتي بين هذيْن الأمْريْن، فلا أريد أن أخذلهم وأحاول جاهدًا أن أكون بجانبهم. هذا ما يساعدني على الاستمرار، وإذا حدث منّي تقصير في هذا الشأن فإنّ ذلك ممّا يؤرّقني ليلًا. هكذا يجب أن يكون الأمر. 3- الاندماج في العمل النقطة الثالثة والأخيرة هي الاندماج في العمل. نعلم جميعًا الشعور الذي نشعر به عندما نندمِج في العمل اليومي ونشعر حينها بقدرتنا على إنجاز أيّ شيء. عندما كنت تعمل في مكتب وظيفي كان يتمّ إزعاجك دائمًا بالتنبيهات والمقابلات العشوائيّة، أو التأنيب علي بعض الأعمال والمقاطعات المستمِرّة ممّا يعيقك عن التقدم والاندماج في العمل. من الجيّد أنك تعمل الآن من المنزل، وبالتالي لن تزعِجك تلك الأشياء بعد الآن، ولكن السيّء في الأمر هو أنّ العمل كلّه مسؤوليتك الآن، فبدلًا من أن تأخذ راحة لتداعب قطتك، أو تخرج في نزهة، أو تغسل الأطباق أو تغسل الملابس، فإنّك يجب عليك أن تدرك أنّ اندماجك في العمل لا يُعوّض، فتتجنّب أثناء عملك أيّ مشاغل أخرى تُعطّلك عن العمل. الجانب الرائع عند العمل من المنزل هو أنك غير مقيّد بالعمل في المكتب لمدة تسع ساعات، ولست مضطرًا للمجيء إلى العمل يوميًا مع زملائك والانصراف معهم، وإنما يمكنك أن تُخطّط لأكبر الأعمال التي تُلزَم بها خلال اليوم، وتنجزها في غضون ساعتين أو ثلاثة فقط باندماج جيد مع العمل. عندما كنت في الوظيفة اعتدت على فَرقعة أصابعي لساعات عندما أنتهي من العمل قبل انتهاء الدوام ولا يوجد لديّ أيّ شيء أفعله. الآن يمكنني أن أنجز قائمة مهامّ يومين في بضع ساعات فقط، وأستغلّ باقي الوقت في مُهمّات أرغب شخصيًا بإنجازها. من الرائع استغلال ذلك، ولكن عليك فقط أن تختار الوقت المناسب لفعل ذلك، وأن تتأكّد من أنك أنجزت معظم العمل بقدرالإمكان في ذلك الوقت. وبالنسبة لي، لاحظت أن الوقت الذهبي للعمل هو بعد الاستيقاظ من النوم مباشرةً. إذا لم أفعل أيّ شيء سوى شرب كوب من القهوة والجلوس على مكتبي للعمل، فإنّني أنجز قدْرًا ضخمًا من العمل وأنتهي منه بحُلول الثانية أو الثالثة ظهرًا، حيث أنني عندما أندمج في العمل فإنّي أدخل ما يشبه الغيبوبة (كما هو حاصل فعلًا وأنا أكتب الآن)، حيث لا مجال للسماح بأيّ تشتيت، فلا يوجد أيّ شيء آخر أفكّر فيه سوى العمل المطلوب مني إنجازه، وكيفيّة الانتهاء منه بأسرع وقت وأعلى كفاءة ممكنة. يجب أن تبحث عمّا يمنَحك هذا المستوى من الاندماج في العمل، ثم ابحث عن طريقة للاستمرار على ذلك الأمر يومًا بعد يوم. بالطبع ستكون هناك دومًا أمور تتزاحم في تشتيت انتباهك، لكنّك تحتاج إلى التدرّب على تجاهلها ودفْعها عنك باستمرار. بمجرد أن تنتهي من عملك الذي اندمجت فيه بشكل جيّد، ستجد الوقت لعمل كل شيء بعد ذلك، وكنتيجة لذلك، لن تقلق طوال الليل لاستياء العاملين منك بسبب تقصيرك في العمل، مما يَقُضّ مضجعك ليلًا، ويُخْمد حماسك في اليوم التالي. إنها حلقة مفرغة، ويجب عليك الانتباه لها، وأن تكون مستعدًا للتخلص من أي عادة سلبيّة مرتبطة بها. نقطة إضافية: التشجيع وهذه النقطة من الأهمّية بمكان بالنسبة لي لدرجة أني أحرص دائمًا عليها، ويهمّني جدًا أن أحصل على التشجيع من عائلتي التي تُحبّني وتمدحني دائمًا بلا تردد على الأمور الجيّدة التي أحقّقها. التشجيع الإيجابي دائمًا في مقدّمة أولويّاتي. من ثمراته أنه يحفّزني دائمًا ويحفّز الأشخاص الذين أعمل معهم بالأشياء الجيدة التي أنجزناها. يمكنك أن تخبر من يعمل معك بالأخطاء التي وقعوا فيها طوال اليوم، حتى لا يقوموا بها مرة أخرى، ولكنْ لا يكون ذلك إلّا بعد إخبارهم بإنجازاتهم ذلك اليوم حتى لا ينفروا من العمل. وبالمِثْل يجب أن تشجّع نفسك، فقيامك بذلك يقدّم لك دافعًا ذهنيًا قويًا لفعل الأمر ذاته في المستقبل. هذه أسهل طريقة لتعزيز الأفعال الإيجابيّة. أحاول دائمًا أن أشجّع فريقي في أي وقت يقومون فيه بعمل جيّد أو يبادرون بعمل تطوّعي مثل إبداع فكرة جديدة، أو المتابعة مع عميل بالإجابة عن سؤال يعرفون إجابته. كل هذه الأشياء أتمنّى من فريقي أن يفعلها دائمًا، ولك أن تتخيل مدى تأثير تشجيعي عليهم، فعندما أمدحهم على عمل جيّد فعلوه فإنهم يستمرّون في فعله أكثر وأكثر. التشجيع ضرورة ملحّة لتَطوّر أيّ فريق عمل، وكذلك ضروري للعمل من المنزل أيضًا، فعندما تُؤدّي عملك بشكل جيّد في يوم ما، يجب عليك أن تشجّع نفسك به، ويجب أن تُفرِح نفسك بما أديت من عملك بشكل جيّد ذلك اليوم، وبالتالي تربط سعادتك هذه بالعمل فتتعزّز إرادة عقلك للعمل في المستقبل. الخُلاصة بينما أقوم بإنهاء هذا المقال أقوم أيضًا بإنهاء عملي اليومي. صندوق البريد لدي مقروء، وعملائي مسرورين من الخدمة، وفريق العمل لديّ مُنتِج في عمله، ولدينا اجتماع غدًا لنتفقَّد كل شئ لدينا في خطّة عمل الأسبوع القادم. أنا مُتحمّس لذلك ومُتحفّز للغد، فسوف أقوم بالانهماك في العمل الذي أُحبّه وأكون سعيدًا عند إنجازه. هكذا تخلّصت من الإرهاق الذهني والتَّيَهان العقلي وأصبحت سعيدًا، وراضيًا، ومُتحمسًا ومُنتجًا في مجال عملي من المنزل. ترجمة -وبتصرّف- للمقال A 3 step survival guide for working from home لصاحبه Sean Smith حقوق الصورة البارزة محفوظة لـ Freepik

أقدّم لك في هذا المقال طرقًا محددة ومجرّبة ويمكنك تطبيقها مباشرة، كي تقنع العميل أنك من يبحث عنه وأنك الأفضل من بين خمس مصممين -أو مستقلين- آخرين تواصلَ معهم قبلك، فأنا أرغب بمساعدتك في التميز في هذا البحر من المنافسة بما أني عملت مع مئات الشركات من قبل وعرفت الطرق التي تنجح وتلك التي تفشل. وما هذا المقال إﻻ محاولة لمساعدتك في تجنب أخطاء وقعت أنا فيها من قبل كي يتطور عملك بشكل أسرع وأكثر كفاءة، ذلك أنك إن لم تستطع الفوز بعملاء فهذا يعني نهاية نشاطك التجاري. دعنا نلق نظرة على هذه الطرق: 1. اظفر بثقة العميل بسرعة ﻻ شك أن تحقيق الثقة هو حجر الزاوية في الفوز بأي عمل، وإحدى أسرع الطرق التي تظفر بها بعميل محتمل هي أن تريه أنك أهل لثقته، لكن كيف يمكن تحقيق هذا مع شخص تتحدث معه لأول مرة؟ إليك الطريقة: انقل تركيز الحديث بسرعة عليه وعلى شركته، وأظهر له أنك تريد التعرف حقًا على ما يرغب في إنجازه، واعرف قصته وأهدافه وجمهوره وما يفضّله ومنافسيه، … إلخ. باختصار، سل أسئلة عملية وتتعلق مباشرة به وبشركته، فتلك المكانة التي تسمع عنها للانطباع الأول حقيقية، فضع كل الاهتمام عليه من البداية كي يثق أكثر بك، فالثقة هي أصل كل انطباع أولي ناجح، ومن ثمّ تفوز به كعميل لك. 2. حافظ على استمارة التواصل الخاصة بك قصيرة ومحدودة قد تظن أن تقليل عدد الحقول في استمارة التواصل لن يؤثر من قريب أو بعيد على معدل تحويل عملائك المحتملين، لكن شركة Hubspot قد حللت أكثر من 40 ألف صفحة هبوط لعملائها، ووجد دان زاريلّا -عالم شبكات اجتماعية ومؤلف- أن تقليل عدد حقول استمارة التواصل من 4 حقول إلى 3 قد زاد معدل تحويل العملاء بنسبة 50%، هذا يعني زيادة 50% في الأرباح لمجرد إحداث تغيير بسيط كهذا. استخدم أدوات بسيطة مثل Typeform وGravity Forms من أجل إنشاء استمارات قصيرة وفعّالة. 3. اتصل بهم هاتفيًا ﻻ تقلل من أهمية الاتصال الهاتفي التقليدي، فهو طريقة سريعة لكسب ثقة عميلك المحتمل، ولقد استغرقت وقتًا طويلًا قبل أن أسأل السؤال البديهي “أي طريقة أكثر فعالية في تحويل العملاء، الهاتف أم البريد؟”، وقد جربت كلا الطريقتين بنفسي، وإليك النتيجة: كان معدل تحول العملاء حين أستجيب لمشروع ما عبر البريد هو 21%، بينما تزيد تلك النسبة إلى 65% حين أتحدث إليهم عبر الهاتف! هذه زيادة بمقدار 44% حين أستخدم الهاتف، وذاك وحده قد يغيّر حال عملك. لاحظ أنك تستطيع إعداد أداة جدولة مثل Calendly حيث يستطيع العملاء جدولة اتصالات هاتفية معك وفق اﻷوقات المتاحة مسبقًا في جدولك. 4. شهادة العميل المثالية لعلك تتوقع أنك يجب أن تحصل على شهادات ترتبط بعملك، لكن كيف تبدو تلك الشهادة المثالية التي تفيدك؟ يزعم ديريك هالبرن مؤسس مدونة Social Triggers الشهيرة أنه قد توصّل إلى مكونات شهادة العميل المثالية، وهي كالتالي: المشكلة (أو المعتقد) الحل (أو المعتقد الجديد) النتائج (أو الإنجازات) ومهمتنا نحن كعاملين في مجال إبداعي مثل التصميم هي البحث عن المشكلة وإيجاد حل لها، وحين تتكامل شهادات عملائك السابقين مع الحل الذي تعرضه فإن العميل يلاحظ ذلك، وسيشجعه هذا على توظيفك، لماذا؟ ﻷن لديه إثباتًا عن عملك السابق. وتظهر قوة المعاملة بالمثل هنا عند طلب شهادات أو تقييمات من عملاء حين تستخدمها في التوقيت الصحيح، فمثلًا لنقل أنك تعمل على تصميم شعار لعميل ما، وقد أعجبته النسخ الجديدة من الشعار النهائي له، فهنا تكون فرصتك سانحة لطلب شهادة منه أو تقييم عن عملك معه، إليك نموذجًا مما يجب أن تكون عليه رسالتك إليه لطلب تقييم: أرأيت كيف أن أسلوب الرسالة باﻷعلى خفيف ومناسب لطلب شيء ما؟ لم أجد عميلًا يرفض إرسال تقييمه كرد على هذا اﻷسلوب في الطلب، وإنني أضعها لك ها هنا كي تستخدمها كما تشاء، لكن ﻻ تنس اتباع النقاط الثلاث التي ذكرتها لك قبل قليل في هيكلة شهادة العميل التي ترغب فيها، وستساعد تلك الهيكلة على تنظيم أفكاره أثناء كتابة التقييم كي يسهل عليه كتابته. كذلك من المهم ملاحظة أن أيًا مما ذكرت لك لن يصلح إن كان تواصلك مع عميلك سيئًا خلال المشروع، كأن تفوّت مواعيد التسليم أو تقدّم إنتاجًا ﻻ يرضيه، لذا ابدأ الآن في جمع شهادات من عملائك، وستشكر نفسك لاحقًا. 5. اذكر قصتك بكل ما فيها وإني أريدك أن تفكر بعكس المثل القائل “زيّف النجاح إلى أن تحققه”، فالناس ميّالة إلى أولئك الذين يتحدثون بصراحة، ذلك أن المرات التي نفشل فيها فيها تجعلنا أقوى، وبالتالي تكون قصتك أكثر مصداقية وقوة، كما قال توماس إديسون من قبل “إنني لم أفشل، بل وجدت 10000 طريقة لم تنجح”. وأنا أعلم أن إظهار فشلك وأخطائك للناس قد يكون منافيًا للبديهة، لكن الناس تتأثر بها، إذ أن كل مستمع لتجربتك خاض أو يخوض منعطفًا صعبًا في حياته بشكل ما، وإن حذفت الأخطاء التي مررت بها من قصتك في عملك فسيحجب ذلك اﻷثر الذي يمكن أن تحدثه قصتك، فكن شخصيتك الحقيقية كي تكسب عملاء أكثر يتعاطفون معك أو حتى يشاركونك قصة مشابهة من حيواتهم. 6. عوامل تحويل العملاء عن طريق المواقع نحن ننسى عادة أن هدف موقعنا على الإنترنت هو تحويل الزوار إلى عملاء، ذلك أن فكرة التصميم المرتكز على التحويل يمكن أن تكون غريبة، دعنا نلق نظرة الآن على كيفية زيادة معدل التحويل من الموقع من أجل كسب عملاء جدد. ولقد أصبحت سرعة صفحة ما عاملًا في نظر جوجل ضمن مئتي عامل آخر لتهيئة المواقع لمحركات البحث -بصراحة، أحتاج أن أطبّق هذه النقطة في موقعي الشخصي-. وقد أجرت Kissmetrics دراسة وجدت فيها أن نصف الزوّار غادروا الموقع بعد انتظار 3 ثوان أو أكثر من أجل تحميل الصفحة على حواسيبهم المكتبية -حين يأتي أحدهم إلى موقعك ويغادر دون زيارة صفحة أخرى فإن هذا يسمّى ارتداد-. وهكذا تخسر نصف عملاءك المحتملين ﻷن صفحتك أبطأ من الحد المقبول، فحاول أﻻ تزيد مدة تحميل صفحتك عن ثانيتين إلى ثلاث، واستخدام أدوات مثل GTMetrix وPingdom لقياس سرعة تحميل موقعك، وستعطيك GTMetrix نصائح لتهيئة موقعك كي يعمل بكفاءة. 7. معرض أعمال الموقع نحن نتعلم بأعيننا بشكل أفضل، فالدماغ يعالج المعلومات البصرية أسرع من النصوص المكتوبة بستين ألف مرة، فهل يعرض معرضك أفضل الأعمال التي نفّذتها؟ هل يظهر تنوعها؟ هل يبدأ وينتهي بقطع فريدة من أعمالك؟ لقد تحدثنا سابقًا عن تطوير الثقة بينك وبين العميل، ويبرز معرض أعمالك استحقاقك لهذه الثقة، فالعملاء المحتملين يبحثون عن الاهتمام والجودة والإبداع الذي تضعه في أعمالك، وسيقارنون أعمالك مباشرة مع غيرك كي يقرروا من اﻷنسب لهم. وإني ﻷذكر كلمة الأستاذ مازيلان من كلية التصميم “إن مهارتك تساوي أقل قطعة في معرض أعمالك”، فهناك حكمة بالغة في هذه الكلمة، فلا تخف من تقليل عدد أعمالك في معرضك إلى عدد قليل من أفضل ما نفّذته، فإن كان لديك ثلاثين تصميمًا وثمانية منهم أفضل من الباقي، فليكن معرض أعمالك ثمانية فقط، فالجودة تتفوق على الكم دومًا هنا. 8. جمال المتابعة لنقل أنك تتصل بعميل محتمل وتشعر بوجود مبشّرات لحدوث صفقة بينكما، وتنتظر الرد منه بمباشرة تنفيذ المشروع، لكن الرد لا يأتي، ويطول انتظارك ليمتد إلى شهر دون أن تسمع إجابة من عميلك. وهنا يأتي دور المتابعة، فبعد محادثتك الأولى، انتظر يومين أو ثلاثة قبل أن تراجع عميلك، ولقد وجدت أن البريد يصلح للمتابعة أفضل من الهاتف، ذلك أنك ﻻ تزال في منتصف عملية اتخاذ للقرار، أو أن العميل لم يفكر في المشروع بعمق، فهنا تكون الرسالة البريدية أقل إلحاحًا هنا. وحين تراجع عميلك للسؤال عن المشروع، ﻻ تقل فقط “هل تريد المضي قدمًا في مشروعك؟”، لكن أرسل نماذج من أعمالك بدلًا من ذلك، بالتوازي مع العناصر التي يحتاجها، وأرسل تقييمات عملائك، والمنافع التي سيحصل عليها مرتّبة، وعملاء يمكن أن يرجع إليهم، وروابط مباشرة إلى أعمالك، إلخ. إليك مثالًا على رسالة يمكنك استخدامها كي تضمن فوزك بعملاء جدد: لذا ﻻ تنس متابعة عملائك دون أن تلحّ عليهم، ففي أحيان كثيرة يكون العميل مشغولًا ويحتاج تذكرة بسيطة كي يسعى في تنفيذ مشروعه أو إتمامه. 9. ابن علاقات أصيلة مع مؤثرين في مجالك قد أثرّت هذه النقطة على عملي في التصميم بشكل إيجابي، وأرغب في أن يكون لك مثل ذلك أيضًا، ولدي قصة قصيرة ستساعدك على تصوّر هذه النقطة. تواصلت قبل بضع سنين مع جيكوب كاس الذي يدير مدونة التصميم الشهيرة Just Creative ، وتابعت مدونته عن قرب، ثم قررت أن أتواصل معه يومًا ﻷسأله عن رأيه في الدليل الذي كتبتُه في تصميم الشعارات، والذي زاد عن عشرين ألف كلمة. فأدهشني أن رد علي سريعًا، وذكر في رده أنه قرأ الدليل كله، وأشار علي بتحويله إلى كتاب إلكتروني أو مطبوع. صراحة لم يدر بخلدي أن أحول الدليل لكتاب من قبل، ثم صرّح في وقت ﻻحق بكلمة قوية عن الدليل فقال: “الدليل المثالي لتصميم الشعارات-The Ultimate Guide to Logo Design” هو أكثر مصدر شامل رأيته إلى الآن، وﻻ يكلّف وقتًا كبيرًا لقراءته، فأسلوب كايل -الكاتب الأجنبي، قابل للتطبيق وسهل الفهم، ولديه نبرة تحدد مفاتيح النجاح من تجربته الخاصة في العمل مع مئات الشركات الكبيرة والصغيرة. وقد حوّلت الدليل إلى كتاب إلكتروني أخذًا بنصيحته، واشتراه كثير من المصممين من 43 دولة في ست قارات، كل ذلك من مجرد رسالة بريدية صغيرة تسأله عن رأيه. واﻵن أنا وجيكوب على تواصل منتظم، وأعدّه صديقًا جيدًا لي، وأنا ممتن لرغبته في متابعة الترويج لدليل الشعارات وعرضه هنا وهنا في مدونته. لذا فإن السؤال الذي يطرح نفسه هو “من هم المؤثرين الذين تحترمهم والمرشدين المبدعين الذين تتطلع إليهم؟” ﻻ تخش التواصل معهم وبدء محادثة صادقة حقيقية، فليس لديك ما تخسره، بل على العكس قد تكسب كما كسبت أنا من ورائه، فقد يقدموك في مواقعهم، وتكتب ضيفًا في مدوناتهم، وتقدّم أعمالًا في مقابل روابط إلى معرض أعمالك. واعلم أن مصداقيتك ومكانتك ستزيد بشكل كبير حين يقدّمك مؤثر ما في مجالك، وستزيد فرصتك في الفوز بعملاء جدد. 10. ﻻ تخف من الشفافية أنا أخبر عملائي بوضوح أني لست أرخص مصمم في السوق، لكن إن كانوا يريدون مصممًا يسعى للتميّز في إنتاج حلول ممتازة لشركاتهم، فإنني الخيار الأمثل لهم. وإن هذه الصراحة مع العملاء تحقق لك فائدتين: مستوى أعلى من الصراحة (أني لست أرخص مصمم…) سيعود الاستثمار معي بفائدة عليهم (إنتاج حلول ممتازة…) لذا ﻻ تخف من كونك صريحًا مع عملائك، فلا شك أن ستجني منافع تلك الصراحة فيما بعد. 11. سل هذا السؤال البسيط لم أرَ شركة أو منظمة ممن عملت معها سابقًا ﻻ تذكر لي أنها مقيدة بميزانية، لذا دعنا نخاطبهم بنفس اللغة، وهذا السؤال البسيط سيساعدك على الفوز بعملاء أكثر مما يمكنك تحمله، صدقًا. إليك الأمر: كيف يتناسب سعري مع ميزانيتك؟ اذكر هذا مباشرة بعد ذكرك لسعرك، وستفتح على نفسك طرقًا جديدة للفوز بالعميل، لكن ما الذي يجعل هذا السؤال مميزًا؟ هناك ثلاث حالات يمكن أن تقع فيها إجابتهم: الحالة الأولى: متوافق مع ميزانيتك أنت موافق على الميزانية. ممتاز. الحالة الثانية: قريب من الميزانية إن كانت ميزانية العميل أقل قليلًا مما تطلبه، فيمكن أن نتطور في الأمر إلى اتفاق في صالح الطرفين، تذكّر أن تحدد قيمة خدماتك وكم يساوي هذا المشروع بالنسبة لك. لكن على أي حال، اعلم أن هناك حالات يكون فيها التفاوض على السعر من مصلحة الطرفين، فيمكن أن تقدّم خصمًا بسيطًا لهذا المشروع، في مقابل عمل متواصل فيما بعد، فقد تخصم 50. فلا تفعل هذا بنفسك وﻻ بزملائك من المصممين ولا بصناعة التصميم ككل، فأنا وأنت ونحن، كلنا مسؤولون، وكل مصمم يمكن أن يكون له بصمة إيجابية أو سلبية في قيمة أعمالنا لعملائنا، فنحن نعرف كم أن التواصل المرئي الفعّال مؤثر على أي مؤسسة، فلنقيّم أعمالنا بما تستحق، كي يفعل عملاؤنا ذلك أيضًا معنا. واﻵن اخبرني، هل جربت طرقًا للفوز بعميل ونجحت معك؟ ترجمة -بتصرف- لمقال Creative, Win More Clients – 14 Proven Ways لصاحبه Kyle Courtright حقوق الصورة البارزة محفوظة لـ Freepik