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

2
00:00:04,114 --> 00:00:07,200
دعونا الآن نتحدث عن الملاحة.

3
00:00:07,200 --> 00:00:12,980
ما هو الملاحة، لماذا الملاحة مهم لموقعك؟

4
00:00:12,980 --> 00:00:16,820
وكيف نقدم معلومات التصفح على موقع الويب الخاص بك؟

5
00:00:16,820 --> 00:00:22,264
لذلك، هذه هي السؤال الذي سنحاول الإجابة عليه في هذه المحاضرة بالذات.

6
00:00:23,746 --> 00:00:27,058
السؤال الأول الواضح الذي يتبادر إلى ذهنك هو،

7
00:00:27,058 --> 00:00:30,500
لماذا نحتاج إلى تصفح الموقع؟

8
00:00:30,500 --> 00:00:34,680
كما تدرك، فإن معظم المواقع لم تعد صفحات واحدة.

9
00:00:34,680 --> 00:00:37,840
بالطبع، هناك مواقع صفحة واحدة

10
00:00:37,840 --> 00:00:42,500
مثل صفحة أستاذ الخاص بك في قسم علوم الكمبيوتر الخاص بك.

11
00:00:42,500 --> 00:00:47,450
ولكن معظم المواقع تحتوي عادة على أكثر من صفحة واحدة.

12
00:00:47,450 --> 00:00:52,080
كما رأينا مع موقعنا على الارتباك الذي نقوم ببنائه،

13
00:00:52,080 --> 00:00:56,300
قمنا بالفعل بإضافة صفحة ثانية تسمى صفحة aboutus.html.

14
00:00:56,300 --> 00:01:01,100
الآن الطريقة التي انتقلنا بها إلى صفحة aboutus.html كانت

15
00:01:01,100 --> 00:01:06,259
كتابة ذلك بشكل صريح في شريط العناوين في متصفحنا.

16
00:01:06,259 --> 00:01:11,300
ولكن هذه طريقة غير مريحة للغاية للتنقل إلى موقع الويب الخاص بك.

17
00:01:12,380 --> 00:01:17,685
سيكون من المنطقي توفير وسيلة بديهية

18
00:01:17,685 --> 00:01:21,125
للمستخدمين للانتقال إلى موقع الويب الخاص بك.

19
00:01:21,125 --> 00:01:26,535
يمكن توفير هذه الوسائل البديهية من خلال العديد من الأساليب المختلفة،

20
00:01:26,535 --> 00:01:32,972
وشريط التنقل هو واحد من الطرق الأكثر شيوعا للإشارة إلى هذه المعلومات.

21
00:01:32,972 --> 00:01:37,342
لذا، سننظر في العديد من الطرق الشائعة لتوفير

22
00:01:37,342 --> 00:01:41,392
أنماط التنقل على مواقع الويب النموذجية.

23
00:01:41,392 --> 00:01:46,656
في هذا السياق، كثيرا ما تسمع الناس يتحدثون عن بنية المعلومات.

24
00:01:46,656 --> 00:01:51,458
تبدأ بنية المعلومات بهيكل النظام،

25
00:01:51,458 --> 00:01:55,879
فيما يتعلق بالطريقة التي يتم بها تنظيم المعلومات، والمسمى.

26
00:01:55,879 --> 00:02:01,340
ويتم توفير الملاحة من خلال المحتوى أو من خلال هذه المعلومات.

27
00:02:01,340 --> 00:02:05,240
الآن بنية المعلومات، في حد ذاتها، هي حقل كبير بالكامل.

28
00:02:05,240 --> 00:02:09,375
ومن خارج نطاق هذه الدورة لتغطية مهندس المعلومات.

29
00:02:09,375 --> 00:02:14,475
ولكن، في حال كنت مهتمًا بتنظيم

30
00:02:14,475 --> 00:02:18,145
وتوفير المعلومات للمستخدمين من خلال، على سبيل المثال،

31
00:02:18,145 --> 00:02:23,067
مواقع الويب، فقد زودتك ببعض الروابط في الموارد الإضافية

32
00:02:23,067 --> 00:02:27,727
التي يمكنك الذهاب إليها وقراءتها لمزيد من المعرفة.

33
00:02:27,727 --> 00:02:30,317
ولكن على أي حال، عندما تقوم بتصميم موقع ويب،

34
00:02:30,317 --> 00:02:35,887
من المهم أن تفهم الحاجة إلى

35
00:02:35,887 --> 00:02:41,697
تصميم هياكل تنقل المعلومات داخل موقع الويب الخاص بك.

36
00:02:43,930 --> 00:02:48,970
وهذا التنظيم من المعلومات داخل موقع الويب الخاص بك يملي أيضا

37
00:02:48,970 --> 00:02:53,545
أي نوع من وسائل الملاحة التي تقدمها على موقع الويب الخاص بك،

38
00:02:53,545 --> 00:02:57,280
وبناء على كيفية تنظيم تلك المعلومات.

39
00:02:57,280 --> 00:03:02,300
وعادة ما يتم تنظيم موقع على شبكة الإنترنت في نوع من شجرة منظمة أو

40
00:03:02,300 --> 00:03:04,630
بطريقة هرمية.

41
00:03:04,630 --> 00:03:07,359
وهذا يملي عليك تلقائيا

42
00:03:07,359 --> 00:03:11,913
كيفية تصميم الدعم الملاحي داخل موقع الويب الخاص بك.

43
00:03:11,913 --> 00:03:16,737
استخدام شريط التنقل، فتات الخبز،

44
00:03:16,737 --> 00:03:22,405
وغيرها من وسائل الملاحة ضرورية للغاية

45
00:03:22,405 --> 00:03:29,760
لتمكين المستخدمين من رؤية أجزاء مختلفة من موقع الويب الخاص بك.

46
00:03:29,760 --> 00:03:35,150
عندما تزور معظم المواقع سوف تبحث في كثير من الأحيان عن شريط التنقل.

47
00:03:35,150 --> 00:03:40,080
هذا هو نوع من شريط التي عادة ما تعلق في الجزء العلوي من

48
00:03:40,080 --> 00:03:45,570
الموقع، أو في بعض الأحيان في الجزء السفلي من الموقع، أو في بعض الأحيان على الجانب،

49
00:03:45,570 --> 00:03:50,865
والتي توفر لك مؤشرات كافية نحو

50
00:03:50,865 --> 00:03:56,365
نوع المعلومات التي يمكنك الوصول إليها على هذا الموقع.

51
00:03:56,365 --> 00:04:01,095
وبالتالي فإن شريط التنقل الخاص بك سوف يحتوي عادة على روابط لصفحات مختلفة

52
00:04:01,095 --> 00:04:04,615
تشكل جزءا من موقع الويب الخاص بك.

53
00:04:04,615 --> 00:04:09,425
إذن شريط التنقل النموذجي، كيف يمكنك تصميم هذا؟

54
00:04:09,425 --> 00:04:13,085
عند تصميم شريط تنقل نموذجي، يجب أن

55
00:04:14,360 --> 00:04:19,500
تضع في اعتبارك بعض dos و don'ts حول كيفية تصميم أشرطة التنقل.

56
00:04:19,500 --> 00:04:23,870
الأول هو أنك تستخدم

57
00:04:23,870 --> 00:04:28,960
مصطلحات سهلة الاستخدام وبسيطة داخل شريط التنقل الخاص بك للإشارة إلى الروابط المختلفة

58
00:04:28,960 --> 00:04:34,900
التي يمكن للمستخدمين اتباعها داخل موقع الويب الخاص بك للوصول إلى المعلومات..

59
00:04:34,900 --> 00:04:37,070
يجب عليك توفير تنقل موحد،

60
00:04:37,070 --> 00:04:41,090
بحيث أينما كان المستخدم داخل التسلسل الهرمي لموقع الويب الخاص بك،

61
00:04:41,090 --> 00:04:46,590
سيعرفون دائمًا كيفية العودة إلى الصفحة الرئيسية، وكيفية الانتقال إلى

62
00:04:46,590 --> 00:04:50,760
التسلسل الهرمي التالي أو السابق أو لأعلى وأسفل من نوع ما.

63
00:04:50,760 --> 00:04:54,670
لذا فإن الإشارة إلى موقع المستخدم

64
00:04:54,670 --> 00:04:59,910
داخل التسلسل الهرمي لموقع الويب الخاص بك مفيد جدًا

65
00:04:59,910 --> 00:05:04,790
لتوفير طريقة سهلة الاستخدام للتنقل في مواقع الويب الخاصة بك.

66
00:05:04,790 --> 00:05:09,345
أيضا، هناك بعض الاتفاقيات القياسية التي يتبعها الناس

67
00:05:09,345 --> 00:05:12,365
عند تصميم أشرطة التنقل هذه.

68
00:05:12,365 --> 00:05:17,515
عادة، عندما يكون لديك شعار موقع الويب الخاص بك أو

69
00:05:17,515 --> 00:05:23,832
شركتك مضمنًا في شريط التنقل الخاص بك، فإن النقر على هذه الشعارات أو

70
00:05:23,832 --> 00:05:29,177
زر الصفحة الرئيسية يجب أن يعيدك إلى أعلى مستوى من التسلسل الهرمي أو

71
00:05:29,177 --> 00:05:33,711
الصفحة الرئيسية لموقع الويب الخاص بك، وعادة ما تكون صفحة index.html.

72
00:05:33,711 --> 00:05:38,817
بعض من لا يجب أن تأخذ في الاعتبار هو أنه يجب أن لا يكون لديك الكثير من

73
00:05:38,817 --> 00:05:41,457
الخيارات في شريط التنقل الخاص بك.

74
00:05:41,457 --> 00:05:43,225
كم عدد كبير جدا؟

75
00:05:43,225 --> 00:05:48,470
إذا وجدت أن التنقل باستخدام أشرطة التنقل الخاصة بك مرهق للغاية،

76
00:05:48,470 --> 00:05:52,240
فهذا يعني أن هناك العديد من الخيارات على شريط التنقل الخاص بك.

77
00:05:52,240 --> 00:05:58,010
توفير مجموعة معقولة من الخيارات داخل شريط التنقل الخاص بك بحيث يمكنك

78
00:05:58,010 --> 00:06:04,659
الإشارة إلى الاتجاهات التي يمكن للمستخدم اتباعها في التنقل من خلال موقع الويب الخاص بك.

79
00:06:05,880 --> 00:06:11,230
وعندما تستخدم عناصر التنقل هذه في شريط التنقل الخاص بك،

80
00:06:11,230 --> 00:06:17,090
لا تستخدم التسميات العامة، استخدم تسميات ذات مغزى.

81
00:06:17,090 --> 00:06:22,159
على سبيل المثال، إذا وضعت تسمية باسم المنتج في

82
00:06:22,159 --> 00:06:28,630
شريط التنقل الخاص بك، سيتم الخلط بين الناس حول ما تعنيه حسب المنتج.

83
00:06:28,630 --> 00:06:32,650
أو قل، إذا وضعت خدمة في شريط التنقل الخاص بك، فقد يتم الخلط بينها.

84
00:06:32,650 --> 00:06:34,780
ما نوع الخدمة التي تقدمها؟

85
00:06:34,780 --> 00:06:38,790
سيكون أكثر معنى لإعطاء مصطلح أكثر وصفية في

86
00:06:38,790 --> 00:06:43,710
رؤوسك في شريط التنقل الخاص بك. و هناك

87
00:06:43,710 --> 00:06:46,380
و سيلة أخرى لتوفير الملاحة لل

88
00:06:46,380 --> 00:06:50,030
مستخدمين هي توفير ما يسمى بفتات الخبز.

89
00:06:50,030 --> 00:06:55,895
يتم توفير هذه عادة في مكان ما في تلك الصفحة،

90
00:06:55,895 --> 00:07:00,737
نموذجية نحو الحافة العلوية لصفحة الويب،

91
00:07:00,737 --> 00:07:04,954
أقرب إلى عنوان صفحة الويب تلك.

92
00:07:04,954 --> 00:07:10,513
يشير نوع breadcrumbs إلى نوع من

93
00:07:10,513 --> 00:07:16,255
التسلسل الهرمي الملاحي الذي أنت حاليًا في موقع الويب الخاص بك.

94
00:07:16,255 --> 00:07:21,595
لذلك يوفر هذا خيار التنقل الثانوي لموقع الويب الخاص بك.

95
00:07:21,595 --> 00:07:26,185
لذلك يمكن وضع هذا في مكان ما تحت الملاحة الأساسية.

96
00:07:26,185 --> 00:07:32,082
قد يشير إلى التسلسل الهرمي للصفحات التي ذهبت من خلالها.

97
00:07:32,082 --> 00:07:36,687
ويمكن تسليط الضوء على الموقع الحالي على وجه التحديد في

98
00:07:36,687 --> 00:07:38,727
فتات الخبز هناك.

99
00:07:38,727 --> 00:07:43,708
لذلك الطرق المختلفة التي يمكن للناس استخدام فتات الخبز

100
00:07:43,708 --> 00:07:48,588
تشمل توفير الملاحة على أساس المسار.

101
00:07:48,588 --> 00:07:53,558
قل، على سبيل المثال، إذا كان لديك مستخدم يمر بمجموعة من الخطوات

102
00:07:53,558 --> 00:07:59,358
لإكمال مهمة على موقع الويب الخاص بك، على سبيل المثال، حجز تذكرة طيران.

103
00:07:59,358 --> 00:08:04,780
ثم يمكنك استخدام نهج فتات الخبز للإشارة إليهم إلى

104
00:08:04,780 --> 00:08:09,880
الخطوة التي يقوم بها المستخدم حاليًا في تسلسل الخطوات.

105
00:08:09,880 --> 00:08:14,320
وبالمثل، إذا كنت توفر التنقل القائم على موقعك

106
00:08:14,320 --> 00:08:18,460
لنهج هرمي داخل موقع الويب الخاص بك.

107
00:08:18,460 --> 00:08:23,785
لذا، ما هو مستوى التسلسل الهرمي الذي أنت فيه وما هو الجزء العلوي نحو

108
00:08:23,785 --> 00:08:29,680
جذر التسلسل الهرمي الخاص بك، بحيث يمكن الإشارة إليها بواسطة فتات الخبز الخاصة بك.

109
00:08:29,680 --> 00:08:35,092
يمكن أيضًا أن تكون فتات الخبز الخاصة بك قائمة على السمة، مما يعني أنك توفر مجموعة

110
00:08:35,092 --> 00:08:40,754
من الخيارات المشار إليها في فتات الخبز الخاصة بك للمستخدم في النقطة الحالية من الوقت.

111
00:08:40,754 --> 00:08:45,032
يوفر إطار واجهة المستخدم الأمامية النموذجية العديد

112
00:08:45,032 --> 00:08:49,840
من الطرق الأخرى لتوفير التنقل على صفحات الويب الخاصة بك.

113
00:08:49,840 --> 00:08:54,555
وتشمل هذه علامات التبويب، حبوب منع الحمل، ترقيم الصفحات، المنسدلة،

114
00:08:54,555 --> 00:08:59,210
الأكورديون، العلامات، و Schrollspy، و Affix.

115
00:08:59,210 --> 00:09:04,447
سنلقي نظرة على بعض هذه بمزيد من التفصيل عندما نذهب من خلال

116
00:09:04,447 --> 00:09:10,614
الدروس المختلفة في الوحدات التي تتبع هذا الدرس بالذات.

117
00:09:10,614 --> 00:09:11,114
[ موسيقى]