أهلًا. في محاضره اليوم سنتحدث عن الألوان. قبل أن أمضي قدمًا حقا ،
أريد فقط أن أذكركم بأنني عالم كمبيوتر، فالفن والتصميم
ليس من الضرورة أن يكونا من ضمن خلفيتي الأساسية. في الواقع ، أنا سيئة للغاية في ذلك. إذًا، ما سأتحدث معكم عنه اليوم ،
عندما أتحدث عن الألوان هو أفضل طريقة لترميز الألوان. ومع ذلك ، إن كنت تبحث حقًا عن نصيحة حول أفضل مخططات الألوان. سأوجهك إلى أماكن مختلفة عبر الإنترنت وسأتيح لك الفرصة لاستخدام خبرتك الخاصة
في معرفة أفضل الألوان التي تتناسق مع بعضها. ولكن لنبدأ بكيفية استخدامنا للألوان
على صفحة الويب الخاصة بك. نحن نتحدث عن قناعات لديك بخصوص ثلاثة ألوان أساسية مختلفة. والتي تعد الألوان الأساسية التي يستخدمها الناس. القناعات هي مجرد مصطلح اّخر لكلمة اقتراحات. هذا ليست قاعده. لا يجب عليك اتباع القواعد التي سأعطيك إياها. إنها فقط الطريقة التي يستخدمها معظم المبرمجين في البرمجة حتى يمكنهم فهم ما كنت تحاول أن تفعله،
عندما ينظرون إلى عملية البرمجية الخاصة بك. إحدى الطرق التي يمكنك من خلالها
إضافة اللون هي ببساطة مجرد استخدام الكلمة الإنجليزية أزرق, أحمر, أصفر، وهكذا. ستجد هذه الخيارات وستجعل صفحتك تبدو أنيقة. المشكلة تكمن في أنها ليست متسقة مع باقي الصفحات. فاللون الأصفر فى متصفح معين ليس نفس شكل الأصفر فى متصفح آخر. لذلك، وفى العموم، نتجنب أسماء الألوان
عند اقتراب موعد مشرعك النهائي. عندما تقوم فقط بالبرمجة وتمضي قدمًا بمشروعك، وتريد فقط أن تظهر شئ على شاشتك. ليست هناك أى مشكلة. يمكنك استخدام اللون الأزرق أو الأحمر أو الأصفر
ولكن ما تريد أن تفعله بعد ذلك. سيتغير عندما أتحدث عن هاتين التقنيتين. الأولي تسمى السداسي ألعشري. يمكنك أن تتعرف على الجزء العشري، هكذا نعد من صفر الى 9. والسداسي العشري يعني فقط أنهم 16 رقمًا بدلاً من 10 أرقام. لذلك يمكن أن تستخدم من 0 الى 9
ثم بعد ذلك أيضًا A,B,C, D, E, F. F هو نوع من أقوى الأرقام التى يمكنك أن تستخدمها. فطريقة استخدام تقنية السداسي العشري،
تتم دائمًا بنفس الطريقة لدينا علامة جنيه متبوعة ب 3 او 6 أرقام. إن الأمثلة التي لدى هنا من أجلك تكون ستة أرقام. والطريقة التي تعمل بها هى أن يكون ليدك لونًا أحمر أخضر وأزرق وكلما زاد الرقم الذي وضعته هنا،
سترى اللون الأحمر والأخضر أو الأزرق أكثر. فلذا إليكم مثالي هذا، لدى مثال للأزرق والأحمر والأصفر أيضا.حيث أنه اعتمادًا على هذه القيم المختلفة التى تضعها يمكن أن يختلف اللون الذي سيظهر على شاشتك. إذًا فتقنية السداسي العشري هى أكثر طريقة شائعة لترميز الألوان عندما تتعامل مع صفحات عدد كبير من الأشخاص وهناك طريقة أخرى تظهر بكثرة وهى RGB ومرة أخرى، فهي نفس فكرة أن لدينا أحمر، وأخضر وأزرق، ولكن بدلا من استخدام هذا النوع الغريب من الأرقام السداسية العشرية من صفر حتى F، سنستخدم أرقامًا بين 0 الى 1. لذلك فقد فعلت نفس الشيء هنا، فقد وضعت واحد واحد، ثم واحد واحد كان بإمكاني أن أضع ببساطة فقط 0.5،0.8،0.6 وكان هذا من شأنه تغيير درجة قوة اللون. لذا فلدي هنا (rgb(0,0,1 أحد الأسباب التى جعلت المبرمجين يفضلون طريقة rbg هو أن هناك خيارًا اّخرًا يطلق عليه rgba و لوقت طويل كان علىً أن أفكر فيما يعنيه ذلك ما تعنيه هو الشفافية. لذا إذا كانت لديك قيمة رابعه فى النهاية ، أتعرف ماذا يعني ذلك؟ أريد أن أستخدم اللون الأزرق، ولكن أريد أن أجعله واضح بعض الشيء. لذلك عندما يتم البدء في استخدامه، لو جعلت القيمة صفرًا بالفعل ستتضح الرؤية تمامًا من خلاله. لو جعلت القيمة الأخيرة (1) فإنها قد تبدو فقط قيمة rgb المعتادة. أحد الأشياء الشيقة التي ستلاحظها وأنت تشاهد هذا الفيديو الآن بينما شخص اّخر يشاهد الفيديو على شاشة أخرى. من المحتمل تمامًا أنه إذا نظرت إليها، ستبدو مختلفة. عليك أن تتذكر أن شاشات المراقبة المختلفة يمكنها عرض الألوان بطرق مختلفة، حسنًا؟ لذا أود أن أريكم مثالاً سريعًا حقًا على الموقع الشبكي يوضح كيف يمكنك رؤية بعض هذه الألوان المختلفة وكيف تعمل. ما ذكرته هنا هو صفحة الويب الخاصة بالدورة التدريبية
ولا بأس إذا لم تتمكن من رؤيتها. أعلم أنها صغيرة نوعًا ما. ما أريد أن أريكم إياه هو استخدامي شيء يسمى فحص العنصر لكى نلقي نظرة على صفحتي، ونلقي نظرة على الألوان، فهي طريقة سريعة حقًا
لأرى كيف يمكنني جعلها تبدو مختلفة. إذًا لديّ الفأرة هنا. سأقوم بالنقر بزر الماوس الأيمن، وسأنتقل إلى "فحص العنصر". والآن بالنسبة للبعض، قد يبدو هذا الجزء في الجانب أو في الأسفل. يمكنك تحريكه بالضغط على هذا الزر هنا. ولكن كما يمكنك أن ترى، سأقوم بتسليط الضوء على h1 الخاص بي
وأذهب إلى عنصر الامتداد "SPAN ELEMENT" هنا بالأسفل. وقد تندهش، ها هو اللون الذي أستخدمه. سأمضي قدمًا وانقر فوق هذا، كما ترون يمكنني في الواقع في الوقت الفعلي،
التعامل مع الألوان المختلفة التي أريدها. أنا أحب نوع اللون هذا أفضل من اللون الأزرق ويمكنك أن ترى أنه يغير القيمة السداسية العشرية لي هناك. إذا أردت ذلك يمكنني العثور على اللون المثالي
، فهذا اللون الأخضر ليس اللون المثالي يمكنني العثور على اللون المثالي،
والحصول على القيمة السداسية العشرية ووضعها في ورقة التصميم الخاصة بي. كما أنها توفر لك خيار قيمة RGBA أيضًا حتى تتمكن من القيام بذلك بالطريقة التي تريدها. أحب استخدام عنصر الاستثناء في التعامل مع الألوان لأن الأمر أسهل بكثير عندما يمكنك رؤية ما يحدث أثناء تصميمك له. إذا كنت تريد التحقق من شيء آخر،
يمكنني حتى النزول هنا، وكل شيء تقوم بإبرازه هنا يمكنك إضافة ألوان له،
والقيام بأشياء مختلفة على نفس الخط. لذلك لا أقترح هذا، لكنني سأضيف لون الخلفية. وكما ترى، فإن لديهم أسماء فعلية. لأنه ليس من المحتمل أنه إذا قمت بالمرور
خلال هذه العناصر المختلفة فرق القيم السداسية العشرية،
وهل لديك أى فكرة عما نتحدث. وبدلاً استخدام كلمة "Beige" بالفعل،
يمكنني الضغط مرة أخرى على هذا المربع. ستظهر لك القيمة السداسية العشرية. هذا هو المكان الذي يمكن أن يكون فيه الأمر
ممتغًا حقًا وسئًا للغاية، حيث أنه يمكنك السقوط في شرك المشكلات. فأنت تنبهر وتقول كم أحب هذا اللون. لا فهذا اللون أفضل. أنت تبدأ، أنت تبدأ، فقط اختر لونًا وتعامل به واستمر في العمل به. لكن دعنا نعود. أحد الأشياء التي تحدث عندما يستخدم الأشخاص الألوان هو أن هناك ميولاً طبيعيًا حقًا
للرغبة في استخدام الألوان للتأكيد على شيء ما أو شرح مدى أهمية شيء ما. ربما تكون قد رأيت هذا عندما ملأت النماذج التي تقول تأكد من ملء كل شيء باللون الأحمر حسنًا، قد تكون هذه مشكلة حقيقية
عندما يتعلق الأمر بتعزيز إمكانية الوصول لصفحتك. وأريدك أن تتأكد من أنك تحاول التفكير في أنسب طريقة لاستخدام اللون الخاص بك عند تصميم صفحتك. وأحد الأشياء التي تحتاج إلى التفكير فيها هو أنه لا يكفي التفكير، انه يمكن لأي شخص استخدام قارئ الشاشة. سأستخدم علامات HTML للتأكد حقًا من أنها تستطيع التقاط الدلالات من الصفحة. لا ، هناك الكثير من الأشخاص الذين يراجعون موقعك
ليسوا مكفوفين من الناحية القانونية. ومع ذلك، يعانون من إعاقة بصرية أو مجرد عمى ألوان. هناك العديد من الأشخاص المصابون بعمى الألوان أكثر مما كنت رأيت. لذا فأنت تريد التأكد من أنه عند استخدام صفحتك فأنت تفكر فيما إذا كانت الألوان تنقل المعنى أو الأسلوب فقط لذا فكر في تباين الألوان الخاص بك وهل تباين الألوان عندما تنظر إلى صفحة ما، هل لون النص جيد ويتناسب مع الخلفية؟ يعرف معظمنا بشكل حدسي عندما يكون هناك تباين ضعيف في اللون. نحن نمعن النظر في ذلك. ولكن للأمانة، وقليل جدًا يعرف المستوى الدقيق حقًا الذي عليه الذهاب إليه. لذا ما يمكنك فعله هو استخدام أدوات مختلفة لمساعدتك في تحديد التباين بين النص ولون خلفيته> لقد وضعت رابطين هنا wave.waveaim.org ومدقق تباين Wave وسأريكم مثالًا سريعًا عن كيفية استخدامهما لفحص الصفحة لذا أذهب إلى هنا، wave.webbing.org ويمكنك المضي قدمًا ويمكنك كتابة أي عنوان URL تريده هنا. سأقوم بوضع صفحة الويب الخاصة بي من UMISH(جامعة ميشيغان) والتي قد تتغير بحلول الوقت الذي تشاهدها فيه وكما ترى، يمكنك الانتقال إلى هنا وسيتم فخص تصميماتك، سيتحقق من HTML المختلف الخاص بك. ولكن إذا قمت بفحص مكان الفأرة الخاص بي ،
يمكنك أيضًا التحقق من التباين. وسوف يدخل وسيقول، هذا يبدو جيدًا. لم يتم الكشف عن مشاكل تباين الألوان. ستندهش من كمية ما ستحصل عليه من أمثلة. قد يكون هذا أمر صعب المنال للغاية وإذا كان حقًا شيئًا تشعر به بشدة ويمكنك رؤيته ببساطة، تمسك به. لكنك تريد أن تأخذ اقتراحاتهم بحذر شديد. فالشيء الوحيد الذي أردت التحدث عنه معك مرة أخرى هو فكرة عن عدم استخدام اللون وحده لتوصيل المعنى هذا نوع نموذجي من الرسم البياني الشريطي للأشخاص لاستخدام الألوان ليقولوا هذا هو مقدار مشاركة Apple iPhone ،
و Pre Palm وأشياء أخرى مختلفة على هذا النهج. لنلق نظرة على نفس الرسم البياني ولكن بتدرج الرمادي. وفجأة تكتشف أنه غير مجدي إلى حد كبير لأي شخص يحاول حقًا التقاط هذه الأجزاء في الوسط حيث تكون الألوان متشابهة للغاية. ومع ذلك، إذا كنت ستستخدم رسمًا بيانيًا مثل هذا فأنا لا أقول أنه لا يمكنك ذلك، ولكن أقول تأكد من توفير البدائل. تأكد من حصولك على نص بديل أو أن لديك ِشرحًا توضيحيًا أو في مكان آخر حيث يمكن للأشخاص الولوج إليه
للحصول على هذه المعلومات. حسنًا أعلم أنني لم أتحدث كثيرًا عن اختلاف الألوان التي يمكنك استخدامها، أو الألوان المختلفة التي تتوافق معًا، مرة أخرى لأن هذا ليس شيئًا أحتاج إلى إلقاء محاضرة عنه. إنه شيء يمكنك أن تبحث عنه بنفسك وتتعلمه. ما أردت أن تفهمه هو كيف تتناسق تلك الألوان المختلفة. كيف تعرف أنه يمكنك استخدام سداسي عشري أو RGB أو RGBA أو حتى الكلمات نفسها، لكنك تريد نوعًا ما الابتعاد عن ذلك. أخيرًا عندما تنتهي عندما تتعامل مع ألوانك، لا تلتصق بها كثيرًا. لأنك ستندهش من عدد المرات عندما تتحقق من موقعك باستخدام مدقق التباين،
أن ما كنت تعتقد أنه يبدو رائعًا حقًا فهذا ليس شيئًا في متناول الجميع. لذا استمتع بالألوان. استخدم فحص العنصر. يحب الجميع التعامل مع هذه العناصر التصميمية المختلفة لصفحتك. وآمل أن تكون قد تعلمت شيئًا مفيدًا هنا بينما تستمر في البرمجة وتستمر في تصميم موقعك