المخبر السبيستوني للبرمجة: دورة تصميم صفحات الويب-الدرس1-
السلام عليكم ورحمة الله وبركاته.
نسأل الله أن يعلمنا ما ينفعنا وان ينفعنا بما علمنا وأن يزيدنا علما اما بعد:
كيف الحال احبابي في الله؟ ان شاء الله كل اموركم بخير يا رب.
اليوم ان شاء الله سننطلق في أول درس من دورتنا، ونسأل الله التوفيق لما فيه الخير والصلاح لنا جميعا امين ♥
السبب في اختياري لهذه الدورة دون غيرها، لان تصميم المواقع اصبح من اهم المجالات التي تسيطر اما على السوق او على البرمجة، كون ان العالم اصبح متصلا بالانترنيت، لذلك احببت ان نفهم معا بطريقة بسيطة وممتعة، كي يتم صناعة هذه المواقع و صفحات الويب الجميلة جدا والمبهرة ان شاء الله تعالى.
صفحات الويب يتم برمجتها باستعمال لغتين هما لغة HTML و لغة ال CSS، هاتين اللغتين ليستا لغة برمجة، فلغة ال HTML هي لغة هيكلية اي بمعنى انها المسؤولة عن هيكلة صفحة الويب الخاصة بنا، وهي المسؤولة عن ادراج الكتابات والصور والجداول وما الى ذلك ، ففي النهاية هي نوع من معالجة النصوص لكن بطريقة برمجية(واقول بطريقة برمجية رغم انها ليست لغة برمجة لاننا سنستعمل فيها الاكواد)، أما لغة CSS فهي لغة تنسيقية بمعنى هي المسؤولة عن تزيين وتنسيق وتلوين صفحة الويب الخاصة بنا، هي من تنسق الجداول و الصور وكل الامور المدرجة في صفحتنا.
الجميل في الأمر، انه في دورتنا هذه لن نكون مجبرين على كتابة الاكواد وحفظها بإذن الله، سنعتمد على اداة خارقة تمكننا من تصميم صفحاتنا وباحترافية تامة، ففي نهاية يمكننا اعتبار هذه الاداة لعبة لتصميم صفحات الويب.
اسم الاداة Bootstrap studio ، وللتذكير البوتستراب هي مكتبة CSS تم كتابتها من قبل شركة Twitter، هذه المكتبة عبارة عن اكواد تنسيقية جاهزة تساعدنا في تنسيق صفحات الويب بطريقة خرافية دون تعب او جهد وربح الوقت ايضا، واداتنا التي سوف نستعملها تستعمل هذه المكتبة في التنسيق.
يمكنكم تحميل الاداة ان شاء الله بكل بساطة من هنا:
https://drive.google.com/file/d/1u1T...WRHp1jocw/view
بعد تحميلها قوموا بتثبيتها كما تثبتون اي برنامج اخر، في النهاية ستجدون ايقونة على سطح مكتبكم بهذا الشكل:
جميل جدا، بداية موفقة يا ابطال
الان دابل كليك (ضغطتين) لنفتح الاداة الساحرة الخاصة بنا:
ترااااا، اهلا بكم في اداتكم الخارقة، ستجدون شعار البرنامج مع 3 ازرار تحته:
1/ الزر الاول Getting started guide وهو مرشد لكيفية استعمال الاداة، يمكنكم استعماله في حالة ما مللتم مني هيهيهيههي
2/ الزر الثاني Create new design وهو الزر الذي سنستعمله الان ان شاء الله و الذي يمكننا من انشاء مشروع جديد.
3/ الزر الثالث Open existing وهو زر يمكننا من ادراج مشروع سابق كنا قد عملنا عليه.
ما شاء الله، الان نضغط على الزر الثاني لنبدأ باول صفحة لنا ، يلا يا ابطال، بعد الضغط نجد هذه الواجهة بانتظارنا:
كما ترون في الصورة، قمت بشرح الواجهة، يوجد خانة لكتابة اسمع المشروع ويوجد تحتها قائمة فيها اصدارات مكتبة البوتسرتاب، يمكنك الضغط عليها لاستكشاف الاصدارات، فالاداة تحتوي على الاصدار الثالث والرابع، ونحن سنستعمل الرابع ان شاء الله تعالى.
ويمكنكم ايضا رؤية بعض القوالب الجاهزة والتي يمكننا التعديل عليها، لكن نحن سننشئ قالبنا وصفحتنا الخاصة ان شاء الله تعالى.
نكتب اسم المشروع الخاصة بنا ونختار blank اي مشروع فارغ:
بعد ذلك نضغط على زر Create لانشاء مشروعنا الخاص.
بعد ذلك سننتقل الى هذه الواجهة التي ستمكننا ان شاء الله من جعل المستحيل حقيقة:
اعلم انكم تروها كغرفة قيادة الطائرات هيهيهيهي، لذلك سأقوم بكسر فضولكم و شرح هذه الواجهة الجميلة والغنية، نبدأ بالنافبار (Navbar) اي القائمة الافقية على اليسار:
هذه القائمة فيها اغلب الازرار التي سنستعملها بكثرة ان شاء الله:
1/ زر New لانشاء صفحة جديدة.
2/ Open لفتح صفحة قمنا بالعمل عليها من قبل.
3/Save لحفظ ما قمنا بانشائه.
4/Export وهو زر يمكننا من ادخال مشروع كامل قمنا بتحميله من النت، او اي مشروع اخر مصمم بالبوتسراب.
5/Settings وهي الاعدادات، وسنتحدث عنها في درس قادم ان شاء الله تعالى.
ملاحظة: بالنسبة الى الاسهم التي تظهر عاتمة ولا يمكننا الضغط عليها، هي ازرار ستتفعل فور بدأنا بالتصميم، فهي تمكننا من العودة الى الحالة السابقة ان اخطأنا في امر ما .
جميل ما شاء الله، الان سنرى الازرار على اليمين:
1/ زر Preview هو زر يمكننا من رؤية ما قمنا بتصميمه على متصفحنا الخاص، سنتعلم طريقة تفعيل هذه الخاصية في الدرس القادم ان شاء الله تعالى.
2/ زر Publish ، هو زر يمكننا من نشر ورفع تصميمنا الى موقعنا الخاص، لكن للاسف هذه الخاصية معطلة لسبب ما...
جيد، الان ننتقل الى القائمة العمودية على اليسار :
هذه القائمة مكونة من جزئين :
1/ جزء Components وهي العناصر العجيبة التي نضيفها الى موقعنا والتي نصمم بها صفحاتنا من القوائم والجداول و السلايدر والكثير من الامور التي سوف نكتشفها معا ان شاء الله.
2/ جزء Overview والذي يمكننا من رؤية اي شيء قمنا باضافته الى تصميمنا ويمكننا من حذفه بسهولة و الانتقال اليه ايضا.
الان لنرى القائمة العمودية على اليمين:
هذه القائمة ايضا مكونة من جزئرين:
1/ جزء Options وهو الجزء الذي يمكننا من تعديل العنصر الذي قمنا باستعماله في تصميم صفحتنا، مثلا ان استعملنا عنصر اضافة الصور هذه القائمة تمكننا من التعديل على طول وعرض الصورة وهاكذا ...
2/ جزء Design وهو الجزء الذي يريك ملفات مشروعك.
الامر الاخير الذي بقي هو الصفحة البيضاء في الوسط والتي هي صفحتنا الجديدة، هي بيضاء بالطبع لاننا لم نقم باضافة شيء بعد:
المربع الاحمر، يريكم انواع الشاشات والشاشة المستعملة، هذه الخاصية تساعدنا في ان نرى هل تصميمنا متوافق مع كل الشاشات، كشاشة الموبايل او اللوح وما الى ذلك وهذا ما يسمى بال Responsive Design اي ان صفحتنا او موقعنا يكون متوافق مع كل الشاشات.
المربع الازرق، ان ضغطنا على Html سيرينا الكود الهيكلي للصفحة و ان ضغطنا على styles سيرينا الكود التنسيقي الخاص بصفحتنا.
اتمنى ان يكون الشرح ممتعا، وخفيفا عليكم ♥
اللهم ان اصبت فمنك وان اخطأت فمن نفسي ومن الشيطان.
نلتقي في درس جديد وحصري ان شاء الله تعالى في القريب العاجل، الى ذلك الحين اترككم في حفظ الله ورعايته.
يمكنكم تحميل الدرس بصيغة PDF من هنا:
https://drive.google.com/file/d/1u5D...mMBQkCaVA/view
فريق المخبر السبيستوني للبرمجة ♥
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة h.rida
