البحث في الموقع

تطوير الويب Web Development هو أحد أشهر مجالات العمل الحر حاليًا، فهو واحدٌ من بين أكثر المجالات طلبًا في السوق التقنية، نظرًا لكونه يتعلّق بإنشاء وصناعة المواقع الإلكترونية وتطبيقات الويب بصورةٍ أساسيةٍ، حيث تحتاج إليه جميع المؤسسات والشركات والأفراد العاملون في هذا المجال. ونظرًا لزيادة اعتماد العالم على الإنترنت لإدارة وإتمام الأعمال قد يحتاج الجميع إلى مواقع وتطبيقات وخدمات إلكترونية، هذا بالإضافة إلى التحول الرقمي للمؤسسات والحكومات الذي يزداد يومًا بعد يومٍ منذ اختراع الإنترنت وظهور الويب، حيث زاد بصورةٍ ملحوظةٍ في الآونة الأخيرة بما تحْمله من أحداث ومُستجدات. سيساعدك تعلم تطوير الويب على إنشاء المواقع الإلكترونية وتطبيقات الويب سواءً لك أو لعملائك المحتملين، وهو ما سيُحسّن من خبرتك أو سيجلب لك مصدر دخلٍ إضافيٍ، وقد يصبح مصدر دخلك الأساسي. جدول المحتويات سنذكر هنا جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة: ما هي علوم تطوير الويب؟ مجالات تطوير الويب الواجهات الأمامية Front-End لغات تطوير الواجهات الأمامية المكتبات وأطر العمل المتوفرة للواجهات الأمامية مصادر تعلم تطوير الواجهات الأمامية Front-End الواجهات الخلفية Back-End ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ مصادر لتعلم تطوير الواجهات الخلفية Back-End المطور الشامل Full-Stack ما هي فرص العمل بعد تعلم تطوير الويب؟ كيف أختار مجال تطوير الويب المناسب لي؟ خاتمة ما هي علوم تطوير الويب؟ تطوير الويب Web Development هو المجال المختص بإنشاء وتطوير المواقع الإلكترونية وتطبيقات الويب التي تهدف إلى توفير ميزة أو خدمة معينة عبر الإنترنت. توجد عدة مجالات فرعية لمجال تطوير الويب من أبرزها تطوير الواجهات الأمامية front-end web development وتطوير الواجهات الخلفية back-end web development، كما توجد هناك بعض المجالات الأخرى المرتبطة بتطوير الويب إلا أنها لا تتصل به بصورةٍ مباشرةٍ، مثل إدارة العمليات DevOps، وعملية إنشاء وإدارة وتأمين الخوادم Servers وكل ما يرتبط بها، فهي لا تندرج تحت علوم تطوير الويب بصورةٍ مباشرةٍ، إلا أن أي موقع إلكتروني يحتاج إليها لكي يعمل ويُواصل العمل بصورة جيدة. ومطور الويب قد لا يهتم بهذه التخصصات، وغير مطلوب منه دراستها، فهي تَتبَع تخصصات إدارة النظام System Administration وإدارة العمليات DevOps Engineering وما يَتفرّع منهما ولكن من الجيد لمطور الويب أن يتعلم بعض أساسيات هذين الفرعين وهذا ما سنعرضه في المقال. بخصوص مجال الواجهات الأمامية Front-End ومجال الواجهات الخلفية Back-End فالأمر أشبه بالتسوّق في متجرٍ، فعندما يدخل الزبائن إلى متجر أو مطعم يتعاملون مع موظف الاستقبال مثلًا، دون أن يروا أو يعرفوا ما الذي يجري في الخلفية من أعمال تصنيع أو طهو أو تحضير أو غير ذلك، فهم يجلسون في غرفة الاستقبال وينتظرون الحصول على مشترياتهم أو طعامهم ثم يخرجون دون أن يتعاملوا مباشرةً مع جهة أخرى غير موظف الاستقبال أو المحاسب (واجهة المتجر). ويتشابه الأمر ذاك في تطوير الويب فمواقع الويب لها واجهات أمامية تشمل كل ما يراه المستخدم أمامه على موقع الويب ويتفاعل معه أيضًا من رسوميات وأزرار وألوان وعناصر المرئية وشعارات …إلخ، وهذه هي التي يتعامل معها الزائر، بينما تعالج الواجهة الخلفية Backend الطلبات وتدير العمليات بصورة حقيقية، إذ تتصل بقاعدة البيانات عند كل طلب Request لجلب وإحضار المعلومات التي يطلبها الزائر مع معالجتها. ويتخصص بعض الناس في تطوير الواجهات الأمامية لمواقع الويب، بينما يتخصص آخرون في تطوير الواجهات الخلفية، إلا أن هناك بعض المطورين قادرين على تطوير كلا الواجهتين معًا، ونُطلِق عليهم المطورين الشاملين Full-Stack Developers. مجالات تطوير الويب سنتحدث الآن عن مجالات تطوير الويب التي يمكنك التخصص بها، سواءٌ بأحدها أو بها جميعًا، كما سنذكر أبرز المصادر المتوفرة لتَعلّم هذه التخصصات، كلّ على حدة. الواجهات الأمامية Front-End ذكرنا سابقًا أن مجال الواجهات الأمامية Front-End في تطوير الويب يختص بالمظهر الجمالي والهيكلة الأمامية للمواقع والتطبيقات الإلكترونية، واللغات المطلوبة لتطوير الواجهات الأمامية هي HTML و CSS و JavaScript. لغات تطوير الواجهات الأمامية يجري تطوير الواجهات الأمامية باستعمال لغة HTML ولغة CSS التوصيفية ولغة JavaScript البرمجية، وإليك شرح كلّ واحدةٍ على حِدة: HTML: هي لغة هيكلة أو توصيف بِنية صفحات الإنترنت، إذ تفهمها جميع متصفحات الويب؛ ويُحدِّد المطورين في هذه الهيكلة الأجزاء المختلفة من الصفحات الإلكترونية عبْر كتابة رموز بطريقة معينة لكي تفهمها المتصفحات، وبالتالي فهي تَعرِض في نهاية الأمر النصوص والعناصر بهيكلية وطريقة ظاهرة في الواجهة الأمامية يراها المستخدم وتشبه هذه اللغة هيكل السيارة وعناصرها الداخلية. CSS: هي لغة تنسيق تُستعمَل لتنسيق هيكلة وعناصر HTML لتسمح للمطورين بتغيير تنسيق العناصر التي تُعَرض للمستخدمين مثل الألوان والحدود والأشكال والخلفيات والرسوميات والصور، بمعنى أنه من دون CSS ستحصل على صفحاتٍ عديمة التنسيق والألوان، قد تبدو مثل صفحة ويب في عام 1991م، أي أن CSS تتحكم في كلّ شيءٍ مرئيٍ، وتشبه هذه اللغة عملية الطلاء والألوان التي تُضاف على هيكل السيارة. جافاسكربت: وهي لغة برمجة أصيلة، وعلى عكس اللغتين السابقتين فهي تحتوي على المنطق البرمجي المُتضِّمن للخوارزميات والمتغيرات وهياكل البيانات وإجراء الاتصالات وقواعد البيانات …إلخ، وتدعمها جميع متصفحات الويب، ويمكن تطوير مواقع إنترنت لا تستعمل جافاسكربت، إلا أن هذا سيُصِّعب العمل، كما سيحد من مميزات وخصائص الموقع بصورةٍ كبيرةٍ. لاحظ كذلك نظرًا لقدرة جافاسكربت ودعمها القوي، قد تُستعمل مثل لغة برمجية للواجهة الخلفية Back-End فلا يقتصر استخدامها في برمجة الواجهة الأمامية فقط. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن وتُعَد اللغات الثلاثة السابقة بمثابة الثلاثي الذهبي لتطوير الواجهات الأمامية لمواقع الويب، وهناك إضافاتٌ لكلّ منها بالطبع، وكذلك أُطر عمل Frameworks ومكتباتٍ توفّر مزايًا إضافية لهذه اللغات، مما يُسهّل أو يُسِرع من عمل المطورين ولكن هذه مرحلةٌ لاحقةٌ لتعلّمها، فمطور الويب يجب أن يبدأ أولًا بتَعلّم أساسيات هذه اللغات الثلاثة وطريقة تفاعلها مع بعضها بعضًا، ثم يَنتقل بعد ذلك إلى المكتبات والإضافات وأُطر العمل وما شابه. تجد توثيق كل هذه اللغات في موسوعة حسوب لمزيد من التفصيل والتوسع. المكتبات وأطر العمل المتوفرة للواجهات الأمامية سنذكر الآن سريعًا بعض أشهر المكتبات واُطر العمل الشهيرة المتوفرة لتلك اللغات، وبينما تُعَد أُطر العمل Frameworks برمجياتٌ ومكوَّناتٌ جاهزةٌ بالفعل تسهّل من عمل المطورين، بحيث أنهم لن يعودوا بحاجةٍ إلى برمجتها من الصفر في كل مرةٍ،تُعرّف المكتبات Libraries بأنها إضافاتٌ برمجيةٌ على اللغات نفسها، وذلك لإكسابها مميزاتٍ أكثر أو أفضل من السابق. اسم اللغة المكتبات والإضافات وأُطر العمل المتوفرة مصادر التَعلّم HTML لا يوجد إطار عمل مخصوصٍ للغة HTML، وذلك لأنها لغةٌ معياريةٌ لهيكلة صفحات الويب والمحتوى، فلا يمكن الزيادة عليها هي نفسها لأنها ليست لغةً برمجيةً، ورغم ذلك ستجد أن أُطر عمل CSS، وجافاسكربت قد تضيف مميزاتٍ أو طرق تلاعبٍ مختلفةٍ بلغة HTML. توثيق HTML العربي. CSS هناك العديد من أُطر العمل والمكتبات الشهيرة للغة CSS، ويجب علينا التفريق بينهما في هذا السياق؛ فمكتبات CSS هي نوعٌ إضافيٌ من لغات التنسيق التي تَستعمل أغلب خصائص CSS، ولكن تضيف عليها مميزات أخرى أو تكتبها بطريقة مختلفة، ثم تترجم وتصرَّف Compiled تلك الملفات المختلفة إلى ملفات CSS عاديةٍ، بحيث يمكن لمتصفّحات الويب فهمها، بينما أُطر العمل للغة CSS هي مجرد عناصر وتنسيقات جاهزة يمكن استخدامها لبناء وتنسيق المواقع الإلكترونية بسرعة بدلًا من البدء من الصفر، وأبرز مكتبات لغة CSS هي LESS و SASS، بينما أبرز أطر عملها هو Bootstrap و Compass و Foundation و Pure.CSS، كما يوجد العشرات من أُطر العمل المختلفة غيرهم. توثيق SASS وتوثيق Bootstrap مصدران جيّدان لتعلمهما باللغة العربية، أما البقية فلا توثيق عربيٍ لهم على الشبكة حتى الآن، إلا أنك قد تجد بعض الفيديوهات على يوتيوب عند البحث عنهم. JavaScript تُعَد أُطر العمل المتوفرة للواجهة الأمامية بجافاسكربت كثيرةٌ جدًا، وضخمةٌ كذلك، إذ تدعم وتقف خلف كل واحدٍ منها شركةٌ من الشركات التقنية العملاقة مثل جوجل وفيسبوك وتويتر ومايكروسوفت، ومن أبرز هذه الإطارات React و Angular و Vue.js و jQuery، وكما ذكرنا في حالة CSS، فهناك أيضًا مكتباتٌ أخرى تستعمل تنسيق جافاسكربت ولكن بمميزاتٍ وطريقة كتابةٍ مختلفةٍ مثل TypeScript. توفر موسوعة حسوب توثيقاتٍ لكلّ من: TypeScript و React و jQuery، وهناك دروسٌ ومقالاتٌ لكثيرٍ منها على الأكاديمية على قسم جافاسكربت. كتاب أساسيات إطار العمل Vue.js ونُشر قبل فترةٍ من طَرَف الأكاديمية. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } وليس مطلوبًا منك تَعلّم كلّ هذه المكتبات وأُطر العمل، ولا حتى نصفها بالطبع، ولكن بمجرد أن تنتهي من أساسيات لغات الويب السابقة، يمكنك الانتقال بعد ذلك إلى تَعلّم إطار عملٍ أو مكتبةٍ شهيرةٍ لواحدةٍ من بين كلٍ هذه اللغات لتُصقل خبرتك فيها وتصبح أكثر طلبًا في سوق العمل. مصادر تعلم تطوير الواجهات الأمامية Front-End تُعَد دورة تطوير واجهات المستخدم من أكاديمية حسوب أشمل مصدر عربي متوفر حاليًا لتعلم مجال تطوير الواجهات الأمامية؛ حيث تُشرح فيها جميع هذه التقنيات بالإضافة إلى المكتبات وأُطر العمل الشهيرة في السوق، فهي دورةٌ شاملةٌ تزيد مدتها عن خمسين ساعةً، وهي مشروحةٌ بالكامل باللغة العربية الفصحى، وستحصل على ضمان استرداد ما أنفقته من نقودٍ خلال 6 أشهرٍ، هذا بالإضافة إلى أمرٍ مهمٍ جدًا، وهو المتابعة المستمرة أثناء تعلّمك من مدربين متخصصين مع تسليمك مشاريع عملية لتنفيذها ومراجعتها لك. كما يمكنك الاطلاع على المصادر التالية: HTML: كتاب نحو فهم أعمق لتقنيات HTML5، حيث سيعلّمك كل ما تحتاجه عن HTML، كما يشمل الإصدار الأخير منه تقنية HTML5، وستتعمق في أساسيات لغة HTML، وكيف نشأت وما هي معاييرها كما ستطّلع على أهم المعلومات التي يجب عليك معرفتها لإنشاء الصفحات بها، وذلك في أكثر من 350 صفحة. CSS: مقال تعرف على أساسيات CSS، وهو مدخلٌ جيدٌ للغة التنسيق الشهيرة CSS، وبعدها يمكنك قراءة ما تشاء من المقالات الأخرى المتقدِّمة على قسم CSS من أكاديمية حسوب، كما يمكنك تحميل كتاب التحريك في CSS لرؤية بعض أهم مميزات هذه اللغة وهي التأثيرات الحركية. جافاسكربت: دليل تعلم جافاسكربت، وهي سلسلةٌ شاملةٌ وكاملةٌ لتعلم جافاسكربت من الألف إلى الياء، ويمكنك تصفّحِ كلّ المقالات المنشورة حاليًا على الأكاديمية والاستفادة منها (ارجع إلى أول مقال منشور في السلسلة وابدأ القراءة من هناك). هنالك أيضًا موسوعة حسوب، وهي موسوعة عربية شهيرة تخصص في ترجمة توثيقات لغات البرمجة وتقنيات تطوير الويب ومكتباتها، فهي تحتوي على توثيقات كاملة لهذه اللغات البرمجية بالإضافة إلى مكتباتها وإضافاتها الشهيرة، ويمكنك الاطلاع عليها متى ما احتجت إلى فهم شيء، ومن بين توثيقاتها: توثيق HTML وتوثيق CSS وتوثيق جافاسكربت، وننصح كذلك بقراءة مقال أساسيات بناء تطبيقات الويب لفهم طريقة تفاعل وعمل HTML و CSS و JavaScript مع بعضهم البعض. محتوى أكاديمية حسوب وموسوعة ضخم لا ينضب لذا أترك لك تصفح بقية المقالات والمصادر فيها ومتابعة كل المنشورات الجديدة التي تنشر فيهما. الواجهات الخلفية Back-End ذكرنا سابقًا أن الواجهة الخلفية في مجال تطوير الويب هي التي تعالج البيانات وتخزنها في قواعد البيانات وتستخرجها منها ثم ترسلها إلى الواجهة الأمامية لكي تعرضها للمستخدم كما أنها تُعالج طلبات المستخدمين والصفحات التي يتصفحونها وعمليات تسجيل الدخول والخروج …إلخ، لذلك فهي بمثابة الهيكل العظمي لمواقع الإنترنت. ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ تُعَد لغة PHP أشهر لغة برمجية لتطوير الواجهات الخلفية لمواقع الويب وتطبيقات الويب إذ لا يوازيها في ذلك أي لغة أخرى، وذلك لأنها واحدةٌ من أقدم اللغات البرمجية المستخدمة في تطوير الويب، وزادت شهرتها بعد انتشار أنظمة إدارة المحتوى CMS مثل ووردبريس WordPress وجوملا Joomla ودروبال Drupal، فجميعها تعمل بلغة PHP، مما أجبر أغلب شركات الاستضافة آنذاك (في العقد الأول من القرن الحالي) على دعمها افتراضيًا عِوضًا عن اللغات الأخرى. وأنظمة إدارة المحتوى هي أنظمة جاهزة لإنشاء المواقع الإلكترونية بسهولة وسرعة من قوالب ونماذج موجودة يمكنك أن تعدل عليها أو حتى تبنيها أنت بما يناسب متطلباتك، وتُثبّت على الخوادم وتُستعمَل لإنشاء أي نوع من المواقع الإلكترونية وتطبيقات الويب، وظهرت أدوات البناء هذه لتسهّل الأمر على من يريد امتلاك موقع إلكتروني، فلا يريد الجميع بناء موقعه من الصفر وتحمّل التكاليف والوقت والجهد. وتُعَد أنظمة إدارة المحتوى سوقًا بذاتها؛ فتطوير قوالب ووردبريس WordPress بمثابة سوق عملاق عالميًا عليه الكثير من العرض والطلب، وبينما تُستعمَل لغة PHP في تطوير الواجهة الخلفية (حيث أن سكربت ووردبريس يعمل بها)، تُستعمل لغات HTML و CSS وجافاسكربت لإنشاء الواجهات الأمامية كما ذكرنا آنفًا. بعد لغة PHP، تأتي مجموعةٌ أخرى من اللغات البرمجية التي يمكن من خلالها برمجة مواقع وتطبيقات الإنترنت مثل بايثون وذلك عن طريق إطاريْ العمل فلاسك وجانغو، وروبي مع إطار العمل ريلز Ruby on Rails، وجافا، كما يمكنك أن تستخدم جافاسكربت للواجهة الخلفية، فهي لغةٌ تدعم كلا الواجهتين الأمامية والخلفية، وذلك عن طريق إطار Node.js. وفي الحقيقة هنالك لغات أخرى يمكن استخدامها في تطوير الواجهات الخلفية ولكن اقتصرنا على أشهرها وسيأتي لاحقًا مخطط يوضح جميع اللغات التي يمكن تعلمها أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب إليك قائمةٌ بأشهر أطر العمل المتوفرة التي يمكنك تعلمها بعد تعلم لغة البرمجة: table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } اللغة أُطر العمل المتوفرة مصادر الَتعلّم PHP إطار العمل Laravel وهو واحدٌ من أشهر أطر العمل المتوفرة للغة PHP، وهناك أيضًا Symfony. توثيق موسوعة حسوب متوفر لإطار لارافيل، وهناك مجموعةٌ من الدروس المنشورة له على أكاديمية حسوب. Python إطار العمل جانغو وهو مشهورٌ بإنشاء المواقع العملاقة والضخمة، بينما يُعَد فلاسك إطار عملٍ مصغّرٍ وقويٍ، كما يسْهُل استخدامه لمعظم المواقع. دروس أكاديمية حسوب عن فلاسك وجانغو كافيةٌ لتمضي قُدمًا فيهما. Ruby إطار العمل الأشهر بها هو Ruby on Rails، وهو من أوائل أُطر العمل على الإطلاق. هناك توثيقٌ كاملٌ بالعربية عن إطار العمل Ruby on Rails على الموسوعة، بالإضافة لدروس ومقالات على الأكاديمية. جافاسكربت يَكثُر استخدام إطار Node.js لتشغيل جافاسكربت خارج المتصفح، وذلك لتعمل مثل واجهةٍ خلفيةٍ على خوادم الويب. دروس node.js بالعربية على أكاديمية حسوب. وليس مطلوبًا منك تعلّمها جميعًا كما ذكرنا، بل عليك اختيار مسار واحد والتركيز فيه كبداية، أي متى ما تعلمت لغة برمجة فستتعلم أطر العمل والمكتبات المرتبطة بها والمتعلقة بتطوير الواجهات الخلفية. ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ سيُمكّنك تعلم البرمجة بإحدى لغات برمجة الواجهة الخلفية في مجال تطوير الويب التي أشرنا إليها آنفًا مما يلي: تطوير موقعٍ إلكترونيٍ بالكامل من الصفر؛ بحيث يتواصل مع نظام قاعدة بيانات معين ثم يَعرِض كلّ ما يحتاجه الزائر من خدمات أو معلومات. تطوير تطبيقات ويب توفر خدمات للمستخدمين مثل مواقع الشبكات الاجتماعية ومواقع ضغط المستندات ومواقع تشفير الملفات ومواقع تجميع الصور… إلخ. بناء قوالب جاهزة لأنظمة إدارة المحتوى الشهيرة مثل ووردبريس WordPress أو روبي Ruby أو دروبال Drupal، بحيث تُبرمج بنفس اللغة. بيع أنظمةٍ جاهزةٍ (سكربتات برمجية) تؤدي خدمات معينة على مواقع مثل بيكاليكا، حيث يشتريها المستخدمين منك ويُثبّتوها على خواديمهم، وبذلك يحصلوا على تطبيقات الويب الخاصة بهم. مصادر لتعلم تطوير الواجهات الخلفية Back-End تَعلّم أحد اللغات البرمجية التي أشرنا إليها للتو لا يعني أنك تتعلم شيئًا منفصلًا عن المنطق البرمجي العام؛ وبالتالي أنت تحتاج لفهم بعض المبادئ مثل الخوارزميات وهياكل البيانات والمنطق الرقمي وقواعد البيانات …إلخ، لذلك ستحتاج إلى بعض أساسيات علوم الحاسوب قبل الشروع بتعلم البرمجة ودخول مجال تطوير الويب. ونرشّح دورة علوم الحاسوب من أكاديمية حسوب لأجل ذلك، فهي دورةٌ شاملةٌ تزيد مدتها عن 35 ساعة، وستُعلّمك كل ما ستحتاج إليه للبدء، وإذا كانت لديك المعرفة الأساسية حول البرمجة أو علوم الحاسوب عمومًا وأردت الدخول مباشرةً في تطوير الويب بإحدى هذه اللغات البرمجية، فيمكنك الاطلاع على دورة تطوير الويب بلغة PHP أو دورة تطوير الويب بلغة Ruby، وكلاهما من أكاديمية حسوب أيضًا. ولمزيدٍ من الاطلاع، لديك هذه المصادر الإثرائية: توثيقات موسوعة حسوب العربية التالية: PHP - Python - Ruby - Node.js. كتاب البرمجة بلغة بايثون، وهو كتاب مهم، يشرح معظم أجزاء اللغة باللغة العربية. ملاحظات للعاملين بلغة PHP، وهو كتاب قيد الإنشاء من الأكاديمية، ولكن يمكنك الاطلاع على الدروس المنشورة، حيث تُمثّل أغلب محتوى الكتاب إلى اللحظة. كما ستحتاج لفهم بعض أنظمة قواعد البيانات بالطب، ولهذا يمكنك الاطلاع على كتاب الدليل العملي إلى قواعد بيانات PostgreSQL وكتاب ملاحظات للعاملين بلغة SQL وكتاب تصميم قواعد البيانات. وقواعد MySQL، و MariaDB المشتقة عنها، فهي أشهر مشتقاتها، ويمكنك البحث عن أي فيديوهاتٍ عنها على يوتيوب. المطور الشامل Full-Stack يشمل تطوير الواجهتين الأمامية والخلفية معًا Full-Stack Developer، وهو تَخصُّصٌ آخر من تخصصات تطوير الويب، يجمع بين تطوير الواجهتين الأمامية والخلفية، إلا أنه يزيد عليهما بإمتلاك الشخص لبعض الخبرة في إدارة العمليات DevOps، حيث سيُطلب منه استلام كامل المشروع من الألف إلى الياء بما في ذلك النشر Deployment. وعادةً ما تكون رواتب وأجور المطورين الشاملين العاملين في سوق العمل الحر أعلى من غيرهم، وذلك لأنهم يتقنون العمل على كِلا الجانبين، حيث خبرتهم الكبيرة وقدرتهم على تنفيذ المشاريع بصورةٍ أفضل، ويُطلب كثيرًا على مواقع العمل الحر مثل مستقل تنفيذ مشاريع تطبيقات ويبٍ من الألف إلى الياء، ويُسند إلى مستقلٍ واحدٍ فقط؛ وهو ما يعني أنه عليه أن يكون مطورًا شاملًا، يجيد برمجة كِلا الواجهتين الأمامية والخلفية. ولكن بعض الناس يتخصص في مجالٍ واحدٍ بدلًا من المجالين معًا فتجد من يستطيع تصميم واجهة موقع ووردبريس، ولكنه لا يجيد لغة PHP، وبالتالي سيأخذ مبلغًا معينًا فقط لبرمجة ملفات HTML و CSS وجافاسكربت، وآخرون لا يجيدون تصميم الواجهات الأمامية بصورةٍ جيدةٍ، ولكنهم يجيدون لغة PHP مثلًا أو روبي باحترافيةٍ شديدةٍ، وهؤلاء قادرون على أخذ ملفات الواجهة الأمامية وبناء واجهة خلفية لتكتمل بها أو مثلًا بناء قالب WordPress متكامل يمكن استعماله وغيرها من الحالات. ولكي تكون مطور ويب شامل أي مطور واجهات أمامية وخلفية، فيجب عليك دراسة كلِا المجالين السابقين معًا (بدءًا من الواجهة الأمامية وانتهاءًا بالواجهة الخلفية)، كما ستحتاج إلى بعض الخبرة في إدارة العمليات، ويمكنك الاطلاع عليها من دروس DevOps بالعربية على أكاديمية حسوب. ويمكنك كذلك الاطلاع على دورة تطوير التطبيقات بجافاسكربت، فهي دورةٌ شاملةٌ تشرح لك كيفية استخدام جافاسكربت، سواءًا للواجهة الأمامية أو الخلفية، وكذلك كيفية تطوير تطبيقات الهواتف. وهناك أيضًا دروس متوفرة حول تعلم برمجة قوالب ووردبريس على الأكاديمية، يمكنك الاطلاع عليها. ما هي فرص العمل بعد تعلم تطوير الويب؟ بعد أن تنتهي من تَعلّم تطوير الويب والتخصص بالواجهات الأمامية مثلًا، فسيصبح اسمك مطور واجهات أمامية front end developer، وسيكون بمقدورك: تطوير الواجهات الأمامية لأي موقع ويب مثل المتاجر الإلكترونية ومواقع المحتوى والمدونات ومواقع الخدمات ولوحات التحكم وتطبيقات الويب …إلخ. إنشاء مواقع ويب ثابتة Static Websites تسمح لك بعرض محتوى ثابت لا يتغير للزوار، مثل مواقع المحتوى والمدونات التي يزورها القُرّاء للاستفادة والقراءة. إنشاء صفحات هبوط Landing Pages أو مواقع إنترنت بسيطة للشركات والمؤسسات التي تريد عرض صفحات تحتوي على معلومات موجزة مثل معلومات التواصل وصور للمنتجات بحيث يمكن للزوار قراءتها بصورة سريعة. تحويل أي قالب واجهة أمامية مُصوّر مثل القوالب المُصوّرة على فوتوشوب Adobe Photoshop أو التصميمات المنفذة على برامج مثل adobe XD أو فيجما figma أو أي تطبيق يصمم الواجهات الأمامية إلى شيفرات ويب حقيقية (تدعى الوظيفة تحويل قالب PSD إلى HTML عادة). ومجال تصميم الواجهات الأمامية في عملية تطوير الويب مرتبط بمجال واجهات المستخدم وتجربة المستخدم UI / UX ويكون لمطور الواجهات الأمامية عادةً تواصل مباشر أو عبر قائد الفريق مع مصمم الواجهة وفريق تجربة المستخدم أثناء العمل على المشروع لأي استفسار أو تعديلات مطلوبة. تجد أحيانًا مشاريع عمل متعلقة فقط بتحول تصميم جاهز إلى شيفرة (تدعى عملية تكويد أحيانًا)، وأقتبس صورة عن مشروع من منصة مستقل على سبيل المثال لا الحصر: أما إن تخصصت في مجال تطوير الواجهات الخلفية، فسيصبح مسماك الوظيفي مطور واجهات خلفية back end developer وسيكون بمقدورك: التعامل مع قواعد البيانات من إنشاء وتعديل وإدارة (عبر أنظمة إدارة قواعد البيانات DBMS) لإنشاء قاعدة بيانات الموقع وإدارتها. بناء الواجهة الخلفية لموقع ويب التي تكون من طرف الخادم عبر إحدى أطر العمل المتوفرة التي ذكرناها في الأعلى. بناء واجهات برمجية API بما يتناسب مع متطلبات الموقع أو التطبيق، ومن الممكن العمل على موقع موجود مسبقًا لتطويره والإضافة عليه. صيانة الواجهات الخلفية وقواعد البيانات وتأمين الأنظمة وحمايتها وتوليد التقارير اللازمة. التطرق أحيانًا لعمليات النشر وإداة العمليات DevOps البسيطة وأنظمة التشغيل وأنظمة الحوسبة السحابية وخدماتها. وأما بخصوص المطور الشامل، فيمكنك أداء مهام مطور الواجهات الأمامية ومطور الواجهات الخلفية مجتمعين، ويمكنك العمل على بناء مواقع وتطبيقات ويب بالكامل بمفردك وذلك للمشاريع الصغيرة وبعض المشاريع المتوسطة أما المشاريع المعقدة والكبيرة فتتطلب فريق عمل برمجي لتنفيذها. إن كنت تنوي العمل بمفردك على منصات العمل الحر، فتصفح قسم البرمجة وتطوير المواقع والتطبيقات على منصة مستقل للاطلاع على فرص عمل في مجال تطوير الويب وتصميم الواجهات الأمامية والخلفية، ويمكنك حتى فتح خدمة في أي مواقع خدمات مثل منصة خمسات لبناء الواجهات الأمامية أو الخلفية أو كلاهما وتنفيذ المهام المتعلقة بمجال تطوير الويب عمومًا من مواقع وتطبيقات وغيرها من المهام، فانظر مثلًا قسم البرمجة والتطوير وأيضًا قسم برمجة HTML و CSS لتصفح خدمات مشابهة. إن أحببت العمل في وظيفة مع شركة، فيمكنك البحث عن فرص العمل كمطور واجهات أمامية أو خلفية، وميزة العمل كمطور ويب بهذا المجال أنه لا يتطلب العمل في شركة تقليدية ولا يتطلب شهادات جامعية متخصصة بل يمكنك تجهيز معرض أعمال مع عرض خبراتك السابقة والعمل من منزلك عن بعد، انظر مثلًا فرص العمل المتاحة على موقع مثل منصة بعيد تحديدًا في قسم وظائف برمجة وتطوير عن بعد. كيف أختار مجال تطوير الويب المناسب لي؟ حسنًا، وصلنا الآن إلى أهم قسم من هذا المقال، والسؤال المطروح هو: كيف أختار المسار واللغات وأطر العمل المناسبة لي من بين كل هذه الخيارات المحيّرة؟ والجواب بسيطٌ: جرّبها، ثم انظر في نفسك هل تستمع بالعمل معها أم لا. وبلا شكّ إن كنت ستدخل مجال تطوير الويب من كلا بابيه، فستحتاج أولًا إلى تعلم لغة HTML ثم تعلم لغة CSS وبعدها تعلم لغة جافاسكربت، فهذه اللغات أساسيةٌ لأي مطور ويب مهما كان تخصصه، ولكن التعمّق فيها خاصٌ بتطوير الواجهات الأمامية كما رأينا ويأخذ مطور الواجهات الخلفية بعدها مسارًا آخر كما وضحنا في خارطة الطريق لمطور الواجهات الأمامية ومطور الواجهات الخلفية لذلك فهما تخصصان مختلفان كما شرحنا. بناءً على ما سبق، تكون البداية بتَعلّم أساسيات لغات الويب HTML و CSS وجافاسكربت، ثم تجرب هذه اللغات والمسارات لفترةٍ قصيرةٍ مدة شهر أو شهرين مثلًا، وبعدها ترى إذا ما كنت ستحب العمل في هذا المجال وصَرفِ معظم وقتك فيه أم لا. ومع الوقت، وستجد المجال المناسب الذي قد ترتاح فيه وستقترب منه شيئًا فشيئًا، وعمومًا، مجال تطوير الواجهات الأمامية مرتبط بالفن والتصميم بعض الشيء إذ يتعلق من قريب أو بعيد بتصميم الواجهات وما يظهر على الشاشة، أما مجال تطوير الواجهات الخلفية فمرتبط أكبر بالمنطق البرمجي والخوارزميات ويبتعد عن كل ما يتعلق بالتصميم. كما يمكنك التسجيل في إحدى دورات أكاديمية حسوب وبذلك ستفتح لك المسارات الأولى من جميع الدورات المتوفرة على الأكاديمية ويمكنك بحضور المسارات الأولى التأكد من اختيارك الصحيح، كما توفر الدورات بطبيعة الحال مدربين يرشدونك إلى الطريق لتوجيهك إلى أفضل مسار يناسبك، كما أنها تضمن لك بعد تخرجك الحصول على فرصة عمل خلال فترة قصيرة، ويمكنك تقديم طلب انسحاب إذا لم تناسبك الدورة. خاتمة غصنا في هذا المقال في أعماق مجال تطوير الويب وشرحنا المجالين الرئيسين فيه حتى تصبح مطور الويب من واجهة أمامية وواجهة خلفية هذا بالإضافة للتطوير الشامل، كما عرضنا أهم المصادر العربية المتوفرة لتَعلّم كل هذه التقنيات كلّ على حدة، ونأمل أن يكون هذا المقال عونًا ومرشدًا لك إن كنت داخلًا جديدًا على مجال تطوير الويب ومساعدًا لك في تكملة ما ينقصك من مهارات خلال رحلتك في تطوير الويب بما عرضناه من خارطة طريق لكلا مجالي تطوير الويب، مجال تطوير الواجهات الأمامية ومجال تطوير الواجهات الخلفية. سعداء لاستقبال أي تعليق أو استفسار في مربع التعليقات أدناه، ونرجو أخيرًا لك كل التوفيق والسداد! اقرأ أيضًا ما هي فوائد تعلم البرمجة؟

على مدى السنوات القليلة الماضية، أصبحت الرسوم البيانية شائعة بشكل متزايد لأسباب كثيرة منها سهولة مشاركتها وقدرتها على إيصال المعلومة والرسالة بسهولة ووضوح، حيث تختصر الكثير من الجمل والشروحات ببضع كلمات ورسومات جميلة أخّاذة. عرّف موقع القاموس الإنجليزي Infographic على أنه عرض تقديمي مرئي للمعلومات في شكل مخطط أو رسم بياني أو صورة أخرى مصحوبة بحد أدنى من النصوص، تهدف إلى تقديم نظرة عامة سهلة الفهم، وغالبًا ما تكون لموضوع معقد. ويمكن تعريفها أيضًا على أنها طريقة لتبسيط مشكلة التواصل النصي واللفظي عبر استخدام أسلوب التصميم الرسومي. أهم القواعد والمبادئ نظرًا لأن المزيد من العلامات التجارية وفرق التسويق التابعة لهم تعمل على إنشاء ومشاركة رسوم بيانية عالية الجودة عبر الإنترنت، فإن مجرد وصف بعض الحقائق معًا وتسميتها مخطط معلومات أو رسوم بيانية، لا يكفي لتعد نفسك مصمم رسوم بيانية، بل يجب إتقان هذا الفن عبر اتباع قواعد وتطبيق مبادئ معينة لتبرز بين الكم الهائل من المنافسين، ويجب أن تكون رسوماتك البيانية غنية بالمعلومات المفيدة ومصممة بطريقة جميلة. لذلك إليك أهم القواعد والمبادئ الواجب اتباعها للحصول على رسومات بيانية متفوقة. البساطة دائمًا ما يتكرر هذا المبدأ في جميع أنواع اختصاصات تصميم الرسوميات وهو أساسًا من أهم المبادئ العامة لتصميم الرسوميات. يمكنك تطبيق هذا المبدأ عبر اختصار النصوص إلى كلمات أو عبارات قصيرة وسهلة الفهم، ويجب أن تكون الألوان المستخدمة في التصميم متناسقة لجذب انتباه المشاهدين. محاولة إظهار الكثير من التفاصيل في الرسوم البيانية تجعل الناس يشعرون بالملل والتعب من قراءتها. رسم بياني يوضح مجموعة نصائح للتسويق بالمحتوى بطريقة بسيطة وسلسلة من مقال قائمة لأهم مصطلحات التسويق بالمحتوى. العنوان أولًا الرسومات البيانية تحتاج دائمًا إلى عنوان في بداية ورأس كل تصميم، على عكس الكثير من اختصاصات التصميم الأخرى التي قد لا تحتاج لعناوين، لذلك أفضل وسيلة لإقناع للمشاهد بمتابعة مشاهدة الرسم البياني هو العنوان المقنع والجذّاب، حيث يمكن للعنوان المدروس أن يثير اهتمام المشاهد ويدفعه لمتابعة تصفح باقي أجزاء التصميم، وقد يؤدي العنوان الممل الذي لا يثير الاهتمام إلى دفع المشاهد إلى العزوف عن متابعة تصفح الرسم. رسم بياني يبرز العنوان بشكل واضح أعلى التصميم من الهيئة العامة للإحصاء في السعودية. المحاذاة هو من العناصر المؤثرة في هذا النوع من التصاميم، ويمنح المنظر العام للتصميم الأناقة والجمالية، وفي حال عدم الالتزام به سيبدو التصميم فوضويًا وغير احترافي. أفضل طريقة لتطبيق هذا المبدأ في التصميم هو تفعيل أداة عرض الشبكة Grid في برنامج التصميم المستخدم ومن ثم تفعيل خاصية المطابقة إلى الشبكة Snap to Grid وبذلك تتحقق المحاذاة بسهولة ويسر ودون بذل أي مجهود في محاولة تطبيقها. رسم بياني يوضح بروتوكولات الحج من تصميم سلمى العُمر. التباين استخدم التباين دومًا في تصاميمك وخصوصًا التباين في الألوان ولعل مخطط الألوان التكميلي قد يقدم تباينًا مميزًا وبارزًا للعناصر (راجع مقال اللون في تصميم الرسوميات ونظرية اللون لفهم مخطط الألوان التكميلي). ولكن اللون ليس الطريقة الوحيدة لتطبيق التباين في التصميم، إذ يمكن استخدام أحجام النصوص لتطبيق ذلك، فعادةً ما يكون العنوان هو أكبر نص في الرسم البياني، متبوعًا بالعنوان الفرعي ثم الفقرات. يجب أن يكون العنوان دائمًا الأكبر حجمًا حتى يعرف المشاهد موضوع الرسم البياني مباشرة بمجرد النظر إليه. استخدم المصمم تباين ألوان جميل ومريح مع تباين واضح للخطوط في تصميم أنيق من موقع الخليج أونلاين. التوازن تطبيق التوازن في تصميم الرسومات البيانية يريح العينين لأن جميع العناصر ومواضعها تتناسب بسلاسة معًا، كما يحافظ التوازن على التكوين العام للتصميم خصوصًا في الرسومات البيانية الطويلة. وهناك نوعين من التوازن، توازن متماثل وتوازن غير متماثل. التوازن المتماثل هو عندما يكون لكل جانب من جوانب التصميم وزن بصري متساوٍ، هذا التصميم فعّال في الرسومات البيانية المتعلقة بالموازنة بين أمرين أو أكثر. التوازن غير المتماثل طبيعي أكثر وأقل تجانسًا من التوازن المتماثل، إذ ينشئ علاقة أكثر تعقيدًا بين العناصر ويجعل الرسم البياني أكثر ديناميكية لأن أسلوب التركيب لا يتكرر بشكل مفرط وممل. لاحظ التوازن المتماثل بين طرفي التصميم في الرسم البياني الذي يشرح الهلع للمصمم محمد السعيدي. الهرمية يساعد تطبيق هذا المبدأ على توجيه سير المخطط البياني وتدفقه، حيث يعمل هذا المبدأ على تنظيم العناصر حسب الأهمية، وبهذا النمط يقع عنوان الرسم البياني دائمًا في الجزء العلوي من التصميم حتى يسهل رؤيته وقراءته وفهمه من النظرة الأولى، ثم تتبعه عناوين فرعية وفقرات وأيقونات ورسومات أخف من ناحية الوزن البصري بالتسلسل بحسب الأهمية. يظهر تطبيق مبدأ الهرمية بوضوح في تصميم رسم بياني يوضح رحلة الموظف الجديد للمصممة بثينة العودة. التناغم اللوني تتميز تصاميم الرسومات البيانية بتناغم ألوانها دائمًا لذلك يجب على المصمم العمل على اختيار مخطط الألوان الجيد للتصميم مع مراعاة التأثيرات اللونية وعلاقتها بمحتوى ومعاني التصميم، ثم عليه أن ينشأ لوحة الألوان الخاصة بالرسم البياني والتقيد بها للحصول على تناغم لوني مذهل ومتكامل وغير شاذ. الرسم البياني يطبق التناغم اللوني الأحادي من موقع الأمم المتحدة. مطابقة الخطوط من المعروف في قواعد التصميم الالتزام بعدم استخدام أكثر من ثلاثة خطوط مختلفة في أي تصميم. يميل المصممون المبتدؤون إلى الإفراط في استخدام الخطوط، بسبب وجود الكثير من الخطوط للاختيار من بينها ويريدون دائمًا البحث عن شيء جديد ومثير للاهتمام. ولكننا بحاجة إلى التأكد من إقرانه بشيء مألوف وقابل للتطبيق، وعادة ما يكون هناك خط مهيمن وخط مساعد. استخدم في هذا الرسم البياني نوعان متناغمان من الخطوط من موقع الأناضول. الوحدة تطبيق الوحدة البصرية للتصميم يحتاج إلى تناغم وتجانس كافة العناصر معًا، إذ يجب تلوين كافة عناصر التصميم باستخدام لوحة ألوان واحدة لتحقيق التناغم اللوني، ويجب أن تكون الأحجام متناسقة عبر تطبيق الهرمية من جهة والتوازن من جهة أخرى، ويجب أن تكون الأيقونات بذات الحجم وكذلك خطوط نصوص الفقرات والعناوين الفرعية، من الأفضل أن تكون العناوين الفرعية بنفس نوعية الخط وحجمه ولونه وكذلك الأمر بالنسبة لبقية العناصر. يوضح هذا الرسم البياني كيفية تطبيق الوحدة على جميع عناصر التصميم – تصميم نصائح للاسترخاء للمصمم وتر التصميم. أشهر الأدوات والتطبيقات لتصميم الرسومات البيانية هناك تطبيقات ويب وسطح مكتب تحتوي العديد من القوالب الجاهزة للتعديل والمعالجة لإنشاء رسومات بيانية جميلة، وقد تحوي أيضًا على عناصر رسومية وخطوط جاهزة لتختار من بينها وتضيفه إلى التصميم. وهناك برامج تصميم عالية المستوى لا توفر كل هذه المزايا إلا أنها تستطيع إنشاء أي تصميم لرسم بياني مهما كان، ويعود الأمر كليًا إلى مهارات المصمم في استخدام هذه البرامج والتي لا غنى عنها لأي مصمم رسوميات حقيقي. برامج التصميم الاحترافية برامج التصميم الاحترافية مثل الفوتوشوب والإليستريتور وكورل درو وإنكسكيب وغيرها، حيث أن إمكانات هذه البرامج غير محدودة، يمكنك تطبيق كل المبادئ والقواعد بطريقتك، ويمكنك اختيار الألوان التي تريد، لا قوالب أو عناصر جاهزة تربطك بنمط محدد في التصميم، بل على العكس فأنت تتمتع بمطلق الحرية في ابتكار قوالبك وعناصرك الخاصة، حتى وإن عنى ذلك بذل جهد مضاعف ومزيدًا من الوقت إلا أن النتائج ستكون مميزة وخاصة وتحمل بصمتك بكل تأكيد. يستطيع الفوتوشوب وجيمب وأمثالهما تصميم رسومات بيانية طبعًا، ولكن الرسومات الشعاعية أفضل بكثير لهذه المهمة، لذلك يعد الإليستريتور والإنكسكيب وكورل درو وأمثالها أفضل التطبيقات التي تستخدم لإنشاء رسومات بيانية مميزة ومبتكرة. Adobe Spark وفرت أدوبي كعادتها حلولًا لتصميم الرسومات البيانية عبر تطبيق الويب والهاتف المحمول وهو تطبيق أدوبي سبارك Adobe Spark، ويتضمن التطبيق قوالب عديدة لتصميم قصص ومنشورات ثابتة ومتحركة لمختلف وسائل التواصل الاجتماعي، وكذلك لمواقع الإنترنت والتطبيقات. يحوي العديد من العناصر والأدوات إضافة إلى القوالب القابلة للتعديل. Snappa ستمكنك أداة الرسوميات Snappa من عمل رسوم بيانية جذابة حقًا تجذب انتباه الجمهور، فقد حصلت على معدلات مرتفعة في المراجعات والتقييمات. إنها سهلة الاستخدام للغاية مع وفرة من القوالب المعدة مسبقًا ومكتبة مليئة بملايين الصور عالية الدقة. تتيح خاصية إزالة خلفيات الصور بنقرة واحدة، ولديها مجموعة من تأثيرات النص والرسومات لاستخدامها، ويمكنك حتى المشاركة على وسائل التواصل الاجتماعي مباشرة من التطبيق. Piktochart يعد تطبيق Piktochart بسيطًا وسهلًا أكثر من سواه من التطبيقات لتصميم الرسوم البيانية، حيث يحتوي على قوالب سهلة التخصيص، بمجرد إضافة بياناتك ستتمكن من تعديل التخطيط ونظام الألوان وغيرها. Visme يمتلك Visme إمكانات إنشاء عروض تقديمية جيدة، ولكنه موجه بشكل خاص نحو إنشاء رسوم بيانية جذابة، ويشتمل على أكثر من 100 خط وملايين الصور المجانية وآلاف الرموز عالية الجودة، وهناك خيارات لتضمين الفيديو والصوت (بما في ذلك القدرة على تسجيل تعليق صوتي مباشرة في المحرر، وهو أمر مفيد)، كما يمكنك أيضًا تحريك المحتوى لتوضيح الأمور. من أهم ما يميز هذه الأداة عن غيرها هو أنها تسمح للمستخدمين بإعداد رسم بياني في بضع دقائق، وذلك بفضل مكتبة عناصر يمكن سحبها وإسقاطها بسهولة في مكانها. كما يتيح أيضًا إنشاء رسوم بيانية تفاعلية ومتحركة. خاتمة الرسوم البيانية شعبية للغاية والجميع يحب مشاهدتها، إنها تنقل المعلومة الثقيلة الكثيفة بأسلوب بسيط خفيف وسهل، وأصبحت الشركات الكبرى والصحف والمجلات تستخدمها لنقل المعلومات والأفكار والرسائل بصورة لطيفة ومحببة إلى جمهورها. فقد أصبح لهذا الاختصاص من تصميم الرسوميات مجال واسع وطلب كبير في الأسواق، وهذه فرصة جيدة لك لتستغلها وتنمي مهاراتك وتثري خبرتك من خلال إنشاء تصاميم جميلة تتماشى مع المبادئ ومطابقة للقواعد للوصول إلى الاحترافية في هذا العمل.

أنت كمصمم, إذا قمت يومًا ما بتسليم أعجوبتك المرئية لمطور فأنت تعرف تمامًا مدى الجدل الذي ينتج عن ذلك. هل ما تخيلته قابل للعمل عند النظر إليه من المنظور التطويري؟ هل يعلم المطور ما الآلية التي كانت تدور في عقلك؟ هل يقوم مطوّرك حقًا بالتطوير؟ القائمة تطول وتطول ولكن دائمًا ما يكون هنالك طرفين للقصة. وماذا عن المطور الذي ينتظر تصميمك؟ وللإجابة على هذا السؤال وعلى أسئلة أخرى قمنا بمقابلة فريقنا الخاص في KlientBoost للخروج بهذه الست نصائح لتعاون أفضل بين المطور والمصمم. كل هذا يبدأ بالتركيز على المستخدم يجب على كل من المطورين والمصممين أن يعملوا دائمًا وأن يُبقوا المستخدم في الحسبان. إن لم تكن التجربة أفضل للمستخدم فلا فائدة من تصميم او حتى بناء أي شيء أي أن جهودك المبذولة لن تكون متماثلة مع أهداف العمل. فإما إن كنت تصمم موقعًا جديدًا أو تطور خصائص جديدة للمنتج فيجب من البداية على فِرق التصميم والتطوير أن يكون لديها هدفًا مشتركًا لتطوير تجربة المستخدم. ولكن كيف بالإمكان أن نعرف ما هو أفضل للمستخدم؟ بالاختبار. وحسب "تن كادويك" من وكالة Five, فإن تجربة المستخدم واختبار المنتج يبدآن بمجرد بدء الأسبوع الأول من المشروع. والاختبار لتحسين تجربة المستخدم لا يتوقف أبداً خلال فترة حياة المشروع. تعطينا مجموعة Nielsen Norman قائمةً يجب على كل من المصممين والمطورين أن يتبعوها عندما يتعلق الأمر باختبار قابلية الاستخدام. وبمجرد اكتمال مرحلة ما قبل الاختبار, فإن فرق التصميم والتطوير تتقارب أكثر وتعلم بالضبط ما يجب التركيز عليه. كلما كان مبكرًا، كان أفضل لن تعلم فِرق التطوير أي شيء عادةً عن المشروع حتى تصلهم ملفات التصميم. وإذا كانت هذه الملفات من الصعب جدًا تنفيذها, فإن هذا يعني بأن المصمم أهدر وقته وأن عليه الآن العودة منذ البداية. ولتجنب حدوث هذا, فإن المصممين والمطورين يحتاجون للعمل سوياً منذ البداية. والانخراط منذ المراحل الأولى يضمن بأن تبقى كل الأطراف متوافقة سوياً ولديها نفس التركيز طوال الوقت. وجدت دراسة في قسم الهندسة الصناعية والإدارة في جامعة "أولو" بفنلندا بأن التعاون المبكر في مشروع ما بين جميع الأطراف يؤدي إلى: فرصة ضئيلة في تطوير تصاميم ركيكة. رضى أكبر بكثير عن عمل المنتج واستخدامه من قبل المستخدم. خلق مساحة للحلول الإبداعية والتبادل المكثف للأفكار قبل فوات الأوان. ولا يختلف المصممون والمطورون في هذا الشأن. أنظمة أقوى تعني عمليات أفضل. عندما تمتلك كل الفرق الأدوات والمعرفة المطلوبتين لإنجاز شيء ما فهي عادةً ما تنجح في انجازه. ولكن أحد الأخطاء الشائعة التي ستجدها بين المصممين والمطورين هي أحياناً أشياء بسيطة مثل: معايير التسمية. الأحجام. الهوامش. الحشوات. الشبكات. ولكن وجود ترتيب موحد من العمليات وطريقة معينة للتعامل معها يساعد على تسريع الأمور, وذلك لأنه لن يتم اهدار الوقت في الإجابة على أسئلة من السهل الإجابة عليها. وهذا يساعد على الوصول لهدف موحد لكل من المصممين والمطورين والذين لن يتعثروا بالمشاكل اللوجستية. وعندما يتعلق الأمر بالأنظمة والعمليات, فإنه هنا تحديداً يجب عليك الحصول على قائمة مفصلة يتّبعها كل فريق من الفرق قبل الانتقال للمرحلة التالية من المشروع. مما يؤدي إلى... ما قبل التسليم بتتبعك لكل نصائحنا حتى هذه النقطة فإنك بالتأكيد تدرك مدى أهمية تسليم مشروعك جاهزًا وبدون أي نقص للتحرك للمرحلة التالية. وبينما يقترب المصممون من إكمال أعمالهم, فإنه من المهم أن تعرج على الأهداف الرئيسية للمشروع للتأكد من اجتيازه للفحص. أسئلة مثل المذكورة بالأسفل ستساعدك على أن تجد تحديثات يجب أن تحدث قبل تمرير المشروع لفريق التطوير: هل جودة التصميم عالية وهل أنت راضٍ عنها؟ هل يحسّن التصميم تجربة المستخدم؟ هل تم اختبار التصميم من قِبل الزبائن الواقعيين؟ بالإجابة بنعم على كل الأسئلة السابقة, فإنك تقلل من فرصة عمل أي إعادة تصميم أو إعادة عمل. سيكون من الصعب عليك أن تجري أي تعديلات على التصميم بمجرد وصوله لأيدي المطور. كيف تسير الأمور؟ 10 مرات بإمكانك قراءة نبرة صوت أحد أو لغة جسده عندما تقابله, ولكن هل هذا كله يختفي عند قراءتك لنص أو لبريد إلكتروني؟ هذا هو نفس الشيء الذي يحدث مع المصممين والمطورين. بمجرد مرور المشروع من مرحلة ما لأخرى, فإن هنالك فرصة كبيرة بأن ترجمة المشروع سوف تختلف من عضو فريق لآخر. هل قصدت أن تعمل هذا لتصميمك أم ذاك؟ وبالفحص المتكرر بين المصممين والمطورين, يمكن للمشروع أن يستمر بالتحرك وذلك بفضل إزالة مشاكل التواصل والتفسير. التواصل الواقعي كلما عمل المصممون والمطورون سويًا على مشاريعك, زادت فرص التوتر. ومع فرقنا في KlientBoost, وجدنا بأنه من سرعان ما نسينا بأننا نعمل كفريق واحد للوصول لنفس الهدف. أما بوجود الوعي الذاتي والإيثار عند التواصل مع أعضاء الفريق الآخرين ستكون قادرًا على إيجاد حل منطقي لأي مشكلة قد تحدث وبسرعة. وباتّباع ال5 نصائح السابقة, بإمكانك وضع أساسات صلبة للتواصل تمنع المشاكل من التصاعد في المقام الأول. والآن حان دورك الفرق التي تتواصل بشكل منفتح وبشكل متكرر تبني منتجات أفضل. جرب هذه النصائح الستة في مؤسستك ونؤمن بأنك ستجد المشاريع أكثر سلاسة وسرعة وسيحظى الناس بالمزيد من المرح أيضًا. ترجمة -بتصرف- للمقال ‎6 tasty ways for designers and developers to collaborate better لصاحبه Johnathan Dane

سنتعلّم في هذا الدرس كيفية تصميم انفوجرافيك بسيط يوضح أكثر دول العالم استخدامًا للفيسبوك عام 2016، وسيتم وضع الخمس دول الأكثر استخدامًا للفيسبوك. افتح برنامج أدوبي إليستريتور واختر الأبعاد الافتراضية 960 في 560 لملف جديد من قائمة File>New وليكن نظام الألوان RGB وبدقة 72ppi بما أن تصميمنا سيكون للعرض على الشاشة كما هي حال غالبية تصاميم الانفوجرافيك. ستكون الفكرة العامة للتصميم هي وجود خريطة العالم وتحديد الدول المطلوبة بألوان مميزة مع ربطها بمستطيلات تحوي المعلومات التفصيلية لهذه الدول. لذلك سيكون علينا الحصول على خريطة العالم، هناك طريقتان للقيام بفكرة هذا التصميم، الأولى هي الحصول على خريطة العالم كعنصر فكتور واحد، والحصول على خرائط الدول المستهدفة وإسقاطها فوق خريطة العالم. والثانية استخدام خريطة العالم المفصلة والمجزأة سلفًا لعناصر عديدة تمثّل دول العالم. في هذا الدرس سنستخدم الطريقة الثانية. ابحث عبر الإنترنت عن هذه الخريطة، أنا وجدت خريطة فكتور مجانية بعنوان World map blue template من موقع FreePik وهي عبارة عن خريطة العالم بتصميم فكتور باللون الأزرق مجزّأة بحسب دول العالم الحالية. قم بفتح الملف وتحديد الخريطة فقط ونسخها ثم ألصقها في الملف الجديد الذي أنشأناه للتو. سيعتمد تصميمنا على أن تكون الخلفية سوداء، لذلك ارسم مستطيلًا أسود بحجم المستند كامًلا باستخدام أداة رسم المستطيلات Rectangle Tool. حدّد هذا المستطيل ثم أرسله للخلف من خلال النقر بالزر الأيمن للفأرة عليه واختيار القائمة Arrange > Send to Back أو من خلال الاختصار ]+Shift+Ctrl ستظهر الخريطة مجدّدًا في الواجهة ولكن حدود الدول داخل الخريطة بحسب التصميم الأساسي الذي حمّلناه باللون الأبيض وهو غير متناسق مع الخلفية السوداء. حدّد الخريطة ثم استبدل لون الحدود الأبيض باللون الأسود. ستلاحظ أن الخريطة مجموعة ككل في مجموعة واحدة عند التحديد ولكي نتمكّن من تمييز الدول المطلوبة سيكون علينا إلغاء التجميع عبر تحديد الخريطة ثم النقر بالزر الأيمن ثم اختيار Ungroup من القائمة. الدول الموجودة في رأس القائمة هي الهند, الولايات المتحدة, البرازيل، اندونيسيا والصين. لذلك سنبدأ بتمييز تلك الدول الخمسة والبداية ستكون مع الولايات المتحدة، حدّد خريطة الولايات المتحدة ثم استبدل اللون الأزرق الأساسي بلون أحمر R:255 B:0 G:0 مع ترك الحدود باللون الأسود. تابع تلوين بقية الدول الخمسة بألوان مختلفة. اخترت اللون الأبيض للبرازيل والأصفر للصين والأخضر لأندونيسيا والبنفسجي للهند. ولرسم خطوط توصيل لمستطيلات المعلومات بدقة وتناسق ومحاذاة مثالية قم بتفعيل خطوط الشبكة Grid ثم فعّل المطابقة إلى الشبكة Snap to Grid من خلال القائمة View كما في الصورة. قياس مربعات الشبكة كبيرة جدًّا كما في الصورة السابقة لذلك سنقوم بتجهيز إعداداتها عبر القائمة Edit > Preferences > Guides & grid اضبط Gridline every على 5mm وsubdivisions على 3. استخدم أداة القلم Pen Tool لرسم خط بحجم 1px باللون الأحمر ذاته المستخدم في تلوين خريطة الولايات المتحدة وسيكون الخط خارجًا من الولايات المتحدة ثم يتجّه يسارًا إلى قرب الطرف الأيسر للتصميم ثم يتّجه للأعلى. ارسم مستطيلًا أحمر باللون ذاته وبالاستعانة بالمطابقة مع خطوط الشبكة بحجم 45mm في 6.667mm مستخدمًا أداة المستطيلات Rectangle Tool. حدّد هذا المستطيل ثم اضغط باستمرار على مفتاح Alt أثناء سحب نسخة عنه باتّجاه الأسفل مستعينًا بالمطابقة إلى خطوط الشبكة ثم اضغط على الاختصار Ctrl+D ثلاث مرّات لتكرار عملية النسخ والتحريك ذاتها ثلاث مرّات وبذلك تحصل على أربع نسخ عن المستطيل الأساسي. لوّن المستطيلات الجديدة بلون أحمر فاتح FC7070# . ارسم دائرة مثالية باستخدام أداة رسم الأشكال البيضوية Ellipse Tool عبر الضغط المستمر على مفتاح Shift أثناء سحب الشكل وليكن أبعاد هذه الدائرة 6.667mm وبذات لون المستطيلات الجديدة الأخيرة. اسحب الشكل مستعينًا بميزة المطابقة إلى المستطيل الفاتح الأول بحيث يكون نصف الدائرة خارج المستطيل. حدّد الدائرة ثم انسخها وألصقها في المقدمة من خلال Ctrl+C وCtrl+F ثم حدّدها مع المستطيل المجاور واختر الخيار Minus Front من لوحة Pathfinder ليتم قص شكل الدائرة من جسم المستطيل. حدّد الدائرة واجلبها إلى المقدمة عبر النقر بالزر الأيمن واختيار القائمة Arrange > Bring to Front أو من خلال الاختصار [+Ctrl+Shift. من لوحة الحدود زّد حجم حدود هذه الدائرة إلى 2px مع محاذاتها للخارج ولوّنها باللون الأسود. غيّر لون الدائرة إلى اللون FF4848#. كرّر العملية ذاتها لبقية المستطيلات. في مكان آخر عبر البرنامج استخدم أداة القلم لرسم شكل كما في الصورة بحدود سوداء وبدون لون تعبئة وبحجم صغير جدًّا حيث أن الصورة التالية تم تكبيرها 1200% للعمل عليها. حدّد الشكل ثم انقر بالزر الأيمن واختر القائمة Transform > Reflect اختر الخيار العمودي Vertical ثم اضغط COPY. حدّد الشكلين وانقر بالزر الأيمن للفأرة واختر Join ليتم توحيد الشكلين في شكل واحد. اعكس الألوان في لوحة الألوان ليصبح لون التعبئة الأسود بدون لون. ارسم دائرة مثالية أعلى وسط الشكل. ضاعف شكل الدائرة ثم حدّد الدائرة الجديدة مع الشكل المرسوم سابقًا معًا واختر Minus Front من لوحة Pathfinder. حدّد الدائرة ثم انقر بالزر الأيمن واختر القائمة Transform > Scale ضع القيمة 90% ثم اختر OK. اختر أداة التحديد المباشر Direct Selection Tool ثم حدّد النقاط العلوية في شكل الجسم. اسحب شكل النقطة المجاورة لحدود الشكل ليتم تحقيق انحناء للزوايا القاسية. انسخ شكلي الجسم والرأس وحرّك النسخة الجديدة للأعلى واليسار قليلًا. صغّر حجم النسخ الجديدة لنحو 80%. حدّد الجسم والرأس الأساسيين ثم اذهب إلى القائمة Object > Path > Offset Path ضع القيمة 0.25mm ثم اضغط OK. حدّد الشكلين الجديدين ثم اختر Unite من لوحة Pathfinder لتوحيدهما في شكل واحد. استخدم أدوات Pathfinder لقص الشكل الجديد من شكل الجسم والرأس الخلفيين الصغيرين. اجمع هذه الأشكال Group ثم لوّنها باللون الأبيض وعدّل الحجم وضعها داخل الدائرة الأولى. سيدلُّ هذا الشكل إلى عدد السكان للبلد. ارسم خطًّا أبيض صغيرًا مائلًا بزاوية 45 درجة بداخل الدائرة الثانية وبحجم 1px ثم استخدم نهايات سهم من الطرفين كما في الصورة من خلال لوحة Stroke . سيمثّل هذا الشكل مساحة البلد. حدّد الدائرة الثالثة ثم انقر بالزر الأيمن واختر Transform > Scale ثم صغّر حجمها بنسبة 60% ثم اضغط COPY. لوّن حدود الدائرة باللون الأبيض وأزِل لون التعبئة ثم خفّف حجم الحدود إلى 1px. مجدّدًا اصنع نسخة عن الدائرة الجديدة وعدّل حجمها عبر تصغير الحجم أفقيًّا 40% والمحافظة على الحجم عموديًّا كما هو. اصنع نسخة أخرى عن الدائرة وصغّر الحجم عموديًّا هذه المرة بنحو 40% والمحافظة على الحجم الأفقي. وبهذا سيكون الشكل النهائي كما في الصورة، وسيكون للدلالة على عدد مستخدمي الإنترنت في هذا البلد. أخيرًا يمكنك الحصول على شكل رمز الفيسبوك فكتور مجانًا من خلال آلاف المصادر المتوفرة ووضعه ضمن الدائرة الرابعة وتلوينه باللون الأبيض للدلالة على عدد مستخدمي الفيسبوك في البلد. انسخ إحدى الدوائر ثم ضعها في طرف الدائرة الأساسية الحمراء العليا ثم أزِل لون الحدود واجعل لون التعبئة باللون الأحمر ذاته ثم ادمج الدائرة مع المستطيل باستخدام أدوات Pathfinder. حدّد جميع هذه الأشكال ثم اجمعها في مجموعة Group واحدة. استخدم خطًّا مناسبًا ولكن يجب أن يكون من الخطوط العريضة Bold وذلك لكتابة اسم البلد في الصف الأول وبالحجم المناسب أيضًا وباللون الأسود. استخدم ذات الخط والحجم واللون لكتابة باقي المعلومات بحيث سيكون الصف الثاني يضم عدد السكان والتالي سيكون مساحة البلد والثالث سيكون عدد مستخدمي الإنترنت والأخير سيكون حجم مستخدمي الفيسبوك. انسخ مجموعة الأشكال التي جمعناها سابقًا ثم ألصقها في أطراف التصميم بالقرب من الدول المطلوبة مع رسم الخطوط الواصلة بين هذه الأشكال وخرائط الدول مع مراعاة الألوان للدول. ثم اكتب البيانات الصحيحة الخاصة بكل دولة. لاحظ أنني قمت بتغيير لون الأيقونات الدلالية لبعض الدول إلى اللون الأسود وذلك بحسب درجة قتامة لون الدائرة الخلفية. استخدم خطًّا خاصًا بالعناوين العريضة لكتابة عنوان الانفوجرافيك وهو "أكثر دول العالم استخدامًا للفيسبوك 2016” وبحجم كبير وبلون أبيض. وفي أسفل التصميم ضع نسخة عن الأيقونات المستخدمة باللون الأبيض واستخدم ذات خط العنوان وبحجم صغير لكتابة شرح دلالة الأيقونات. هذا انفوجرافيك بسيط وعملي يوضّح ببساطة معلومة عن أكثر دول العالم استخدامًا للفيسبوك عام 2016. تم تصميمه ببساطة باستخدام أداوت الإليستريتور الأساسية وبدون أية تأثيرات. الأسلوب البسيط لهذا الانفوجرافيك وبدون مؤثرات هو الأسلوب الأكثر انتشارًا بين مصممي الانفوجرافيك بشكل عام، بحيث يُستخدم لإيصال المعلومة بكل وضوح وبساطة وبدون تشتيت التركيز على الهدف من التصميم. المصادر القائمة التي تضم ترتيب الدول الأكثر استخدامًا للفيسبوك Leading countries based on number of Facebook users as of May 2016 من موقع Statista المتخصص في الدراسات والتحليلات والإحصاء. المعلومات التفصيلية للدول من عدد السكان والمساحة وعدد مستخدمي الإنترنت من كتاب The World Factbook من موقع CIA. خريطة العالم المفصّلة بحسب الدول فكتور مجانية من موقع FreePik. أيقونة الفيسبوك فكتور مجانية بعنوان Colored buttons for social networks بواسطة ibrandify / Freepik.