ٍنتحدث اليوم عن روابط التصميم وقوائم التصميم. عندما يحين وقت تصميم الروابط بصفحتك، من المهم حقًا أن تتذكر أن الروابط
هى التي تشكل موقع الويب. وهذا الترابط هو الذي يساعد الناس
على اكتساب المعرفة. ويساعد محركات البحث على
ربط النص والمحتوى الخاص بك بنص ومحتوى شخص اّخر. لذا، سنتحدث اليوم عن الروابط بالتحديد لأنني أريدك أن تفكر في كيفية التصميم. عندما تقوم بتصميم رابط بشكل عام،
يمكنك أن تستخدم كافة السمات المختلفة
التي كنت تستخدمها في كل شيء اّخر. في العناوين والفقرات الخاصة بك،
وأشياء من هذا القبيل. ومع ذلك، فإن الروابط لها خاصية واحدة إضافية خاصة نطلق عليها زخرفة النص. ولذا، في هذا المثال هنا، ما يحدث هو أن بدلاً من أن تكون روابطي مضمنة،
مما يعني أن تكون بجانب بعضها البعض، سأقول بأنني أود فصلها عن بعضها،
كل رابط فوق الاّخر. لذا فناّمل أن تبدو معظم عمليات البرمجة مألوفة بالنسبة لك. تجول برأسك فكرة أن تكون الشاشة ممتلئة،
وستظهر العناصر تحت بعضها البعض. نوع الخط، أريده ان يكون عريضًا بعض الشئ. لقد قمت بوضع لون جديد ولون خلفية جديد. لقد قمت الاّن بضبط العرض،
وإذا حاولت ضبط العرض ولم يتم ذلك بنجاح، فقط تذكر أن
الروابط تكون مضمنة بشكل افتراضي، ولا يكون لها عرضًا إلا إذا
قمت بتغييرها إلى كتل أو كتل مضمنة. سأقوم أيضًا بمحاذاة النص
وإضافة بعض الحواشي والقيام بزخرفة النص، وخيار ألاشيء، وهذا جديد. هذا يقول، أهلاً، لا شيء، أريد التخلص من تلك السطور
الموجودة عادة أسفل الروابط. لذا فقد انتقلت من هنا لأعلى في الزاوية العلوية إلى شيء أكثر تصميمًا هنا بالأسفل. في واقع الأمر، لا يبدو حتى وكأنه رابط على الإطلاق. إذاً لنتحدث عن ذلك عند تثبيت روابطهم في بعض الأحيان، يحاول الناس حقًا جعلها تبدو مشابهه للأزرار بشكل أكبر. ونريد أن نتجنب ذلك حيث أننا نريد أن نعطي طابعًا دلاليًا. إذا كنت تريد زرًا، فقم باستخدام عنصر الزر بدلاً من ذلك. كما يمكنك القيام بذلك ببساطة شديدة
عن طريق وضع علامة الزر بدلاً من علامة الرابط. ومرة أخرى بنفس الطريقة، يمكنك تصميمه بطرق مختلفة. ولكن ما أريدك أن تفهمه هو أن هناك العديد من الأشياء المختلفة التي يمكنك القيام بها عند التعامل مع الروابط،
فضلاً عن العديد من التصميمات التي تقوم بها عند التعامل معها، وتأكد من فهم الناس
أن ما ينظرون إليه هو رابط. أو إذا كانوا يستخدمون قارئ الشاشة،
إنه رابط يسمعون عنه. لذا، فهناك شئ اّخر جديد بخصوص الروابط، لم نره من قبل، هو فكرة أن هذه الروابط لها حالات. هل لاحظت هذا من قبل، عندما تذهب إلى صفحة ويب، أحيانًا تكون بعض الروابط لها لون أزرق،
وبعضها ذو لون أرجواني؟ وستدرك بعد قليل، أن الروابط الأرجوانية اللون هى موجودة هناك بالفعل
لأنك قمت بزيارتها من قبل. لذا، فما لدينا هو هذه الحالات المختلفة. وسأقوم بمراجعتها في عجالة لاحقًا، عندما نتحدث عن ما نطلق عليه الفئات الزائفة (pseudo classes)،
وسنتحدث عنها باستفاضة أكثر. ونشير بإيجاز إلى أن الرابط أ الموجود هنا يشير ببساطة إلى أنه مجرد رابط عادي، رأيته من قبل، و A يشير إلى وجود الرابط،
ويتضح ذلك من المتصفح الخاص بي. فهو يوضح أنني قد قمت بالنقر عليه بالفعل. سيكتسب المتصفح لونا مختلفًا بشكل افتراضي. كما أننا أيضًا لدينا رابطًا نم المرور والوقوف عليه. لذا فربما تكون قد لاحظت أنك عندما تقف بالفأرة فوق شئ ما، كما لو كنت مسكت القلم ووقفت هنا. هل سيتسبب ذلك في حدوث قلب الصفحة رأسًا على عقب. ربما سيغير اللون أو أشياء مختلفة من هذا القبيل. لذا فيتم تفعيل خاصية الوقوف فوق عنصر ما
عن طريق الوقوف بفأرتك فوق رابط معين. هناك سؤال يثير الانتباه وهو هل يعمل هذا مع الشاشات التي تعمل باللمس؟ عندما تقوم بتطوير صفحتك عليك أن تتذكر أن
الوقوف على عنصر ما ليس ضروريًا أن يعمل في حالة اتصال الأشخاص عبر الهاتف أو جهاز لوحي أو شئ من هذا القبيل. وهذا يدفعني إلى حالة أخرى يطلق عليها " التركيز". إذًا فحالة التركيز تحدث عندما يقوم شخص ما
بالتبويب عبر صفحتك. عند الضغط على علامة التبويب، سوف تنتقل من عنصر لاّخر. وعندما يتعلق الأمر بهذا الرابط المحدد،
ستعلم أنني في أوج التركيز،لذا إذا كنت تريد القيام بشئ مختلف،
ربما تفعل نفس الشئ عندما يقوم الناس بالوقوف فوق عنصر ما، وهذه هى الطريقة التي يمكن من خلالها القيام بهذا النشاط. حسنًا، واّخرها ذلك الذي أظن أنه هو الأغرب على الإطلاق، ربما أطلق عليه حتى شئ أحمق، لكنني لم أقم بإنشاء إنترنت و لا HTML مع كامل الاحترام، إلا أنه شئ غريب حقًا، لأن هذا يشير إلى هذا هو الرابط فقط كما أقوم بالنقر عليه. والسبب في اعتقادي أنه غريبًا هو أن بالنسبة لمعظمنا، عندما نضغط على رابط ما سننتقل إلى صفحة جديدة، لذا لن ننتقل حتى نرى ما حدث للتصميم. حسنًا؟ فلنمضِ قدمًا، ونتحدث عن كيفية القيام بذلك. ولكن قبل القيام بذلك، سنعود مرة أخرى لفكرة الأولوية. وسنجد الكثير من أوراق التصميم المتتابعة في هذا الصدد. إذا قررت أنك تريد استخدام هذه الحالات المختلفة، هنا قاعدتان عليك تذكرهما عندما تقوم بكتابة أوراق التصميم الخاصة بك. أولهما، إذا كنت تستخدم A،
ينبغي أن تتم عملية الوقوف على العنصر بعد الرابط A. وبعد ذلك، بعد أن تتم زيارة العنصر A،
وتفعيل A ينبغي أن يتم ذلك بعد الوقوف على A. لذا، فهذا التسلسل الهرمي يتم عندما تقوم بتغطية عناصر صفحتك. فلنلق نظرة الاّن على مثالاً عن بعض عمليات البرمجة (الترميز)
وكيف أقوم بتصميم الروابط. في هذا المثال وهنا لدى فقط ثلاثة روابط
لم أقم بتصميمها بأي شكل من الأشكال. لدى رابط مقدمة لتصميم صفحة ويب، رابط خاص بجامعة ميشيغان، ورابط خاص بجامعة ولاية كينت، ذلك المكان الذي أتممت فيه دراستي الجامعية. ولكن ماذا يحدث إذا مضيت قدمًا، وأضفت بعض الأشياء إلى CSS؟ هنا في الأعلى لدى كافة الأشياء النموذجية التي تحدثنا عنها من قبل، العرض واللون. وقد أضفت زخرفة النص، ما أردت أيضًا إضافته هو فكرة الهامش
حيث يمكنني أن أقوم بتوسيط كل رابط من الروابط الخاصة بي كل رابط فوق الاّخر مع ترك مسافة بينهم. حسنًا، فلنلق نظرة على الشكل الذي يبدو عليه يمكنك أن ترى أن كل رابط من الروابط
يبدو مختلفًا كثيرًا. حسنًا. ويمكنك أن ترى عندما أري قلمي، عندما أقوم بالوقوف على كل عنصر من هذه العناصر،
ما يحدث هو أن اللون يتغير. كيف تم ذلك هذا. عندما يتم الوقوف على الرابط الخاص بي، أعرف أنه يتم تغيير لون الخلفية ولون الخط. حسنًا، حسنًا، ما هو التركيز A،
وما حدث هنا بالأسفل ، A تم تنشيطه قليلاً؟ ما يحدث هنا هو أنني قمت بالتركيز على هؤلاء الأشخاص الذين يقومون بالتبويب عبر صفحتي. لذا فعندما تشاهدني وأنا أقوم بالتبويب،
يمكنك ان ترى مقدمة تصميم موقع الويب يتم التركيز عليها، ثم بعد ذلك جامعة ميشيغان، ثم جامعة ولاكية كينت، وأنا أقوم بذلك
من خلال التبويب عبر الصفحة. والقاعدة الأخيرة، القاعدة الفعالة، هى شئ سأقوم بعرضه عليكم، كفاصل نأخذه هنا. إن الطريقة التي تعمل بها المناصر النشطة
هو أنه عندما تقوم بالفعل بالنقر على الصفحة، سيتم إضافة إطارًا حول الرابط. الاّن، الشئ الغريب هو أنه عندما انتهي من النقر سأنتقل لصفحة جديدة. وسينقطع ولا يمكنك حقًا رؤية هذا الإطار طالما لم أضغط عليه بقصد، الأمر فقط هكذا. لذا، ففي هذا المثال حاولت أن أوضح لكم
الطريقتين المختلفتين اللتين من خلالهما يمكنك تصميم العناصر. والاّن، فلنمضي قدمًا ونفكر في هذا بشئ من التفصيل. عندما تصمم هذه الروابط،
لا أستطيع التأكيد مرة أخرى بما فيه الكفاية على أهميه إمكانية الوصول، ينبغي علينا التأكد من أن روابطك هى روابط بالفعل، وأن الناس تعرف بأنها موجودة. بمجرد الانتهاء من تصميم الروابط، لنمضي قدمًا، ونبدأ في التفكير بشأن عناصر قائمة التصميم. عندما تقوم بتصميم القوائم،
ستبدو كافة الخصائص الافتراضية متشابهة. لديك واحد، اثنان، ثلاثة،
أو دائرة ، دائرة ثانية، ودائرة ثالثة، ولكن لكن يمكننا تغيير كل هذا،
يمكننا تغيير أشياء بخلاف الخط والهامش، كي تبدو بنفس نمط قوائمك. لذا فإن بعض الأشياء التي يمكننا النظر إليها كنوع من قوائم التصميم. صورة على غرار قوائم التصميم. القائمة تحدد الوضع، والقائمة فقط تصمم نفسها. يوضح نوع نمط القائمة بشكل أساسي كيفية الإشارة. إلى عناصر القائمة المختلفة؟ وبالنسبة للقوائم المرتبة بشكل افتراضي مرة أخرى،
لدينا واحد، واثنان، ثلاثة، ولكن يمكنك إعطاء قيم مختلفة. يمكنك القول أنني أريد أن يكون رقمًا رومانيًا منخفضًا،
ورقمًا رومانيًا مرتفعًا، رقمي أبجدي منخفض، ويمكنك التعامل معهم
حتى ينتابك الشعور الذي تريده. إذا في هذه الحالة، انتقلنا من 1 و 2 إلى A و B. وإذا قمت بدلاً من ذلك باستخدام حرف ألفا أقل،
ستكون قيمة أ و ب صغيرة. عندما تقوم بتصميم نمط القائمة للقوائم الغير مرتبة،
تجد أن عادة ما لديك ويعتمد على المتصفح الخاص بك،
هو دائرة صغيرة أو قرص صغير. يمكننا تغيير ذلك، يمكنا وضع ما نريد أن نتأكد أنه سوف يحدث بالضبط. هناك خيار اّخر يمكنك التعامل معه وهو فكرة التخلص من تلك العلامات الافتراضية تمامًا، بدلاً من ذلك، يمكن استخدام صورة مخصصة لذلك
بدلاً من تلك العلامة التقليدية. وعندما تفعل ذلك، وهذا يعيدنا إلى فكرة وضع نمط القائمة. ففي عدة أوقات، ستقوم بتغيير موضعك، حسب نمط القائمة الذي تستخدمه. وهنا بالأسفل، طرحت مثالاً حيث أقول فيه
أنني أريد صرة نمط القائمة الخاصة بي. بداية لدى هذا المربع، والذي يقول
إن لم تستطع إيجاد الصورة امضِ قدمًا واستخدم المربع وإلا فاستخدم هذه الصورة الموجودة هنا. حسنا؟ لذا دعونا نمضِ قدمًا انظر إلى مثال اّخر. في قائمة ملف HTML، ما أضعه هنا
هو نوعان مختلفان من القوائم، قائمة غير مرتبة وقائمة مرتية. ولقد أدرجت بهما إلى حد ما بعض المعلومات المختلفة. وعندما تنظر إلى هذه الشاشة
التي سأقوم بتكبيرها بعض الشئ، من أجلك هنا إذا استطعت. ويمكنك أن ترى أن القوائم الغير مرتبة
تعتمد على استخدام الدوائر فقط، بينما تستخدم القوائم المرتبة الأرقام الافتراضية. لذا، فلنجرب ذلك الاّن. لنمضِ قدمًا ونضع ورقة التصميم. في ورقة التصميم الخاصة بي، مضيت قدمًا، وذكرت ان
ما أريد فعله في بأنماط القائمة الخاصة بي، هو أنني أريد تبديلها إلى الحروف والأرقام الرومانية المرتفعة،
واستخدام المربع بدلاً من ذلك. إذًا، هذا ما كنا عليه من قبل، وهذا ما أصبحنا عليه. لذا، كما ترون، هناك فقط شئ أكثر من ذلك بعض الشئ. وهذه طريقة بسيطة جدًا لتغيير صفحتك من الطريقة النمطية التي يتبعها الناس على صفحاتهم. هناك خيار اّخر أريد فقط أن أعرضه عليكم، لأنه يروق إلى الجميع،
هو فكرة استخدام صورة نمط القائمة. لذا، سأنتقل للأسفل، وأحذف تعليقي على هذا الترميز. وإذا كنت تتذكر، إذا كنا ننتبه لهذه الفكرة
أنه عندما تكون لديك أولوية فإن هذه القاعدة الجديدة المذكورة في الأسفل،
ستحل محل كافة القواعد المذكورة أعلاه. لذا فلنمضِ قدمًا ونتأكد من أنني قمت بحفظ صفحتي،
لذا فلنمضِ قدمًا وإعادة التحميل. والاّن في هذه الحالة، ما حدث هو
أننا قمنا بإزالة هذه العلامات المعتادة ووضعت العلامة المضيئة بالداخل. لذا، فالقيام بمثل ذلك لا يعتبر أمرًا شاقًا، ولكن ولكن لكي أكون صريحًا، فإن الأمر يستغرق وقت ما،
خصوصًا إذا كنت تستخدم صورًا، وذلك للتأكد من أنك قمت بكتابة كل شئ
بنفس الطريقة بالضبط. الأخطاء المطبعية هي أخطاء مميتة. فلا يهم أن الأمر صعبًا، فالأمر يتعلق بتوخي الحذر الشديد
عندما تقوم بمثل هذه الأشياء. حسنًا، إذا فلنمضي قدمًا
ونراجع ما منا نتحدث عنه حتى الاّن. وليس فقط فى هذه المحاضرة،
ولكن في الدورة التدريبية بقدر ما توصلت إليه اليوم. وما أريد التأكيد عليه هو أنه حتى الاّن،
كنا نقوم بتصميم العلامات، وهذه العلامات يمكن أن تأخذ دائمًا فقط أزواج من القيم و ويمكنك أن تحول صفحتك لشئ رائع حقًا. نحن على وشك الدخول في شئ جديد مختلف بعض الشئ. سنتحدث عن الفئات الزائفة (pseudo-classes)
والمعرفات والمحددات. كما أريد أن أتأكد من أنك تشعر بالراحة وأنا تتعامل مع هذه القواعد المختلفة بنفسك
قبل المضي قدمًا. فشعورك بالراحة الاّن لا يعني أنك مثالي. وهذا لا يعني أنك تعرف كيف تفعل كل شئ. فما يعنيه هو أنك تشعر بالثقة
بالشكل الكافي للمضي قدمًا والبدء في استخدام بعض الأدوات الموجودة هنا لتحسين موقعك. أدرج منهم هنا اثنين فقط حيث أن كليهما معروف جدًا كما هو في حالة كوقع كريس بيديرك
أو أنني فقط وجدتهما ذوي فائدة حقًا. هناك خيارًا اّخر وهو أن تتذكر
أنك يمكنك المضي قدمًا إلى هناك والقيام ببحث على موقع الويب بخصوص أدوات المطور. لست الأول ولن تكون اّخر شخص سيواجه مشكلات عندما تصمم صفحتك. اّمل بشكل عام أن تقوم بالمضي قدمًا في المنتديات في دورة كورسيرا أو في أى فصل دراسي تلتحق به،
وتطلب من زملائك الطلاب المساعدة. لأن الطريقة الوحيدة للتعلم في الحقيقة هى الممارسة، الممارسة، ومواجهة المشاكل، والحصول على مساعدة والاستمرار. عندما تقوم بالمزيد والمزيد من تصميم الموقع الخاص بك،
ستكتسب الثقة لعمل شيء رائع تفخر به. لذا ابق هنا. شكرًا.