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

2
00:00:04,674 --> 00:00:08,968
حتى الآن، كنا نركز على تصميم

3
00:00:08,968 --> 00:00:14,540
وتنفيذ موقعنا، سواء كان HTML، CSS، أو جافا سكريبت التعليمات البرمجية.

4
00:00:16,170 --> 00:00:21,890
بمجرد أن يصبح موقع الويب الخاص بك جاهزًا، فإن الخطوة التالية هي القدرة على بناء موقع الويب الخاص بك

5
00:00:21,890 --> 00:00:26,010
ونشره على خادم ويب، بحيث يصبح متاحًا للجمهور.

6
00:00:27,300 --> 00:00:30,750
ثم لدينا مجموعة الثانية من الخطوات التي نحن بحاجة إلى الخضوع لها قبل أن

7
00:00:30,750 --> 00:00:34,580
يكون موقع الويب الخاص بك جاهزا للنشر على خادم ويب.

8
00:00:34,580 --> 00:00:39,079
هذا هو ما سننظر إليه في هذا الدرس و الدرس التالي

9
00:00:40,915 --> 00:00:43,479
كما ذكرت، فإن تطوير الويب

10
00:00:43,479 --> 00:00:47,870
ونشرها ينطوي على الكثير من المهام المتكررة.

11
00:00:47,870 --> 00:00:54,820
من الواضح أن كتابة شفرة HTML/CSS وجافا سكريبت هي جزء واحد منه.

12
00:00:54,820 --> 00:00:57,600
ولكن الجزء الآخر هو حقيقة أنه إذا قمت بكتابة

13
00:00:59,200 --> 00:01:04,170
رمز CSS باستخدام إحدى لغات المعالجة المسبقة لـ CSS، مثل Sass أو

14
00:01:04,170 --> 00:01:09,200
Less، فأنت بحاجة إلى تحويل هذا الرمز إلى رمز CSS المقابل.

15
00:01:09,200 --> 00:01:14,614
بعد ذلك، تحتاج إلى

16
00:01:14,614 --> 00:01:20,810
إجراء معالجة إضافية على ملفات CSS الخاصة بك مثل التصغير والضغط والتسلسل.

17
00:01:20,810 --> 00:01:24,850
سنتحدث أكثر قليلا عن هذه في الشرائح القليلة القادمة.

18
00:01:24,850 --> 00:01:30,090
وبالمثل، مع شفرة جافا سكريبت الخاصة بك، تحتاج إلى القيام

19
00:01:30,090 --> 00:01:34,580
JShinting، والتحقق من الأخطاء المحتملة.

20
00:01:34,580 --> 00:01:40,590
ثم تسلسل ملفات البرنامج النصي المختلفة ومن

21
00:01:40,590 --> 00:01:45,100
ثم حتى القبح وتشويش التعليمات البرمجية.

22
00:01:45,100 --> 00:01:49,240
سنتحدث قليلاً عن ذلك في الشرائح القليلة القادمة

23
00:01:49,240 --> 00:01:54,889
كل هذه المهام هي مهام متكررة، والتي نود أن أتمتة

24
00:01:54,889 --> 00:02:00,536
قدر الإمكان، حتى نتمكن من التركيز على التصميم الفعلي

25
00:02:00,536 --> 00:02:05,730
وبناء موقعنا، بدلا من هذه المهام المتكررة.

26
00:02:05,730 --> 00:02:09,623
حتى أن مبدأ DRY، لا تكرر مبدأ نفسك،

27
00:02:09,623 --> 00:02:11,840
أمر ضروري جدا في هذه الحالة.

28
00:02:11,840 --> 00:02:16,840
نحن لا نريد أن نضيع وقتنا في مثل هذه المهام الاحتراق المتكررة،

29
00:02:16,840 --> 00:02:20,140
وبدلا من ذلك، في محاولة لأتمتة لهم قدر الإمكان

30
00:02:20,140 --> 00:02:23,410
بحيث يمكن تنفيذها كلما لزم الأمر.

31
00:02:23,410 --> 00:02:27,649
دعونا نتحدث عن بعض هذه المهام المتكررة بمزيد من التفصيل.

32
00:02:28,950 --> 00:02:33,580
دعونا نأخذ مثال CSS كحالة.

33
00:02:33,580 --> 00:02:37,470
عندما نكتب رمز CSS، غالبًا ما نكتب الشفرة

34
00:02:37,470 --> 00:02:41,440
باستخدام إحدى لغات المعالجة المسبقة تحب Less أو Sass.

35
00:02:41,440 --> 00:02:46,920
الآن بمجرد كتابة الكود، يجب تحويله إلى CSS باستخدام

36
00:02:46,920 --> 00:02:52,460
أحد المعالجات المسبقة كما رأينا في الدرس السابق.

37
00:02:54,130 --> 00:02:59,660
هناك، قد نحتاج إلى إجراء بعض البادئة الخاصة بالبائع

38
00:02:59,660 --> 00:03:06,300
لرمز CSS الخاص بنا لمعالجة المشكلات التي قد تنشأ مع المتصفحات المختلفة.

39
00:03:06,300 --> 00:03:12,599
لذلك هذا هو المكان الذي يتم فيه استخدام مهمة القيام التلقائي البادئة،

40
00:03:12,599 --> 00:03:16,980
حيث يمكن القيام بذلك تلقائيا بالنسبة لنا.

41
00:03:16,980 --> 00:03:20,430
وبالمثل، بمجرد كتابة رمز CSS الخاص بك، من الواضح أن

42
00:03:20,430 --> 00:03:26,010
الطريقة التي نكتب بها رمز CSS هي أن تكون قابلة للقراءة بشكل إنساني.

43
00:03:26,010 --> 00:03:30,550
ولكن بالنسبة لآلة، فإنه لا يهتم حقا ما إذا كانت هناك مسافات كافية

44
00:03:30,550 --> 00:03:34,000
بين التعليمات البرمجية أو ما إذا كانت منسقة بشكل صحيح أم لا.

45
00:03:35,100 --> 00:03:41,274
لذا، فإن التصغير هو عملية إزالة جميع الأحرف غير الضرورية،

46
00:03:41,274 --> 00:03:46,080
والمساحة البيضاء، والخطوط الجديدة، والتعليقات، من رمز CSS الخاص بك.

47
00:03:46,080 --> 00:03:51,280
بحيث النتيجة النهائية الخاصة بك هي ملف مضغوط جدا مع الحد الأدنى

48
00:03:51,280 --> 00:03:56,306
من الأحرف، بحيث يمكن تقديمها بسرعة كبيرة جدا.

49
00:03:56,306 --> 00:03:57,812
ولكن في الوقت نفسه،

50
00:03:57,812 --> 00:04:03,099
تريد الحفاظ على الوظائف التي قمت بتصميمها في شفرة CSS الخاصة بك.

51
00:04:04,550 --> 00:04:09,140
وبالمثل، يمكنك توزيع رمز CSS الخاص بك في العديد من الملفات،

52
00:04:09,140 --> 00:04:12,870
أثناء تصميم وبناء موقع الويب الخاص بك.

53
00:04:12,870 --> 00:04:17,620
قد ترغب في تسلسل كل منهم في ملف CSS واحد في النهاية،

54
00:04:17,620 --> 00:04:21,430
بحيث يجب تنزيل ملف CSS واحد فقط

55
00:04:21,430 --> 00:04:25,290
بواسطة المتصفح عند عرض موقع الويب الخاص بك.

56
00:04:25,290 --> 00:04:27,150
لذا فإن التسلسل هو

57
00:04:27,150 --> 00:04:32,340
مهمة أخرى تشارك عندما تقوم ببناء موقع الويب الخاص بك.

58
00:04:33,660 --> 00:04:38,940
وبالمثل، عند كتابة شفرة جافا سكريبت، سواء كان جافا سكريبت النقي

59
00:04:38,940 --> 00:04:44,800
أو مسج أو أحد الأطر التي سنستخدمها في

60
00:04:44,800 --> 00:04:50,640
الدورات المستقبلية لهذا التخصص، ستحتاج إلى كتابة شفرة جافا سكريبت.

61
00:04:50,640 --> 00:04:53,550
لذلك بمجرد كتابة شفرة جافا سكريبت، ستحتاج إلى أن تكون قادرًا على التحقق من

62
00:04:53,550 --> 00:04:57,510
شفرة جافا سكريبت بحثًا عن الأخطاء والمشاكل المحتملة.

63
00:04:57,510 --> 00:05:00,576
أشياء مثل الفواصل المنقوطة المفقودة،

64
00:05:02,810 --> 00:05:09,030
الاستخدام غير السليم للغة، وهلم جرا، لذلك ما نسميه تحليل رمز ثابت.

65
00:05:09,030 --> 00:05:13,490
لذلك إذا كنت تريد أن تكون قادرا على تنفيذ هذا، حتى قبل نشر

66
00:05:14,830 --> 00:05:18,180
موقعنا على الانترنت على خادم الويب.

67
00:05:18,180 --> 00:05:23,379
وبالمثل، قد نقوم بتنظيم شفرتنا في ملفات JavaScript متعددة.

68
00:05:23,379 --> 00:05:28,135
عندما نقوم بنشر بالفعل، قد نرغب في تسلسل كل هذه الملفات في

69
00:05:28,135 --> 00:05:33,515
ملف جافا سكريبت واحد ومن ثم استخدام ذلك في صفحات الويب الخاصة بنا.

70
00:05:33,515 --> 00:05:36,775
ويمكن أن يتم هذا التسلسل تلقائيا.

71
00:05:36,775 --> 00:05:42,340
وبالمثل، فإن قبح شفرة جافا سكريبت، والتي تقف على

72
00:05:42,340 --> 00:05:46,720
التصغير، وهذا يعني إزالة كل المساحة البيضاء

73
00:05:46,720 --> 00:05:48,880
والتعليقات غير الضرورية وهلم جرا.

74
00:05:48,880 --> 00:05:53,670
وتشويش الشفرة، مما يعني تقليل أسماء

75
00:05:53,670 --> 00:05:58,100
المتغيرات المحلية إلى أحرف مفردة كلما كان ذلك ممكنا.

76
00:05:58,100 --> 00:06:01,562
الآن، من وجهة نظر الكمبيوتر،

77
00:06:01,562 --> 00:06:06,790
فإنه لا يهتم حقا كيف تبدو التعليمات البرمجية طالما أنها تعمل بشكل صحيح.

78
00:06:06,790 --> 00:06:12,230
بالنسبة للتنسيق البشري القابل للقراءة، من الواضح أننا نكتب الكود

79
00:06:12,230 --> 00:06:17,960
بطريقة أكثر تفصيلاً، بحيث يكون من الأسهل بالنسبة لنا اتباع ما يفعله الرمز.

80
00:06:17,960 --> 00:06:19,620
لذلك عندما تقوم بنشر بالفعل،

81
00:06:19,620 --> 00:06:23,460
قد ترغب في إزالة جميع الميزات الغريبة من شفرتك.

82
00:06:23,460 --> 00:06:29,226
ثم ضغطه بحيث سيتم تقديم الحد الأدنى من التعليمات البرمجية.

83
00:06:29,226 --> 00:06:35,270
في الوقت نفسه، عند الانتهاء من

84
00:06:35,270 --> 00:06:37,200
عملية تسلسل جشينت والقبح،

85
00:06:37,200 --> 00:06:41,990
قد لا تزال ترغب في التأكد من أن التعليمات البرمجية الناتجة سوف لا تزال تعمل بشكل صحيح.

86
00:06:41,990 --> 00:06:46,490
لذلك، قد ترغب في إعادة التحقق من التعليمات البرمجية الخاصة بك للأخطاء المحتملة.

87
00:06:47,550 --> 00:06:52,127
CSS وJavaScript هما جانبان رئيسيان لتطوير الويب الخاص بك

88
00:06:52,127 --> 00:06:55,640
من الواضح أنك تحتاج إلى إيلاء الكثير من الاهتمام لهما.

89
00:06:55,640 --> 00:06:59,640
ولكن هناك العديد من المهام الأصغر الأخرى التي تحتاج إلى تنفيذها

90
00:06:59,640 --> 00:07:02,870
قبل أن يصبح موقع الويب الخاص بك جاهزًا للنشر.

91
00:07:02,870 --> 00:07:08,601
قد تقوم بتضمين الكثير من الصور في صفحات الويب الخاصة بك.

92
00:07:08,601 --> 00:07:14,574
بمجرد أن يصبح موقع الويب الخاص بك جاهزًا، قد ترغب في ضغط تلك الصور بحيث

93
00:07:14,574 --> 00:07:17,881
يمكنك تحسين أحجام الملفات،

94
00:07:17,881 --> 00:07:23,440
بحيث تكون صورهم أقل حجم للملفات ليتم نشرها.

95
00:07:24,510 --> 00:07:30,310
وبالمثل، أثناء قيامك بالتطوير، قد تقوم بإجراء تعديلات، على

96
00:07:30,310 --> 00:07:35,580
سبيل المثال، على ملفات Sass أو شفرة JavaScript الخاصة بك.

97
00:07:35,580 --> 00:07:38,268
عند الانتهاء من هذه التعديلات،

98
00:07:38,268 --> 00:07:42,748
تريد أن تكون قادرًا على تنفيذ تلك المهام تلقائيًا

99
00:07:42,748 --> 00:07:47,990
، مثل مهام التسلسل والتصغير والقبح.

100
00:07:47,990 --> 00:07:52,110
حتى نتمكن من استخدام مهام المشاهدة،

101
00:07:52,110 --> 00:07:56,480
التي تتمثل مهمتها الرئيسية في الحفاظ على مراقبة كل هذه الملفات.

102
00:07:56,480 --> 00:07:59,340
وإذا تم إجراء أي تغييرات على هذه الملفات،

103
00:07:59,340 --> 00:08:03,070
فسيتم تنفيذ المهام تلقائيًا.

104
00:08:03,070 --> 00:08:09,260
سيؤدي ذلك إلى تحرير الكثير من وقتنا من القيام بالمهام المتكررة يدويًا.

105
00:08:10,610 --> 00:08:15,320
سنلقي نظرة على بعض هذا بمزيد من التفصيل في التدريبات التي تليها.

106
00:08:16,660 --> 00:08:22,060
أحد الجوانب الأخرى، أثناء قيامك بالتطوير،

107
00:08:22,060 --> 00:08:25,940
هو أن تكون قادرًا على تقديم شفرتك

108
00:08:25,940 --> 00:08:30,570
ومشاهدة الشفرة في متصفحك.

109
00:08:30,570 --> 00:08:37,960
لذلك رأينا استخدام الخادم المباشر في تطورنا السابق،

110
00:08:37,960 --> 00:08:42,330
حيث كان لدينا الخادم وتشغيله وخدمة ما يصل الرمز.

111
00:08:42,330 --> 00:08:46,530
حتى نتمكن من رؤية التغييرات التي نجريها على الفور

112
00:08:48,230 --> 00:08:51,020
يتم تقديمها في المتصفح.

113
00:08:51,020 --> 00:08:55,549
لذلك، لهذا، نحن بحاجة إلى الخادم وآلية livereload،

114
00:08:55,549 --> 00:09:01,340
والخادم الحي الذي رأيناه في وقت سابق هو أحد الأمثلة على كيفية تحقيق ذلك.

115
00:09:02,740 --> 00:09:07,850
وأخيرا، إذا كنت تكتب التعليمات البرمجية، فمن الواضح أنك تحتاج إلى إجراء اختبار

116
00:09:07,850 --> 00:09:14,210
التعليمات البرمجية الخاصة بك، والتي، في حالة Bootstrap، هو أقل بكثير من الاعتبار.

117
00:09:14,210 --> 00:09:18,930
ولكن عندما تستمر في استخدام أطر جافا سكريبت المختلفة،

118
00:09:18,930 --> 00:09:21,915
يصبح الاختبار مهمة بنفس القدر من الأهمية.

119
00:09:23,190 --> 00:09:28,680
وأخيرًا، تريد أن تكون قادرًا على إنجاز جميع هذه المهام

120
00:09:28,680 --> 00:09:34,250
ثم إنشاء رمز النشر النهائي الذي يمكن تحميله بعد ذلك

121
00:09:34,250 --> 00:09:40,790
إلى خادم الويب الخاص بك لجعل موقع الويب الخاص بك متاحًا للجمهور العام.

122
00:09:42,450 --> 00:09:48,115
الخطوات المشاركة في بناء موقعك للنشر، ما نسميه

123
00:09:48,115 --> 00:09:53,950
بناء ملفات التوزيع، هو أيضا مهمة بنفس القدر من الأهمية.

124
00:09:53,950 --> 00:09:59,754
سنلقي نظرة على بعض هذه من خلال أمثلة في التمرين التالي

125
00:09:59,754 --> 00:10:04,470
وأيضًا الدرس التالي حيث سنلقي نظرة على المتسابقين.

126
00:10:04,470 --> 00:10:10,569
[ موسيقى]