تصميم هيكل واجهة المستخدم لتطبيق ويب من صفحة واحدة

برمجة تطوير البرمجيات تصميم موقع إلكتروني CSS HTML برمجة تطوير البرمجيات تصميم موقع إلكتروني CSS HTML

المشروع عبارة عن تصميم هيكل واجهة المستخدم لتطبيق ويب من صفحة واحدة - single page web App - لم أكن واضحا كفاية عند طرح المشروع سابقا لذلك بذلت كثيرا من وقتكم الثمين فى الرسائل الخاصة لشرح ما لا أريده وليس ما أريده لذا الرجاء قراءة هذا الهامش بعناية تم تصميم الفرونت اعتمادا على مبدأ Jam Stack JavaScript, APIs, and Markup Html = Markup ما اطلبه فى هذا المشروع هو ال html ال Markup كل ما هو ليس html غير مطلوب منك بمعنى اذا كان هناك زر او قائمة مثلا فى التصميم المطلوب منك وضعه فى المكان الصحيح مع الألوان الاحترافية والفونت التمام الخ وبس كيف يعمل متى يظهر ماذا يحدث حين الضغط عليه تفعيل القائمة الخ - ليس مطلوب منك - أنا أطلب واجهة برنامج وليس برنامج تفاصيل التصميم التطبيق تعليمي للأطفال لتعليم الحروف والارقام الصفحة تحتوي(fixed - footer and header) و على بطاقة (card) كمحتوى رئيسي ، توضيحا header من تصميمك ولكن يكون دائما فى اعلى الصفحة و footer من تصميمك ولكن يكون دائما في أسفل الصفحة لا يوجد scroll فى اى من الاتجاهين أي أن المحتوى الرئيسى يشغل كامل مساحة الشاشة دائما الهدف من التصميم بهذا الشكل لإعطاء تجربة مستخدم أشبه بتطبيقات الأندرويد و pc المحتوى الرئيسى هو كائن html لوحات تعليمية مختلفة شبيهة شرائح البوربوينت اختيار من ثلاث إجابات على أن تكون الإجابة كلمة واحدة اختيار من ثلاث إجابات على أن تكون الإجابة سطر واحد اختيار من ثلاث إجابات على أن تكون الإجابة صورة الخ أى أنك ستعطيني الـ html لصفحة واحدة تحتوى على كائن المحتوى الرئيسى والذى هو <div>او <section> او <card > او كيفما كان تصميمك + 10 تصميمات متجاوبة مختلفة لهذا الكائن فقط فى الأمثلة المرفقة يوجد ملف index يمثل الصفحة المحتوى الرئيسى هو كائن <div> يسمى heroBody <div id ="heroBody" وملف cards.html فيه نسخ مختلفة من heroBody مفصوله بتعليق كل ما عليك هو نسخ احدها وأستبدال heroBody بالكامل فى ال index رجاء قراءة هذا الهامش بعناية أكثر اذا لم يكن لديك فى فى قائمة مهاراتك القدرة على التعامل مع أى css stylesheet حديث مثل Bulma css او Materialize css فأنت بعيد عن مبدأ التصميم Jam Stack وإليك لماذا إذا كنت تهتم فى هذا المشروع اعتبرنى زميلك الذى سيقوم بكتابة برنامج الـ جافا سكربت - التالى ليس مطلوب منك كمصمم واجهة لنعتبر ان اللوحة الحالية هى اختيار من ثلاث إجابات على أن تكون الإجابة كلمة واحدة وان الاجابة هى كلمة تفاحة الاجابة الصحيحة يجب ألا تكرر موقع ظهورها عند تتابع الاسئلة لا تظل الاجابة الصحيحة فى المنتصف مثلا يتم تصنيف كلمة تفاحة على حسب تكرار الاجابة فى قائمة ضعيف متوسط جيد مثلا الخ اى ان عملى دائما هو انشاء والتلاعب وتغيير محتوى كائنات html بشكل ديناميكي برنامجى لا يعرف الشريحة القادمة للمستخدم - الكلمة التي ستتكرر 4 او 5 مرات فى نفس الجلسة هي من القائمة (ضعيف ) لكل طفل على حدى هى قمة جبل الجليد ولكن هدفى من شرح ما ليس مطلوب منك هو اننى واى اى شخص يقوم بتصميم Jam Stack لن يتعامل إلا مع تصميم يعتمد css stylesheet حديث مثل Bulma css أو Materialize css او ايا كان من اختيارك التصميم بالطريقة القديمة سيكون كابوس حقيقي هذا لذلك رجاء لا تقترح أن تصمم الصفحة بالطرق القديمة وكأنها صفحة ويب هذا خطئ مبتدئين فى ال Jam Stack هذه المكتبات تم تصميمها لتناسب ال Jam Stack بسطور قليلة من الجافا سكريبت لى تحكم كامل فى اى كائن html فى الصفحة فى الأمثلة المرفقة أنا أستخدم Bulma Css لاحظ عدم وجود ملف ستيل شيت اصلا لا يوجد سوى سطر واحد css هو html { overflow: hidden اضفته لإزالة scroll bar الخاص بالكروم مثلا باستخدام bulma قمت بحل مشكلة ان المحتوى الرئيسى يجب أن يشغل كامل مساحة الشاشة دائما باستخدام كائن hero من مكتبه bulma css كائن <div>او <section> وضع كلاس hero و كلاس is-fullheight </section><section class="hero is-fullheight"> </section> هذا الكائن يحافظ على خاصية ملء الشاشة حتى بدون محتوى داخله حتى وأن تم تغيير حجم الشاشة ديناميكيا انا ومن خلفية بايثون وروبوتكس فى ساعات قليله استطعت التعامل بشكل جيد مع هذه المكتبات قد تجد فى الأمثلة المرفقة تصميم ممتاز لل grid و columns ولكن ما ينقص التصميم للتصدير هو اللمسة الاحترافية أساسيات css مارجن هنا وبادنج هناك الوان فونت (شغلك) اذا كنت قد أثرت فضولك فأنا اعرف ان خبرتك وخلفيتك مع ساعات قليلة من التعلم سوف تعطيني ما اريد لذا ارحب بك أن تتعلم فى مشروعى ولا أبالي إن كان اول تعامل لك مع css stylesheet سأقوم بتمديد المشروع اذا لزم الأمر كما اعتبر أن المشروع منجز اذا قمت فقط بالتعديل على الأمثلة وتناسق الالوان الخ سأكون معك اثناء التنفيذ وانت لن تحتاج إلا للإشارة إلى ما بحثت فيه انا من قبل ارحب باى استفسار حتى وإن كنت لن تقدم عرض هدفى هو الحصول على markup designer محترف للتعامل فى مشاريع اخرى شكرا على المرور