1
00:00:00,000 --> 00:00:04,879
[MUSIC]

2
00:00:04,879 --> 00:00:11,307
واجهة المستخدم الأمامية واجهة المستخدم أصبحت نهج الذهاب إلى

3
00:00:11,307 --> 00:00:16,320
تصميم وتنفيذ مواقع الويب الأخيرة الخاصة بهم.

4
00:00:16,320 --> 00:00:20,220
دعونا نسأل أنفسنا ما هي بالضبط واجهة المستخدم واجهة المستخدم الأمامية

5
00:00:20,220 --> 00:00:24,150
، ومعرفة المزيد من التفاصيل عنها.

6
00:00:24,150 --> 00:00:27,700
بعد ذلك، من الواضح

7
00:00:27,700 --> 00:00:33,090
في هذا الدرس أننا سوف نسأل أنفسنا، ما هي الأطر الأمامية؟

8
00:00:33,090 --> 00:00:34,050
ماذا تحتوي؟

9
00:00:35,130 --> 00:00:38,780
ما هي بعض أطر واجهة المستخدم الأمامية الشائعة؟

10
00:00:38,780 --> 00:00:44,130
ولماذا نحتاج إلى الاستفادة من أطر واجهة المستخدم الأمامية عند تصميم

11
00:00:44,130 --> 00:00:46,460
مواقعنا الإلكترونية؟

12
00:00:46,460 --> 00:00:50,410
فما هي أطر واجهة المستخدم الأمامية على شبكة الإنترنت؟

13
00:00:50,410 --> 00:00:52,800
لنأخذ خطوة إلى الوراء،

14
00:00:52,800 --> 00:00:57,580
ونتخيل أنك تعرف HTML و CSS و JavaScript فقط.

15
00:00:57,580 --> 00:01:03,540
إذا طُلب منك تصميم موقع ويب جديد، فمن الواضح أنك ستذهب نحو بناء

16
00:01:03,540 --> 00:01:08,510
وتنفيذ موقع الويب بأكمله باستخدام المهارات التقنية التي

17
00:01:08,510 --> 00:01:13,490
لديك بناءً على معرفتك بـ HTML و CSS و JavaScript.

18
00:01:13,490 --> 00:01:16,880
كنت غالبا ما تدرك أن هناك العديد من

19
00:01:16,880 --> 00:01:21,580
المكونات المتكررة التي كنت تستخدم على موقع الويب الخاص بك.

20
00:01:21,580 --> 00:01:27,590
وستنتهي إلى تصميم مجموعتك الخاصة من فئات CSS.

21
00:01:27,590 --> 00:01:30,730
سوف تقوم بتصميم مكون يستند إلى جافا سكريبت.

22
00:01:30,730 --> 00:01:34,940
وبعد ذلك بمجرد الحصول على مجموعة من هذه معا، في

23
00:01:36,180 --> 00:01:40,770
كل مرة تحتاج إلى تصميم موقع جديد كنت تستخدم هذه

24
00:01:40,770 --> 00:01:45,670
المجموعات المحددة مسبقا من فئات CSS

25
00:01:45,670 --> 00:01:49,549
والمكونات القائمة على جافا سكريبت لتنفيذ موقع ويب جديد بسرعة.

26
00:01:50,740 --> 00:01:53,480
لماذا لا تأخذ هذا إلى نهايتها المنطقية؟

27
00:01:54,750 --> 00:02:00,610
ماذا عن، إذا قمنا بتصميم إطار عمل كامل يتكون من

28
00:02:00,610 --> 00:02:07,522
مكونات واجهة المستخدم على شبكة الإنترنت جاهزة للاستخدام، CSS، وجافا سكريبت.

29
00:02:07,522 --> 00:02:12,930
لذا، هنا،

30
00:02:12,930 --> 00:02:17,850
قد يحدد إطار واجهة مستخدم الويب الأمامية مجموعة من فئات CSS التي

31
00:02:17,850 --> 00:02:22,905
ستمكننا من تضمين مكونات مثل الأزرار

32
00:02:22,905 --> 00:02:27,985
والجداول وأشرطة التنقل والقوائم المنسدلة والتنبيهات

33
00:02:27,985 --> 00:02:32,615
والشروط وعلامات التبويب والأكورديون وغيرها الكثير.

34
00:02:33,687 --> 00:02:39,027
وسرعان ما تمكننا من تصميم وتنفيذ موقع ويب.

35
00:02:39,027 --> 00:02:43,887
لذلك هذا هو ما ينجزه إطار واجهة المستخدم الأمامية على شبكة الإنترنت.

36
00:02:43,887 --> 00:02:47,693
وهو عبارة عن مجموعة من كل هذه المكونات.

37
00:02:47,693 --> 00:02:51,903
ليس هذا فقط، فهو يمنحك طريقة لتحديد

38
00:02:52,903 --> 00:02:58,443
الطباعة المتسقة التي يمكنك استخدامها لتصميم موقع الويب الخاص بك بأكمله.

39
00:02:59,611 --> 00:03:05,702
ويمكنك من السقالة بسرعة

40
00:03:05,702 --> 00:03:09,501
خارج موقع على شبكة الانترنت أو الملعب.

41
00:03:10,651 --> 00:03:15,191
إذا كنت تبحث عن أطر الويب الأمامية،

42
00:03:15,191 --> 00:03:20,341
فستجد مجموعة كبيرة منها في الإنترنت.

43
00:03:21,750 --> 00:03:26,387
الآن قام العديد من الأشخاص بخدمتهم الخاصة

44
00:03:26,387 --> 00:03:30,573
بكل أطر واجهة مستخدم الويب المختلفة هذه،

45
00:03:30,573 --> 00:03:37,170
ونشروا قوائم العشرة الأوائل لأطر واجهة المستخدم الأمامية.

46
00:03:37,170 --> 00:03:40,290
هذا هو واحد من تلك التي قد توافق أو

47
00:03:40,290 --> 00:03:45,707
لا توافق مع هذا الترتيب، ولكن

48
00:03:45,707 --> 00:03:53,920
Bootstrap يحدث أن يكون الأكثر شعبية بين جميع أطر واجهة المستخدم الأمامية على شبكة الإنترنت.

49
00:03:53,920 --> 00:03:57,140
يصنف Bootstrap باستمرار كرقم واحد

50
00:03:57,140 --> 00:04:01,380
في العديد من قوائم أطر واجهة مستخدم الويب الأمامية.

51
00:04:01,380 --> 00:04:06,879
قد يختلف الباقي بين هذه القائمة، ولكنك غالبًا ما تجد واجهة المستخدم الدلالية، و

52
00:04:06,879 --> 00:04:12,450
Foundation by Zerp، و Materialize، و Materialize، و Material UI، و

53
00:04:12,450 --> 00:04:17,249
بعض هؤلاء الآخرين الذين يظهرون في العديد من تلك القوائم

54
00:04:18,330 --> 00:04:20,060
السؤال الواضح التالي هو،

55
00:04:20,060 --> 00:04:24,230
لماذا تريد استخدام أطر واجهة مستخدم الويب الأمامية؟

56
00:04:24,230 --> 00:04:30,830
أولا وقبل كل شيء، أنها توفر لك مع طريقة متسقة لتصميم المواقع.

57
00:04:30,830 --> 00:04:34,010
ومعظم هذه الأطر الأمامية

58
00:04:34,010 --> 00:04:36,730
تدعم ما يسمى تصميم الويب المتجاوب.

59
00:04:38,040 --> 00:04:43,299
سوف ندرس المزيد حول تصميم الويب المتجاوب في الدرس التالي، ولكن

60
00:04:43,299 --> 00:04:50,610
تلخيصه بسرعة، فأنت لا تدرك أن موقعك الإلكتروني يمكن الوصول إليه

61
00:04:51,780 --> 00:04:56,320
من أنواع مختلفة من أجهزة شاشات التوقف المختلفة

62
00:04:56,320 --> 00:05:01,850
التي تتراوح بين الهواتف المحمولة الصغيرة على طول الطريق إلى سطح المكتب الكامل.

63
00:05:01,850 --> 00:05:07,070
تريد أن تكون قادرا على تصميم موقع الويب الخاص بك للتكيف تلقائيا

64
00:05:07,070 --> 00:05:12,260
لتلبية قيود حجم كل من هذه

65
00:05:12,260 --> 00:05:16,490
الأجهزة المختلفة، والتي من خلالها يتم الوصول إلى موقع الويب الخاص بك.

66
00:05:16,490 --> 00:05:21,870
لذا فإن تصميم الويب المتجاوب قلق حول هذا الجانب.

67
00:05:21,870 --> 00:05:26,310
المشكلة الثانية التي تحاول معظم أطر Franken هذه

68
00:05:26,310 --> 00:05:30,740
معالجتها هي التوافق عبر المتصفح.

69
00:05:30,740 --> 00:05:35,790
إذا كنت قد لعبت مع المتصفحات بقدر ما فعلت،

70
00:05:35,790 --> 00:05:38,930
وأنا متأكد من أنك قد أدركت أنه

71
00:05:38,930 --> 00:05:43,090
لا يوجد اثنين من المتصفحات تجعل نفس الموقع بالضبط بنفس الطريقة.

72
00:05:43,090 --> 00:05:46,710
لذلك عندما تقوم بتصميم موقع ويب لتقديم باستمرار عبر

73
00:05:46,710 --> 00:05:51,466
العديد من المتصفحات المختلفة، فإنك ستواجه معركة شاقة.

74
00:05:51,466 --> 00:05:56,980
الآن تمكنت هذه الأطر الأمامية من معالجة معظم هذه

75
00:05:56,980 --> 00:06:02,930
الخصوصيات للمتصفحات المختلفة بحيث يمكنك

76
00:06:02,930 --> 00:06:09,740
تقديم عرض متناسق لموقعك على متصفحات مختلفة.

77
00:06:09,740 --> 00:06:13,290
لذلك هذا هو السبب الثاني لماذا قد ترغب في اللجوء إلى

78
00:06:13,290 --> 00:06:17,000
استخدام إطار واجهة المستخدم الأمامية ويب.

79
00:06:17,000 --> 00:06:22,930
والجانب الثالث بالطبع هو أنه عندما تحتاج إلى تصميم موقع على شبكة الانترنت،

80
00:06:22,930 --> 00:06:27,050
سوف تكون دائما تحت ضغط زمني رهيب.

81
00:06:27,050 --> 00:06:29,680
لذا قم بزيادة

82
00:06:29,680 --> 00:06:35,450
إنتاجيتك بحيث لا تضيع طاقتك ووقتك على

83
00:06:35,450 --> 00:06:40,600
مشكلات التهيئة الإسراف في تلك المكونات الفردية لموقع الويب الخاص بك.

84
00:06:40,600 --> 00:06:43,470
بدلاً من ذلك، دع ذلك يعتني

85
00:06:43,470 --> 00:06:47,430
به إطار واجهة مستخدم ويب أمامي مصمم باستمرار.

86
00:06:47,430 --> 00:06:53,400
بحيث يوفر لك الكثير من الوقت من حيث تنفيذ موقع الويب الخاص بك.

87
00:06:53,400 --> 00:06:54,850
لقد طردوا

88
00:06:54,850 --> 00:06:56,450
وأخيرا، بطبيعة الحال، فإن

89
00:06:56,450 --> 00:07:03,010
معظم هذه الأطر واجهة المستخدم الأمامية التي هي كلها هناك لديها مجتمعها الخاص.

90
00:07:03,010 --> 00:07:08,900
هم المستخدمون الذين يستخدمون هذه الأطر لتنفيذ مواقع الويب.

91
00:07:08,900 --> 00:07:14,700
لذلك فإن هذا المجتمع من المستخدمين سوف توفر لك

92
00:07:14,700 --> 00:07:19,560
وسيلة فعالة جدا لتكون قادرة على حل القضايا التي قد

93
00:07:19,560 --> 00:07:25,050
تواجهها عند تطبيق أي شخص من هذه الأطر لتصميم موقع الويب الخاص بك.

94
00:07:25,050 --> 00:07:30,610
لذلك بالنظر إلى هذه المزايا المختلفة،

95
00:07:30,610 --> 00:07:36,080
لماذا لا تريد اللجوء إلى استخدام إطار واجهة مستخدم ويب أمامي؟

96
00:07:36,080 --> 00:07:40,697
من خلال هذا الفهم لأطر واجهة مستخدم الويب الأمامية،

97
00:07:40,697 --> 00:07:45,315
دعنا نمضي الآن إلى الأمام لمعرفة المزيد عن Bootstrap،

98
00:07:45,315 --> 00:07:48,840
وهو إطار واجهة مستخدم الويب الأكثر شيوعًا.

99
00:07:48,840 --> 00:07:51,809
[ موسيقى]