أسئلة حول تصميم وتطوير المواقع وإدارتها والعمل الحر وتكلفة المشاريع

بتاريخ 26 دقائق مضت قال Amen Ramadan:

- ما هي الخطوة التالية من بعد تصميم الواجهة الامامية لموقع ما؟

هذا يعتمد على نوع الموقع الذي تعمل عليه، فإذا كان موقع قابت static فالخطوة التالية هي تجريبه ورفعه على استضافة، بينما إذا كان متغير dynamic فيجب ان يتم ربطه مع الـ backend حتى يتحول لموقع متغير.

بتاريخ 26 دقائق مضت قال Amen Ramadan:

- ومتى احتاج الى مطور الواجهات الخلفية ؟من اين يبدأ وماذا يكمل ؟

عندما تريد تحويل موقعك لموقع متغير، إذا اردت مثلاً ان يحتوي موقعك على مقالات يتم اضافتها إلى الموقع وعرضها أو اي شيء يجب ان يتم اضافته و عرضه أو تعديله باستمرار.

ويمكن ان يبدأ بشكل متوازي مع مطور الواجهات الأمامية بحيث يتم الربط بين الواجهتين بشكل متزامن أو أن يسبق مطور الواجهات الأمامية وعندا يقوم مطور الواجهات الامامية بالربط مع الواجهة الخلفية اثناء بناء الموقع أو أن يبدأ بعد مطور الواجهات الأمامية وعندها يجب ربط الواجه الأمامية وتعديلها لتتناسب مع الواجهة الخلفية.

بتاريخ 26 دقائق مضت قال Amen Ramadan:

- سمعت ان من بعد اطلاق الموقع على الويب يتم ادارته عن طريق الوورد بريس هل هذا يعتبر تخصص او يحتاج الى كورس او خبرة وكيف تتم ادارته بالضبط؟

هذا خاطئ، فالورد بريس هو نظام ادارة محتوى CMS وهو يختصر عليك بناء الواجهات الأمامية والخلفية عن طريق تقديم قوالب جاهزة قابلة للتعديل بسهولة، وهو بحاجة لدورة مختلفة بالفعل ويوجد شرح تفصيلي عنه في دروة php ولكن يمكنك استخدامه بدون اي خبرة مسبقة فهو سهل جداً ويمكن تعلم اساسياته خلال فترة بسيطة.

مقالات حسوب عن وردبريس

بتاريخ 26 دقائق مضت قال Amen Ramadan:

- عند تصميم الموقع نحن نعمل على احجام صور معينة لكن عند تغييرها قد يختلف تنسيق الصفحة ويتعرض الى مشاكل ..كيف يتم الاعتناء بمثل هذه التفاصيل ليصبح الموقع بدون اخطاء ومتكامل واحترافي ؟

يتم ذلك عن طريق اختبار الموقع مع عدة احجام من الصور وعدم قبول الصور التي لا تتناسب مع قياسات الموقع، وكذلك يمكن التغلب على هذه المشكلة بجعل الصور بالوضعية cover بحيث نعطيها الخاصية :

object-fit: cover;

حيث عند استخدام هذه الخاصية، يتم تغطية المساحة المحددة بالكامل بالصورة، ويتم تغيير حجم الصورة بحيث يتم الحفاظ على نسبة العرض إلى الارتفاع للصورة الأصلية.

ويمكنك التعمق اكثر من خلال اتباع هذا النقاش :

بتاريخ 26 دقائق مضت قال Amen Ramadan:

- هل اضافة لغات متعددة للموقع وظيفة مطور الواجهات الخلفية ام الامامية وكيف يتم ذلك ؟اذا اردنا اضافة ثلاث لغات مثلا ؟

هي وظيفة الاثنين، فمطول الواجهة الامامية يقوم بإعداد الواجهة الامامية لقبول اكثر من لغة وكذلك الأمر بالنسبة لمطور الواجهات الخلفية.

بتاريخ 26 دقائق مضت قال Amen Ramadan:

- موقع مثل الموقع الموجود في مسار الدورة (تطوير موقع شركة) , أعني انه يحتوي على اكثر من صفحة وهو واسع .. ما هي تكلفته اذا اردنا تصميمه لدى مطور واجهات امامية وماذا يطلب ايضا مطور الواجهات الخلفية {بشكل تقريبي} وهل يوجد تكلفة اخرى تحتسب لحين اطلاق الموقع

هذا يعتمد على الكثير من المتغيرات ولا يمكنني اعطائك سعر معين، ولكن قد يفيدك القاء نظرة على السوق المحلية والتي تريد العمل لديها حتى تعرف ماهي الاسعار المناسبة.

بتاريخ الآن قال Amen Ramadan:

- ما هي الخطوة التالية من بعد تصميم الواجهة الامامية لموقع ما؟

بعد تصميم الواجهة الأمامية للموقع، يتم العمل على تطوير الواجهة الخلفية (Back-end) وربطها بقاعدة البيانات والواجهة الأمامية. وقد لا تحتاج بعض المواقع أصلا الى ذلك، من مثل مواقع صفحات الهبوط أو المواقع التعريفية او غيرها. فالتصميم والتنفيذ هو مرحلة من المراحل المهمة في تطوير منتجات الويب الرقمية.

بتاريخ الآن قال Amen Ramadan:

- ومتى احتاج الى مطور الواجهات الخلفية ؟من اين يبدأ وماذا يكمل ؟

يحتاج المطور الخلفي إلى العمل بشكل متوازٍ مع المطور الأمامي في بعض الأحيان، وذلك للتأكد من ربط الواجهة الخلفية بشكل صحيح بالواجهة الأمامية، وذلك لغرض اخراج تطبيق ويب شامل. فمطور الواجهة الخلفية سيحتاج في الغالب تصدير واجهة برمجيات API ليستعملها مطور الواجهة الامامية في تصيير صفحات ويب تفاعلية ومتجاوبة. 

فحاجة احدهما الآخر في كثير من الاحيان غير ثابتة ومتغيرة وتتفرع الى جزئيات عديدة (الا في الفرق المنظمة جدا التي تسير على قدر عال من المنهجية ويسيرها مدير فريق محترف وملم بجزئيات المشروع وخادما لمبادئ هندسة البرمجيات).

بتاريخ الآن قال Amen Ramadan:

- سمعت ان من بعد اطلاق الموقع على الويب يتم ادارته عن طريق الوورد بريس هل هذا يعتبر تخصص او يحتاج الى كورس او خبرة وكيف تتم ادارته بالضبط؟

نعم، يمكن استخدام WordPress لإدارة المحتوى بعد إطلاق الموقع، ويمكن تعلم كيفية استخدامه عبر دروس على الإنترنت أو كورسات، وهو أقل تعقيدا من البرمجة الخاصة، ولكن رغم ذلك هو يحتاج بعض الالمام والخبرة.

بتاريخ الآن قال Amen Ramadan:

- عند تصميم الموقع نحن نعمل على احجام صور معينة لكن عند تغييرها قد يختلف تنسيق الصفحة ويتعرض الى مشاكل ..كيف يتم الاعتناء بمثل هذه التفاصيل ليصبح الموقع بدون اخطاء ومتكامل واحترافي ؟

من أجل ضمان عدم حدوث مشاكل في التنسيق عند تغيير حجم الصور، يمكن استخدام تقنيات مثل تحديد حجم الصور بشكل أوتوماتيكي. فلا نعطي الصورة مثلا عرضا 1200 بكسل ان كان المقصود هو عرض الشاشة وانما نعطيها عرضا 100 بالمئة كنسبة حتى يتم اعتبار هاته النسبة من العرض الكامل بشكل تلقائي.

بتاريخ الآن قال Amen Ramadan:

- هل اضافة لغات متعددة للموقع وظيفة مطور الواجهات الخلفية ام الامامية وكيف يتم ذلك ؟اذا اردنا اضافة ثلاث لغات مثلا ؟

إضافة لغات متعددة ينتهج طرقا مختلفة، ولكن بشكل عام. يتم تخزين ملفات JSON على الخادم تحوي كائنات تعرف كل كلمة وترجمتها الموافقة في لغة معينة، ثم يتم استعمال حزم من مثل i18n لحقن ما يوافق ترجمة كل كلمة من هاته الملفات.

بتاريخ الآن قال Amen Ramadan:

- موقع مثل الموقع الموجود في مسار الدورة (تطوير موقع شركة) , أعني انه يحتوي على اكثر من صفحة وهو واسع .. ما هي تكلفته اذا اردنا تصميمه لدى مطور واجهات امامية وماذا يطلب ايضا مطور الواجهات الخلفية {بشكل تقريبي} وهل يوجد تكلفة اخرى تحتسب لحين اطلاق الموقع

تكلفة تصميم موقع يختلف حسب حجمه ومتطلباته، وعادة ما يتم الاتفاق على التفاصيل مع المطور المختار، والتكلفة تتضمن تصميم الواجهة الأمامية والخلفية وربطهما، وقد يتم احتساب تكلفة إضافية لبعض الميزات الخاصة أو التعديلات الإضافية.

تم الإجابة على أغلب أسئلتك بشكل وافي، لكن بخصوص التكلفة أنت بحاجة إلى معرفة التالي:

في البداية قد تضطر إلى قبول تصميم صفحة هبوط مثلاً تتكلف 100 دولار بمبلغ 50 أو 25 دولار، وذلك من أجل الحصول على أول عميل لك على مواقع العمل الحر.

حيث أن التكلفة الطبيعية لصفحة الهبوط تتراوح ما بين 50 إلى 100 دولار وقد تصل إلى 300 دولار، وذلك تبعًا لمدى التعقيد في التصميم وهل سيتم تنفيذ التصميم من قبلك، أم ستقوم باستلام التصميم جاهز وستعمل على أنت على تنفيذه.

بعد ذلك، سيتعين عليك استكشاف متوسط الأسعار التي يطلبها المستقلين الآخرين، وهو عامل هام للمنافسة في ذلك السوق، فلن تستطيع رفع سعرك إلا إذا كان لديك سنوات خبرة ومعرض أعمال مميز.

وببساطة تستطيع الإعتماد على تكلفة 50 دولار للصفحة وزيادة التكلفة تبعًا للوقت والتعقيد والمميزات المطلوبة، وحجم الخبرة التي يتطلبها المشروع، حيث أن للخبرة ثمن بالتأكيد، ولكن الكثير من الخبرة يعني أنك قادر على تنفيذ المشروع بشكل سريع وهنا يجب حساب تكلفة الخبرة والجودة بعيدًأ عن عامل الوقت.

وأيضًا يجب احتساب القيمة التي تقدمها للعميل، فمثلاً لو كنت تقوم ببناء موقع لعميل يحقق لهم أرباح كبيرة على المدى الطويل، فبالطبع أنت بحاجة إلى حساب تكلفة أعلى للمشروع، أي عليك دائمًا وضع العائد الذي سيحصل عليه العميل جراء تنفيذك للمشروع فإن كان بسيطًا فليس من المنطقي وضع تكلفة مرتفعة للمشروع.

وهناك عوامل أخرى مثل البلد الخاصة بالعميل وعملة تلك البلد وقيمتها مقابل الدولار، وأيضًا إذا كان الموقع خاص بشركة فستكون التكلفة أكبر مقارنًة إذا ما كان لعميل بمفرده ولمشروع شخصي وبميزانية منخفضة.

وقد تم النقاش حول العمل الحر وحساب تكلفة المشروع في النقاشات التالية بشكل مفصل أكثر:

سأوضح لك بعض الأسئلة بشكل مفصل كما يلي

بتاريخ On 24‏/4‏/2023 at 20:28 قال Amen Ramadan:

- عند تصميم الموقع نحن نعمل على احجام صور معينة لكن عند تغييرها قد يختلف تنسيق الصفحة ويتعرض الى مشاكل ..كيف يتم الاعتناء بمثل هذه التفاصيل ليصبح الموقع بدون اخطاء ومتكامل واحترافي ؟

 

هناك عدة طرق للحفاظ على تنسيق الصفحة عند تغيير حجم الصور، منها:

•  استخدام العلامات التجارية والأبعاد النسبية: يمكن استخدام العلامات التجارية مثل "width" و "height" و "max-width" و "max-height" و "min-width" و "min-height" لتعيين الأبعاد الصحيحة للصور والحدود الأقصى والأدنى لحجمها، وذلك يساعد على الحفاظ على تنسيق الصفحة عند تغيير حجم الصور.
• استخدام الصور المتجاوبة: يمكن استخدام الصور المتجاوبة (Responsive Images) والتي تتكيف مع حجم الشاشة وتقلل من اختلاف التنسيق عند تغيير حجم الصور، وذلك يمكن تحقيقه عن طريق استخدام وسائط الصور المختلفة مثل srcset و sizes.
•  استخدام أدوات التحكم في حجم الصور: يمكن استخدام برامج تحرير الصور مثل Photoshop و GIMP وأدوات الضغط مثل TinyPNG و JPEGmini للحفاظ على جودة الصور وتحديد الأبعاد الصحيحة لتجنب اختلافات التنسيق.
• التأكد من توافق الأبعاد: يجب التأكد من توافق أبعاد الصور مع تنسيق الصفحة وعدم تجاوز حجم الصور الحدود المحددة في التصميم، وذلك يمكن تحقيقه عن طريق قياس الأبعاد بدقة ومراجعتها مع متطلبات التصميم.

بشكل عام، يجب الاهتمام بتصميم الموقع من البداية بحيث يكون متجاوباً ومتناسباً مع جميع الأحجام الممكنة للشاشات والأجهزة المختلفة، ويمكن استخدام الأدوات المتاحة واعتماد أفضل الممارسات لضمان الحفاظ على تنسيق الصفحة عند تغيير حجم الصور أو أي عنصر آخر في التصميم.

بتاريخ On 24‏/4‏/2023 at 20:28 قال Amen Ramadan:

هل اضافة لغات متعددة للموقع وظيفة مطور الواجهات الخلفية ام الامامية وكيف يتم ذلك ؟اذا اردنا اضافة ثلاث لغات مثلا ؟

إضافة دعم للغات المتعددة للموقع يتطلب جهودًا من كل من مطور الواجهة الأمامية والخلفية للموقع. 

• على المطور الأمامي تحديد العناصر التي يجب ترجمتها وجعلها قابلة للتغيير بسهولة، مثل النصوص المستخدمة في القوائم والأزرار والعناصر الأخرى التي يتفاعل معها المستخدم. يمكن استخدام ملفات الترجمة (مثل JSON، YAML، أو PO) لتخزين النصوص المترجمة وتحميلها بشكل ديناميكي.
• من ناحية المطور الخلفي، يتعين عليه تحديد الطريقة المناسبة لتحديد اللغة المستخدمة من قبل المستخدم، وتخزينها بشكل دائم في قاعدة البيانات أو تخزينها في ملفات تعريف الجلسة. ويمكن أيضًا استخدام رموز اللغة المختلفة (مثل "en" للإنجليزية، "ar" للعربية، و "fr" للفرنسية) لتحديد اللغة المستخدمة.

هناك العديد من الأدوات التي يمكن استخدامها لتسهيل إضافة دعم للغات المتعددة، ومنها:

• gettext: هي أداة لترجمة النصوص المستخدمة في تطبيقات ومواقع الويب، وتعتمد على ملفات الترجمة المختلفة لتحقيق ذلك.
• i18next: هي أداة لإدارة اللغات المتعددة وترجمة المحتوى في تطبيقات الويب والمواقع، وتوفر واجهة سهلة الاستخدام لإضافة وتحرير الترجمات.
• Polyglot.js: هي مكتبة JavaScript تساعد على تحويل النصوص المعروضة في تطبيقات الويب إلى لغات مختلفة، وتتيح إمكانية تخزين الترجمات في ملفات JSON.
• WPML: هي إضافة لنظام إدارة المحتوى ووردبريس تسهل إدارة اللغات المتعددة وترجمة المحتوى، وتوفر واجهة سهلة الاستخدام لإضافة وتحرير الترجمات.
• Laravel Localization: هي إضافة لإطار عمل لارافيل تساعد على تحويل التطبيقات إلى لغات مختلفة، وتوفر واجهة سهلة الاستخدام لإدارة الترجمات.

تستخدم هذه الأدوات وغيرها من الأدوات لتسهيل وتبسيط إضافة دعم للغات المتعددة في تطبيقات الويب والمواقع، وتساعد على توفير وقت وجهد المطورين في هذه العملية.

بعد تصميم الواجهة الأمامية لموقع ما، تحتاج إلى تطوير الواجهة الخلفية التي هي المسؤولة عن معالجة البيانات والتفاعل مع قواعد البيانات والخوادم. لتطوير الواجهة الخلفية، تحتاج إلى مطور الواجهات الخلفية الذي يستخدم لغات برمجة مثل **PHP** أو **Python** أو **Java** أو **Ruby** وإطارات عمل مثل **Laravel** أو **Django** أو **Spring** أو **Rails**.

مطور الواجهات الخلفية يبدأ بتحديد متطلبات المشروع والمهام التي يجب تنفيذها والتقنيات التي يجب استخدامها. ثم يكتب التعليمات البرمجية لإنشاء واجهات برمجة التطبيقات (APIs) والروابط (endpoints) والخوارزميات والدوال التي تسمح بالتواصل بين الواجهة الأمامية وقاعدة البيانات والخادم. كما يقوم بإجراء اختبارات وتصحيح أخطاء وتحسين أداء التطبيق.

يبدو أنك سمعت أنه بعد إطلاق الموقع على الويب، يتم إدارته عن طريق **WordPress**. ولكن هذا لا يعتبر تخصصًا أو يحتاج إلى كورس أو خبرة، بل هو نظام إدارة محتوى (CMS) يسهل عليك إضافة أو تعديل أو حذف المحتوى على موقعك دون الحاجة إلى التعامل مع التعليمات البرمجية.

لإدارة موقعك عن طريق WordPress، تحتاج إلى تثبيته على خادمك وإنشاء حساب مستخدم لديه صلاحيات إدارية. ثم تستطيع الدخول إلى لوحة التحكم (dashboard) حيث تجد خيارات مختلفة لإدارة المظهر (appearance) والإضافات (plugins) والصفحات (pages) والمقالات (posts) والقائمة (menu) وغيرها من المكونات المرئية وغير المرئية لموقعك.

عند تصميم الموقع، يجب أن نأخذ بعين الاعتبار أن الصور التي نستخدمها تتناسب مع حجم وشكل العناصر الأخرى في الصفحة. إذا قمنا بتغيير حجم أو نسبة الصور، فقد يؤدي ذلك إلى تشويه التصميم أو إخفاء بعض المحتوى. لذلك، ينصح باستخدام أدوات مثل CSS Grid أو Flexbox لترتيب العناصر بطريقة مرنة ومتجاوبة مع مختلف الأجهزة والشاشات. كما يمكن استخدام خاصية srcset في عنصر img لتحديد صور مختلفة بحسب عرض الشاشة. هذه الطرق تساعد على جعل الموقع بدون أخطاء ومتكامل واحترافي.

- إضافة لغات متعددة للموقع هي وظيفة تشترك فيها كلا من مطور الواجهات الأمامية والخلفية. مطور الواجهات الأمامية يقوم بإنشاء قائمة للاختيار بين اللغات المتاحة وتغيير ترتيب واتجاه العناصر بحسب اللغة المختارة. مطور الواجهات الخلفية يقوم بإنشاء قاعدة بيانات تحتوي على المحتوى المطلوب بكل لغة وإرساله إلى الواجهة الأمامية عند طلبه. إذا أردنا إضافة ثلاث لغات مثلا، فيجب أن نضمن أن كل صفحة في الموقع لديها نسخة مطابقة باللغات الثلاث.

تكلفة تصميم هذا الموقع تعتمد على عدة عوامل، مثل عدد ونوعية الصفحات، والمحتوى المطلوب، والمهارات والخبرة التي يتمتع بها المطور. لكن بشكل تقريبي، يمكن أن نقول أن تكلفة تصميم هذا الموقع تتراوح بين 250 و 500 دولار أمريكي (يمكنك معرفة هذه الأسعار من خلال تصفح موقع مستقل للعمل الحر).

هذه التكلفة تشمل فقط عملية التصميم والبرمجة، ولا تشمل التكاليف الأخرى التي قد تحتاجها لإطلاق الموقع، مثل شراء اسم نطاق، أو استضافة، أو شهادة SSL، أو خدمات دعم فني.