1
00:00:00,000 --> 00:00:04,717
[MUSIC] في

2
00:00:04,717 --> 00:00:09,290
هذه الأيام في عالم تطوير الويب، غالباً ما نسمع الناس

3
00:00:09,290 --> 00:00:14,721
يذكرون مصطلحات التصميم المتجاوب والنهج الأول للجوال.

4
00:00:14,721 --> 00:00:18,558
دعونا نحاول فهم المقصود بهذه المصطلحات،

5
00:00:18,558 --> 00:00:23,480
وكيف تؤثر على الطريقة التي تصمم بها مواقعك الإلكترونية وتطبيقات الويب الخاصة بك.

6
00:00:25,490 --> 00:00:30,745
سؤالك الواضح سيكون لماذا تفكر في التصميم المتجاوب؟

7
00:00:30,745 --> 00:00:38,040
لمساعدتنا على فهم هذا، دعونا ننظر في كيفية وصول الناس إلى المواقع في هذه الأيام؟

8
00:00:38,040 --> 00:00:42,980
تقليديا، عندما تم تصميم مواقع الويب لأول مرة، يمكنك أن تفترض إلى حد كبير

9
00:00:42,980 --> 00:00:47,100
أن الناس سوف تصفح مواقع الويب الخاصة بك من جهاز كمبيوتر. في

10
00:00:48,170 --> 00:00:55,694
هذه الأيام، يمكن زيارة مواقع الويب الخاصة بك من هاتف ذكي أو جهاز لوحي أو

11
00:00:55,694 --> 00:01:02,250
كمبيوتر ذي أحجام شاشة مختلفة ودقة شاشة.

12
00:01:02,250 --> 00:01:09,350
كيف نعرض مواقعنا الإلكترونية باستمرار على أجهزة ذات أحجام مختلفة للشاشة؟

13
00:01:10,530 --> 00:01:14,570
حجم واحد يناسب كل النهج أن

14
00:01:14,570 --> 00:01:19,020
مصممي المواقع التقليدية قد اتخذت لم تعد فاتورة ثابتة.

15
00:01:19,020 --> 00:01:24,338
نحن بحاجة إلى نهج أفضل، نهج من شأنها أن

16
00:01:24,338 --> 00:01:30,940
تكيف تلقائيا موقع الويب الخاص بك مع حجم الشاشة التي يتم عرضها.

17
00:01:30,940 --> 00:01:38,190
هذا هو المكان الذي يتعين علينا فيه اتباع نهج للتكيف مع منفذ عرض المستخدم.

18
00:01:38,190 --> 00:01:42,890
يجب أن يكون هذا مضمنًا في تصميم موقع الويب الخاص بك

19
00:01:42,890 --> 00:01:49,000
وتطويره بحيث يتكيف تلقائيًا مع إطار العرض الخاص بجهاز المستخدم.

20
00:01:50,260 --> 00:01:53,437
لمساعدتك على تقدير الحاجة إلى

21
00:01:53,437 --> 00:01:57,170
معالجة الأجهزة ذات أحجام الشاشة المختلفة بشكل أفضل.

22
00:01:57,170 --> 00:02:03,273
أنا أخذ مساعدة من خيارات المطور التي قد

23
00:02:03,273 --> 00:02:10,110
توفر متصفح سفاري التي تمكني من عرض الموقع مع شاشات من أحجام مختلفة.

24
00:02:10,110 --> 00:02:15,470
لذلك نأمل أن يقنع لك لماذا جعلنا تصميم الويب استجابة.

25
00:02:15,470 --> 00:02:19,622
حتى هنا ترى أن كورسيرا الموقع يجري

26
00:02:19,622 --> 00:02:24,476
تقديمها على 1920 من قبل 1080 مواقع الشاشة.

27
00:02:24,476 --> 00:02:32,088
سيكون هذا سطح مكتب كبير نموذجي أو شاشة كمبيوتر محمول عالية الدقة.

28
00:02:32,088 --> 00:02:38,810
ثم دعونا ننظر في نفس موقع الويب الذي يتم عرضه باستخدام شاشة أصغر مثل.

29
00:02:38,810 --> 00:02:44,126
لذلك ترى تلقائيًا أن تخطيط الشاشة الخاص بك

30
00:02:44,126 --> 00:02:49,214
يتكيف قليلاً مع حجم إطار العرض الخاص بجهازك،

31
00:02:49,214 --> 00:02:52,281
نفس الشيء عند 800 × 600.

32
00:02:52,281 --> 00:02:59,708
لذلك دعونا نذهب إلى أسفل في أحجام الشاشة، وهذا هو وجهة نظر باد قريبة من نفس الموقع.

33
00:02:59,708 --> 00:03:05,826
هذا هو حجم باد إير 2، وهذا هو حجم باد ميني 4،

34
00:03:05,826 --> 00:03:10,125
لاحظ الانتقال من

35
00:03:10,125 --> 00:03:15,610
حجم باد ميني 4 إلى اي فون 6S زائد في وضع عمودي.

36
00:03:15,610 --> 00:03:23,090
ستلاحظ الآن أن Navigation Bot قد انهار الآن في زر هنا،

37
00:03:23,090 --> 00:03:28,850
والذي عند النقر سيكشف عن الخيارات من Navigation Bash.

38
00:03:28,850 --> 00:03:35,027
ودعونا ننظر إلى نفس الشيء في جهاز iPhone 6S الخاص بنا

39
00:03:35,027 --> 00:03:40,990
في الوضع الأفقي، لاحظ كيف تتبنى الشاشة نفسها.

40
00:03:40,990 --> 00:03:46,578
وبالمثل بالنسبة لجهاز iPhone 6S في الوضع الأفقي

41
00:03:46,578 --> 00:03:52,300
وانتقل إلى iPhone SE، وترى كيف أن موقع الويب

42
00:03:52,300 --> 00:03:56,941
قد تغير الطريقة التي يتم تقديمها.

43
00:03:56,941 --> 00:04:03,395
لذا نأمل أن يوضح هذا المثال لك كيف

44
00:04:03,395 --> 00:04:07,357
ولماذا نحتاج إلى تصميم ويب متجاوب.

45
00:04:07,357 --> 00:04:12,240
المفهوم الثاني ذي الصلة الذي ستسمعه هو المحمول أولاً.

46
00:04:12,240 --> 00:04:17,749
نهج المحمول الأول بدلا من ذلك ينظر في تصميم موقع ويب

47
00:04:17,749 --> 00:04:19,725
لجهاز محمول أولا.

48
00:04:19,725 --> 00:04:27,465
لذا فكر في كيفية تلبية قيود الشاشة لجهازك المحمول.

49
00:04:27,465 --> 00:04:32,472
وبعد ذلك كلما توسع حجم الشاشة،

50
00:04:32,472 --> 00:04:38,162
ستبدأ تلقائيًا تطبيقًا على موقعك على الويب إلى أحجام الشاشة الأكبر والأكبر.

51
00:04:38,162 --> 00:04:41,548
ربما، كنت على استعداد أكثر وأكثر من المحتوى.

52
00:04:41,548 --> 00:04:47,050
وذلك للاستفادة من العقارات الشاشة المتزايدة.

53
00:04:47,050 --> 00:04:51,974
وبالتالي فإن نفس الموقع عند رؤية على جهاز محمول قد يكون فقط

54
00:04:51,974 --> 00:04:56,091
أجزاء من المعلومات التي يتم الكشف عنها للمستخدم.

55
00:04:56,091 --> 00:05:00,754
ولكن بعد ذلك عندما يتم تقديمها على سطح المكتب fledge الكامل

56
00:05:00,754 --> 00:05:05,960
قد تظهر الكثير من التفاصيل نسخة من الموقع.

57
00:05:05,960 --> 00:05:11,020
الآن هذا يجب تكييفها تلقائيا استنادا إلى المعلومات

58
00:05:11,020 --> 00:05:16,180
التي تحصل عليها من الجهاز الذي يتم عرض موقع الويب الخاص بك.

59
00:05:16,180 --> 00:05:18,519
إذن كيف نحصل على هذه المعلومات؟

60
00:05:18,519 --> 00:05:23,610
لحسن الحظ، يتم دعم تصميم الويب المتجاوب من قبل

61
00:05:23,610 --> 00:05:29,950
العديد من أطر واجهة المستخدم الأمامية الحديثة على الويب بما في ذلك Bootstrap.

62
00:05:29,950 --> 00:05:37,230
لذلك عندما ننظر إلى تعريف Bootstrap على صفحة الويب انها تقول،

63
00:05:37,230 --> 00:05:41,128
استجابة المحمول النهج الأول.

64
00:05:41,128 --> 00:05:43,985
نعم، كيف نذهب من خلال القيام بتصميم ويب متجاوب؟

65
00:05:43,985 --> 00:05:49,858
لذلك هناك العديد من المفاهيم التي تم إنشاؤها في

66
00:05:49,858 --> 00:05:57,170
أطر واجهة المستخدم الخاصة بك وقت الإطار التي تأتي للمساعدة عندما تحتاج إلى القيام بتصميم ويب استجابة.

67
00:05:57,170 --> 00:06:00,819
أولا وقبل كل شيء هو ما يسمى هو نظام الشبكة؟

68
00:06:00,819 --> 00:06:05,624
سنلقي نظرة على نظام شبكة Bootstrap بمزيد من التفصيل في

69
00:06:05,624 --> 00:06:06,319
المحاضرة القادمة.

70
00:06:06,319 --> 00:06:11,201
حتى نتمكن من فهم بالضبط كيف يمكننا الاستفادة من ذلك لتكون قادرة على القيام

71
00:06:11,201 --> 00:06:13,720
تصميم الويب استجابة.

72
00:06:13,720 --> 00:06:21,110
الجانب الثاني هو الصور السائلة، بحيث الصور الخاصة بك التي تضمينها في

73
00:06:21,110 --> 00:06:26,940
موقع الويب الخاص بك سوف تتكيف تلقائيا مع حجم الشاشة.

74
00:06:26,940 --> 00:06:34,890
والجزء الثالث هو ما يسمى استعلامات وسائط CSS من رمز CSS الخاص بك.

75
00:06:34,890 --> 00:06:41,110
يمكنك الاستعلام عن حجم الوسائط ثم ضبط فئات CSS بشكل مناسب

76
00:06:41,110 --> 00:06:46,230
لتناسب حجم شاشة الجهاز.

77
00:06:46,230 --> 00:06:48,730
الآن كيف تعمل استعلامات الوسائط؟

78
00:06:48,730 --> 00:06:50,950
دعونا ننظر إلى ذلك بعد ذلك.

79
00:06:50,950 --> 00:06:55,080
يتم دعم استعلامات الوسائط في CSS مثل هذا.

80
00:06:55,080 --> 00:07:00,930
وبالتالي فإن التكنولوجيا تسمح لك للقيام الاستعلام وسائل الإعلام لتحديد الحد الأدنى لعرض

81
00:07:00,930 --> 00:07:07,730
الشاشة التي هذه المجموعة معينة من فئات CSS سوف تكون نشطة.

82
00:07:07,730 --> 00:07:12,267
لذلك سيتم تحديد هذا في ملف CSS الخاص بك كـ @media،

83
00:07:12,267 --> 00:07:17,187
ثم داخل قوس، يمكنك تحديد على سبيل المثال، min-width.

84
00:07:17,187 --> 00:07:21,231
هناك الكثير من الخيارات لاستعلامات الوسائط من ما أعرضه هنا.

85
00:07:21,231 --> 00:07:28,750
هذا مثال واحد فقط لكيفية إنشاء استعلام وسائط في رمز CSS الخاص بك.

86
00:07:30,060 --> 00:07:34,990
إلقاء نظرة على رمز CSS في Bootstrap نفسه،

87
00:07:34,990 --> 00:07:40,910
دعنا نذهب ونرى كيف يتم استخدام استعلامات الوسائط بواسطة Bootstrap.

88
00:07:40,910 --> 00:07:45,789
حتى هنا ترى مثالا لاستعلام وسائل الإعلام حيث يقول، @media و

89
00:07:45,789 --> 00:07:47,854
min-width 576 بكسل.

90
00:07:47,854 --> 00:07:54,906
ثم يحدد أن تلك حاوية استدعاء فئة CSS معينة،

91
00:07:54,906 --> 00:07:59,960
والتي سوف نتعلم المزيد عنها في المحاضرة القادمة،

92
00:07:59,960 --> 00:08:04,150
وأيضا في التمرين الذي يلي.

93
00:08:04,150 --> 00:08:12,640
سنرى أن عرض الحاوية يتم تعيينه بناءً على عرض الشاشة.

94
00:08:12,640 --> 00:08:17,590
وبالمثل، بالنسبة لشاشة عرض أعلى، يتم ضبط عرض الحاوية تلقائيًا.

95
00:08:17,590 --> 00:08:22,251
لذلك هذا هو ما يمكّن إطار واجهة مستخدم الويب الخاص بك من

96
00:08:22,251 --> 00:08:25,604
دعم تصميم الويب المتجاوب.

97
00:08:25,604 --> 00:08:30,762
حتى القيام باستعلامات الوسائط، إطار واجهة المستخدم على الويب الخاص بك قادر على

98
00:08:30,762 --> 00:08:36,928
تحديد أي نوع من الأجهزة كنت عرض موقع الويب الخاص بك على.

99
00:08:36,928 --> 00:08:41,849
وبالمقابل ضبط فئات CSS

100
00:08:41,849 --> 00:08:46,401
لتناسب حجم شاشة الأجهزة المعينة.

101
00:08:46,401 --> 00:08:50,821
إذن من الواضح أن السؤال التالي الذي سيأتي في عقلك هو كيف

102
00:08:50,821 --> 00:08:52,870
نفعل ذلك عملياً؟

103
00:08:52,870 --> 00:08:56,540
لحسن الحظ، إذا بدأت

104
00:08:56,540 --> 00:09:01,700
بإطار واجهة مستخدم ويب أمامي مصمم بشكل جيد مثل Bootstrap، تصبح الأمور واضحة للغاية.

105
00:09:01,700 --> 00:09:08,023
سوف نتعلم المزيد عن هذا في المحاضرة التالية والتمرين التالي.

106
00:09:08,023 --> 00:09:13,999
[ موسيقى]