النتائج 1 إلى 13 من 13

الموضوع: المخبر السبيستوني للبرمجة: دورة تصميم صفحات الويب-الدرس1-

  1. #1
    Banned
    تاريخ التسجيل
    26 Jan 2011
    الحنس:
    ذكر
    المشاركات
    791

    Lightbulb المخبر السبيستوني للبرمجة: دورة تصميم صفحات الويب-الدرس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
    فريق المخبر السبيستوني للبرمجة ♥




  2. #2
    سبيستوني أصيل الصورة الرمزية h.rida
    تاريخ التسجيل
    27 Dec 2011
    الحنس:
    ذكر
    المشاركات
    4,022
    شكرا لك على هذا درس الذي كنت انتظره من زمان
    بكل صراحة انا ادرس الهندسة و لكن عندي هواية بالبرمجة و انا محمل هذا البرنامج من زمان ز لكن لا اجيد استعماله و الان سأبدأ معك في هذه الدورة تعلم طريقة استعماله



  3. #3
    Banned
    تاريخ التسجيل
    26 Jan 2011
    الحنس:
    ذكر
    المشاركات
    791
    اقتباس المشاركة الأصلية كتبت بواسطة h.rida مشاهدة المشاركة
    شكرا لك على هذا درس الذي كنت انتظره من زمان
    بكل صراحة انا ادرس الهندسة و لكن عندي هواية بالبرمجة و انا محمل هذا البرنامج من زمان ز لكن لا اجيد استعماله و الان سأبدأ معك في هذه الدورة تعلم طريقة استعماله
    اهلا بك بيننا ♥ شكرا لمرورك الطيب

  4. #4
    سبيستوني عريق الصورة الرمزية soltty
    تاريخ التسجيل
    31 Dec 2015
    الحنس:
    أنثى
    المشاركات
    2,014
    السلام عليكم
    كالعادة تبدع في الشرح ياأخي
    متابعة لاخر درس ان شاء الله
    وسنتعلم منه بوركت لمجهوداتك
    واصل هذا ما نحن بحاجة لفهمه ٨_٨









  5. #5
    سبيستوني مفكّر الصورة الرمزية fat.ima
    تاريخ التسجيل
    13 Nov 2016
    الحنس:
    أنثى
    المشاركات
    6,939
    راااائع واخييرا وجدت ماكنت ابحث عنه منذ زمن انا من هواة البرمجة وعاشقيها والان سابدا بترجمة شغفي الى عمل حقيقي
    شكرا شكرا شكرا لك على الموضوع الراائع انتظر +بقية الدروس




    رابط المجموعة هنا



    مدونتي هنا




    احيانا
    تبكي ولا تدري ما القصة
    غير انك
    تعبت من كل شيء







  6. #6
    سبيستوني متفاعل الصورة الرمزية starnigth
    تاريخ التسجيل
    19 Nov 2015
    الحنس:
    ذكر
    المشاركات
    15,549
    الله من اروع المواضيع الصراحه (・∀・)
    ذكرني بمواقفاً حصلت معي ( ̄∀ ̄)
    بسبب لغة html(☆∀☆)
    اتمنى لك التوفيق صديقي (^v^)
    في حفظ الرحمان (*^▽^)/



  7. #7
    Banned
    تاريخ التسجيل
    26 Jan 2011
    الحنس:
    ذكر
    المشاركات
    791
    اقتباس المشاركة الأصلية كتبت بواسطة soltty مشاهدة المشاركة
    السلام عليكم
    كالعادة تبدع في الشرح ياأخي
    متابعة لاخر درس ان شاء الله
    وسنتعلم منه بوركت لمجهوداتك
    واصل هذا ما نحن بحاجة لفهمه ٨_٨
    بارك الله فيك على مرورك الطيب وتحفيزك الرائغ ♥

  8. #8
    Banned
    تاريخ التسجيل
    26 Jan 2011
    الحنس:
    ذكر
    المشاركات
    791
    اقتباس المشاركة الأصلية كتبت بواسطة fat.ima مشاهدة المشاركة
    راااائع واخييرا وجدت ماكنت ابحث عنه منذ زمن انا من هواة البرمجة وعاشقيها والان سابدا بترجمة شغفي الى عمل حقيقي
    شكرا شكرا شكرا لك على الموضوع الراائع انتظر +بقية الدروس
    اهلا بك بيننا يشرفني وجود اشخاصا مهتمين مثلك ، كل التوفيق لك ♥

  9. #9
    Banned
    تاريخ التسجيل
    26 Jan 2011
    الحنس:
    ذكر
    المشاركات
    791
    اقتباس المشاركة الأصلية كتبت بواسطة starnigth مشاهدة المشاركة
    الله من اروع المواضيع الصراحه (・∀・)
    ذكرني بمواقفاً حصلت معي ( ̄∀ ̄)
    بسبب لغة html(☆∀☆)
    اتمنى لك التوفيق صديقي (^v^)
    في حفظ الرحمان (*^▽^)/
    انت الاروع ♥ ، اللهم امين و اياك شكرا لك

  10. #10
    مشرف إداري الصورة الرمزية dinamonitor
    تاريخ التسجيل
    05 Jan 2011
    الحنس:
    أنثى
    المشاركات
    12,117
    ألا من واجبات في هذا الدرس؟؟؟
    ^^
    متحمسة جداً

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

    بانتظار باقي الدروس...من الرائع توفر الدرس بشكل ملف pdf
    لكي نحتفظ بها ونراجعها كل فترة
    حتى عمار متحمس معي بعدما اخبرته بتشجيعك له على الاستمرار في ابتكار ألعابه في منصة roblox
    من تلاميذك المتابعين ^^
    يقول: افتحي لي على دروس وليد ^^...لا تتأخر بالدرس القادم حتى لا يتعب أعصابي بالسؤال....

    تمت إضافة الرابط للفهرس
    بارك الله لنا بك...وعوضك عن تعبك بالجنة...

  11. #11
    Banned
    تاريخ التسجيل
    26 Jan 2011
    الحنس:
    ذكر
    المشاركات
    791
    اقتباس المشاركة الأصلية كتبت بواسطة dinamonitor مشاهدة المشاركة
    ألا من واجبات في هذا الدرس؟؟؟
    ^^
    متحمسة جداً

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

    بانتظار باقي الدروس...من الرائع توفر الدرس بشكل ملف pdf
    لكي نحتفظ بها ونراجعها كل فترة
    حتى عمار متحمس معي بعدما اخبرته بتشجيعك له على الاستمرار في ابتكار ألعابه في منصة roblox
    من تلاميذك المتابعين ^^
    يقول: افتحي لي على دروس وليد ^^...لا تتأخر بالدرس القادم حتى لا يتعب أعصابي بالسؤال....

    تمت إضافة الرابط للفهرس
    بارك الله لنا بك...وعوضك عن تعبك بالجنة...
    جزاك الله خيرا ، بلغي سلامي لعماري ♥

  12. #12
    سبيستوني قائد الصورة الرمزية artimis
    تاريخ التسجيل
    08 Jan 2017
    الحنس:
    أنثى
    المشاركات
    17,174
    مساء النور طريقة جيدة في فهم الدروس تسلم ♡

    لست خبيرة بالبرمجة لكن سوف اتعلم منك أكيد ♥

    (​ ليانا المحاربة الشرسة. آيريس المحاربة الأسطورية. كآثرين أسطورة غامضة ) ♡

    يمنع إستخدام أي من أسماءي في المنتدى وشكراً ★


    ♥ معتزلة ♥



  13. #13
    سبيستوني رائع الصورة الرمزية saamh
    تاريخ التسجيل
    15 Aug 2013
    الحنس:
    أنثى
    المشاركات
    968
    انا اتمتى تخلص السنه دراسه بسرعه واتعلم الدروس معك لان حاليا لاامتلك لاب
    (^ 3^) احسنت ييا بطلنا
    لا زلت اراك ولست ارى
    فبماذا سابدأ ياترى
    هل سبق وان هام احدهم بحبيب دمه سال وق مات و جرى
    فاجيبيني بربك انقذيني
    لماذا تسمعيني ولست تكلميني؟
    بقلمي لصديقتي المرحومه فالترقدي بسلام


المواضيع المتشابهه

  1. مشاركات: 7
    آخر مشاركة: 01-11-2019, 11:23 PM
  2. المخبر السبيستوني للبرمجة: برنامج حصري ♥
    بواسطة nyaster في المنتدى بونبون
    مشاركات: 8
    آخر مشاركة: 01-03-2019, 01:01 AM
  3. مشاركات: 3
    آخر مشاركة: 01-02-2019, 04:37 PM
  4. مشاركات: 1
    آخر مشاركة: 12-26-2018, 11:49 PM
  5. مشاركات: 8
    آخر مشاركة: 10-18-2018, 01:44 PM

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •