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

المشروع عبارة عن تصميم هيكل واجهة المستخدم لتطبيق ويب من صفحة واحدة - 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 محترف للتعامل فى مشاريع اخرى

شكرا على المرور