1
00:00:03,260 --> 00:00:09,800
مرحبا بكم في واجهة واجهة المستخدم ويب واجهة المستخدم والأدوات: Bootstrap 4.

2
00:00:09,800 --> 00:00:13,565
أنا سعيد لأنك قررت الانضمام إلى هذه الدورة

3
00:00:13,565 --> 00:00:18,265
للتعرف على إطار واجهة المستخدم ويب الأكثر شعبية: Bootstrap.

4
00:00:18,265 --> 00:00:20,995
سنلقي نظرة على جوانب مختلفة من Bootstrap.

5
00:00:20,995 --> 00:00:29,520
من خلال عدة أمثلة، سوف تتعلم من خلال القيام بتمارين كجزء من هذه الدورة.

6
00:00:29,520 --> 00:00:32,900
دعونا ننظر إلى بعض التفاصيل بعد ذلك.

7
00:00:32,970 --> 00:00:35,890
قبل أن تبدأ هذه الدورة،

8
00:00:35,890 --> 00:00:38,760
يرجى التأكد من أن لديك خلفية كافية

9
00:00:38,760 --> 00:00:41,625
لتتمكن من النجاح في هذه الدورة.

10
00:00:41,625 --> 00:00:44,455
يجب أن يكون لديك معرفة جيدة بـ HTML و

11
00:00:44,455 --> 00:00:48,920
CSS و JavaScript قبل بدء الدورة.

12
00:00:48,920 --> 00:00:54,225
من وجهة نظري، يتكون تصميم وتطوير المواقع من جانبين:

13
00:00:54,225 --> 00:00:58,320
الأول هو تصميم الموقع وصفحة الويب،

14
00:00:58,320 --> 00:01:04,610
والثاني هو البناء الفعلي ونشر صفحة الويب نفسها.

15
00:01:04,610 --> 00:01:06,845
من منظور التصميم،

16
00:01:06,845 --> 00:01:13,625
ما أعنيه هو تصميم واجهة المستخدم وتجربة المستخدم،

17
00:01:13,625 --> 00:01:16,815
التصميم المرئي، النماذج الأولية،

18
00:01:16,815 --> 00:01:20,164
عناصر الألوان

19
00:01:20,164 --> 00:01:23,815
والرسومات والرسوم المتحركة التي قد تكون ذات أهمية.

20
00:01:23,815 --> 00:01:29,645
في هذا التخصص، نحن لا ننظر إلى هذا الجانب من تطوير الويب.

21
00:01:29,645 --> 00:01:32,650
بدلا من ذلك، نحن ننظر إلى هذا الجانب الثاني،

22
00:01:32,650 --> 00:01:34,680
وهو تطوير وبناء

23
00:01:34,680 --> 00:01:40,825
ونشر مواقع الويب وصفحات الويب، وذلك باستخدام تقنيات

24
00:01:40,825 --> 00:01:45,190
مثل أطر واجهة المستخدم الأمامية على شبكة الإنترنت مثل Bootstrap،

25
00:01:45,190 --> 00:01:52,030
وربما إطار جافا سكريبت مثل Angular أو مكتبة مثل React

26
00:01:52,030 --> 00:01:55,700
و hybrid mobile لتصميم

27
00:01:55,700 --> 00:02:00,950
تطبيقات الجوال وكذلك التطوير من جانب الخادم باستخدام Node و

28
00:02:00,950 --> 00:02:06,670
Express و MongoDB، المكدس الرئيسي بمزيد من التفصيل.

29
00:02:06,670 --> 00:02:09,530
إذا كنت تبحث في التخصص،

30
00:02:09,530 --> 00:02:13,035
والتفكير في الجانب تصميم الموقع،

31
00:02:13,035 --> 00:02:16,260
ثم قد ترغب في إعادة التفكير مرة أخرى.

32
00:02:16,260 --> 00:02:19,360
يركز هذا التخصص على

33
00:02:19,360 --> 00:02:25,115
بناء ونشر موقع الويب وصفحات الويب،

34
00:02:25,115 --> 00:02:31,065
وهو معرفة تقنية بحتة حول استخدام HTML،

35
00:02:31,065 --> 00:02:37,310
CSS، والمهارات القائمة على جافا سكريبت لتطوير الموقع الفعلي.

36
00:02:37,310 --> 00:02:43,080
ربما كنت أتساءل أيضا عن ما هو المقصود من تطوير شبكة الإنترنت كومة كاملة.

37
00:02:43,080 --> 00:02:48,385
سنلقي نظرة على مزيد من التفاصيل حول تطوير الويب المكدس الكامل في الدرس التالي. على

38
00:02:48,385 --> 00:02:52,835
وجه الخصوص، إذا كنت تبحث في كيفية

39
00:02:52,835 --> 00:02:57,665
وضع هذه الدورة في السياق العام لتطوير شبكة الإنترنت المكدس الكامل،

40
00:02:57,665 --> 00:03:02,790
في هذه الدورة، ونحن نتعامل مع تطوير واجهة المستخدم الأمامية على شبكة الإنترنت. على

41
00:03:02,790 --> 00:03:07,565
وجه الخصوص، إطار واجهة المستخدم Bootstrap 4.

42
00:03:07,565 --> 00:03:10,245
سننظر في الجوانب المتبقية من

43
00:03:10,245 --> 00:03:15,845
تطوير الويب الكامل في بقية هذا التخصص.

44
00:03:15,845 --> 00:03:19,640
هذه الدورة تبحث في Bootstrap بتفصيل كبير.

45
00:03:19,640 --> 00:03:23,640
سننظر أيضًا في تصميم الويب المتجاوب وكيف يدعم Bootstrap

46
00:03:23,640 --> 00:03:27,750
تصميم الويب المتجاوب من خلال نظام Bootstrap Grid.

47
00:03:27,750 --> 00:03:33,050
سنلقي نظرة على المكونات المستندة إلى CSS وجافا سكريبت في Bootstrap وكيف

48
00:03:33,050 --> 00:03:38,660
يمكنك الاستفادة منها في بناء موقع الويب الخاص بك وصفحات الويب الخاصة بك.

49
00:03:38,660 --> 00:03:45,200
على طول الطريق، سنتعرف على تطوير الويب هذا باستخدام سطر الأوامر.

50
00:03:45,200 --> 00:03:48,570
لذلك سوف نتعلم الكثير من أدوات الويب التي

51
00:03:48,570 --> 00:03:52,635
تعتمد على سطر الأوامر والنظام البيئي Node.js.

52
00:03:52,635 --> 00:03:54,630
سنقوم بمراجعة Git بإيجاز،

53
00:03:54,630 --> 00:04:03,355
وإضافة Node.js وننظر إلى الأدوات القائمة على Noje.js بما في ذلك المتسابقين المهام مثل Grunt و Gulp.

54
00:04:03,355 --> 00:04:08,235
يتم تنظيم هذه الدورة، في حد ذاتها، في وحدات كاملة.

55
00:04:08,235 --> 00:04:12,195
كل وحدة تقريبا المقابلة لمدة أسبوع واحد من العمل.

56
00:04:12,195 --> 00:04:13,830
في الوحدة الأولى،

57
00:04:13,830 --> 00:04:17,795
سنحصل على عرض الصورة الكبيرة لتطوير الويب المكدس الكامل،

58
00:04:17,795 --> 00:04:22,895
ثم ستحصل على مقدمة سريعة لـ Git و Node.js.

59
00:04:22,895 --> 00:04:29,450
ثم سنعرفك على Bootstrap ثم نراجع نظام Bootstrap Grid.

60
00:04:29,450 --> 00:04:34,180
هذا سيقودك إلى المهمة الأولى في هذه الدورة.

61
00:04:34,180 --> 00:04:38,520
الوحدة الثانية تتعامل مع مكونات CSS Bootstrap.

62
00:04:38,520 --> 00:04:42,445
سنلقي نظرة على تصميم شريط التنقل Bootstrap

63
00:04:42,445 --> 00:04:46,875
وكيف يمكننا الاستفادة منه لدعم التنقل.

64
00:04:46,875 --> 00:04:51,565
سننظر في إدخال المستخدم من خلال

65
00:04:51,565 --> 00:04:58,649
الأزرار والنماذج ثم سننظر في كيفية عرض المحتوى باستخدام الجداول والبطاقات.

66
00:04:58,649 --> 00:05:06,340
ثم سننظر في كيفية تضمين الصور والوسائط في صفحة الويب الخاصة بنا باستخدام الصور والصور

67
00:05:06,340 --> 00:05:08,590
المصغرة وكائنات الوسائط.

68
00:05:08,590 --> 00:05:13,095
وبعد ذلك، أخيرا، ننظر في كيفية تنبيه المستخدمين باستخدام العلامات

69
00:05:13,095 --> 00:05:14,680
والتنبيهات وأشرطة التقدم.

70
00:05:14,680 --> 00:05:19,615
هذا يجب أن يقودك إلى مهمتك الثانية

71
00:05:19,615 --> 00:05:25,425
الوحدة الثالثة تتعامل مع مكونات جافا سكريبت Bootstrap.

72
00:05:25,425 --> 00:05:27,980
سننظر في عرض الصورة الكبيرة

73
00:05:27,980 --> 00:05:32,930
لكيفية عمل مكونات جافا سكريبت Bootstrap، وسنراجع علامات

74
00:05:32,930 --> 00:05:34,635
التبويب والحبوب والملاحة المبوبة،

75
00:05:34,635 --> 00:05:40,874
ثم سننظر في كيفية استخدام الانهيار والأكورديون لإظهار وإخفاء المحتوى.

76
00:05:40,874 --> 00:05:43,730
وبعد ذلك سنلقي نظرة على استخدام تلميحات الأدوات،

77
00:05:43,730 --> 00:05:48,610
popovers وشروط للكشف عن المحتوى ليتم عرضه في صفحتك.

78
00:05:48,610 --> 00:05:52,230
ثم سنلقي نظرة على مكون دائري،

79
00:05:52,230 --> 00:05:58,235
والذي يسمح لك بعرض المعلومات المنزلقة على صفحة الويب الخاصة بك.

80
00:05:58,235 --> 00:06:02,670
هذا يجب أن يقودك إلى المهمة الثالثة في هذه الدورة.

81
00:06:02,670 --> 00:06:11,625
تتعامل الوحدة الأخيرة مع Bootstrap و jQuery وأدوات التطوير المختلفة.

82
00:06:11,625 --> 00:06:17,070
سننظر، على وجه الخصوص، في كيفية تفاعل Bootstrap و jQuery وكيف يمكنك

83
00:06:17,070 --> 00:06:23,535
كتابة شفرة jQuery و JavaScript للتحكم في مكون JavaScript Bootstrap الخاص بك.

84
00:06:23,535 --> 00:06:28,230
نحن ننظر إلى الطرق المختلفة التي تدعمها مكونات جافا سكريبت Bootstrap،

85
00:06:28,230 --> 00:06:31,510
والتي يمكن الاستفادة منها

86
00:06:31,510 --> 00:06:35,735
لكتابة شفرة جافا سكريبت للتحكم في سلوك هذه المكونات.

87
00:06:35,735 --> 00:06:44,509
ثم سنراجع لغة المعالجة المسبقة لـ CSS مثل LESS و Sass.

88
00:06:44,509 --> 00:06:49,675
ثم، وأخيرا، سوف ننظر في كيفية بناء ونشر موقعنا على الانترنت

89
00:06:49,675 --> 00:06:57,345
باستخدام البرامج النصية الآلية الوقائية الوطنية أو المتسابقين المهام مثل Grunt و Gulp.

90
00:06:57,345 --> 00:07:03,485
هذا يجب أن يأخذك على طول الطريق إلى المهمة النهائية في هذه الدورة.

91
00:07:03,485 --> 00:07:06,990
آمل أن يكون لديك الكثير من المرح القيام

92
00:07:06,990 --> 00:07:12,920
بأجزاء مختلفة من هذه الدورة، وأيضا التمتع التدريبات التي سوف

93
00:07:12,920 --> 00:07:16,850
تواجهها في كل مرحلة التي تمكنك من

94
00:07:16,850 --> 00:07:23,430
فهم أفضل جوانب مختلفة من إطار واجهة المستخدم على شبكة الإنترنت Bootstrap.