التعامل مع الألوان والظلال والخلفيات

سبق وأن تناولنا في مقال سابق الحديث عن الألوان كجزء من تصميم صفحات الإنترنت واليوم سوف نتناول استكمال لهذه المقالة وذلك في محاضرة خاصة عن الألوان تم تقديمها في دورة تصميم الويب على موقع رواق والتي سبق وأن أشرنا إليها عدة مرات.

ألوان الشاشة:

ألوان الشاشة تتكون من ثلاث ألوان رئيسية هي الأحمر ويشار له بـ (R) واللون الأخضر ويشار له بـ (G) واللون الأزرق ويشار له بـ (B) وعند خلط هذه الألوان مع بعضها البعض بأي نسبة كانت فإنها ستعطينا ما يعرف بالألوان الفرعية، ولتحديد لون خلفية باستخدام قيمة كل لون مع ملاحظة أن أدنى قيمة هي الصفر وأعلى قيمة هي 255:

Background-color: rgb(20,20,30);

كما يمكن أن نحدد عن طريق HEX code حيث أن لكل لون مهما كانت قيمه وشكله كود خاص به:

Background-color: # 14141E

وللتعرف على مزيد من الألوان وأكوادها يمكنك الاطلاع على موقع http://html-color-codes.info/

تدريج الخلفيات:

الخلفية المتدرجة هي خلفية تحتوي على أكثر من لون حيث تبداء بلون وتنتهي بآخر وفي المعتاد عندما نستخدم هذا التوصيف فإنه يقصد جعل الخلفية متدرجة من أعلى إلى أسفل؛ فمثلاً لو أردنا أن نجعل اللون في أعلى أحمر وفي أسفل أخضر يكون الوصف هكذا:

Background: linear-gradient (red,green);

أما إذا أردنا أن نحدد اتجاه التدريج كما نريد فإننا نضيف هذا الاتجاه داخل الكود هكذا:

Background: linear-gradient (to top, red, green);

كما يمكن أن نحدد زاوية الميل إذا أردنا ذلك هكذا:

Background: linear-gradient (120deg, red,green);

من المهم أن نفهم أن الخلفيات المتدرجة لا تقف أعداد ألوانها عند لونين بل من الممكن أن تزيد أكثر من ذلك، كما أننا من الممكن أن نجعل التدريج يأخذ الشكل الدائري وليس الخطي وذلك باستبدال كلمة linear بكلمة radial.

إضافة صورة في الخلفية:

لإضافة صورة في الخلفية بدلاً من اللون:

Background-image: url(“نضع هنا اسم الصورة وامتدادها”);

لمنع تكرار الصورة، نكتب أصفل التوصيف السابق التوصيف التالي:

Background-repeat: no-repeat;

لعمل تكرار للصورة من أعلى إلى أسفل نستبدل كلمة no-repeat بكلمة repeat-y ولو أردنا التكرار من اليسار إلى اليمين نستبدلها بكلمة repeat-x، أما إذا كان لدينا صورة ونريد أن نحدد مكانها نستخدم التوصيف التالي:

Background: 30px, 30px;

حيث أن الرقم الأول هو رقم مكان الصورة على محور الـ Y أما الرقم الثاني فهو على محور الـ X.

عمل إنحناءات في زوايا الإطار الخارجي:

لكل مقطع أربعة زوايا نستطيع أن نحدد هذه الزوايا كلها ونجعلها غير حادة وتأخذ إنحناءة دائرية وذلك بالتوصيف التالي:

Border-radius: 30px;

لحظ أننا كتبنا هنا رقم واحد أما إذا كتبنا رقمين فإن الرقم الأول سيؤثر على الزاوية العليا من جهة اليسار والمقابلة لها أسفل يمين، أما الرقم الثاني فسوف يؤثر على أعلى اليمين وأسفل اليسار هكذا:

Border-radius: 100px, 30px;

أما إذا أضفنا رقم ثالث فسيؤثر على الزاوية التي في أسفل يمين الإطار، ولو أضفنا رقم رابع فسيؤثر على الزاوية المتبقية.

تصميم الظل:

نستخدم التوصيف التالي لتصميم ظل خاص بمقطع محدد أو صورة محددة:

Box-shadow: black 10px 30px 10px;

سنلاحظ في هذا التوصيف وجود لون وثلاثة أرقام ولاحظ أن الفاصل المستخدم هنا هيا المسافة؛ سبق وأن قلنا أن اللون يمكن كتابه بأكثر من وصف، أما الرقم الأول يشير إلى بعد الظل من جهة اليمين والرقم الثاني يشير إلى بعده من جهة أسفل، أما الرقم الثالث فيشير إلى ضبابية الظل فكلما زاد كلما كان خفيفًا وكان منتشرًا.

إخراج الشكل العام لصفحة الإنترنت

هذه المحاضرة هي تكملة للمحاضرة التي تكلمنا فيها عن وصف محتوى الصفحة بدون محتوى أو ما يعرف بـ (Semantic web)

حيث أننا سنتناول ستة أمور هامة ستساعدنا في إخراج الصفحة وتقسيمها بالشكل المناسب.

ما هو Display وكيفية استعمالها؟

هذه الخاصية تعالج نقطة هامة في ترتيب مكونات الصفحة وهل هي متجاورة على نفس الخط، أم متتالية كل مكون في سطر مختلف عن الثاني، وهناك ثلاث خصائص تأخذها الـ Display وهي (Block;)، (inline;)، (inline-block;).

ما هو Margin وكيفية استعمالها؟

تستخدم الـ Margin  للفصل بين وسام وآخر وذلك عن طريق هوامش خارجية لهذا الوسام، ويكون لها أربعة قيم إما من أسفل أو من أعلى أو من يمين أو من يسار فلو افترضنا أننا لدينا صورة ونريد أن نحدد هوامشها من أربعة جهات:

ımg}

Margin: 20px;

{

أي أن الصورة لها هوامش من جميع الجهات بمقدار 20 بيكسل.

ımg}

Margin-right: 20 px;

Margin-left: 10px

{

ستلاحظ هنا أن البعد من جهة اليمين أصبح 20 بيكسل ومن جهة اليسار أصبح 10 بيكسل.

ما هو ال padding ؟

هو الحدود الداخلية للنصوص بالنسبة للحدود الخارجية.ويجب أن نلاحظ أن كتابته مماثلة لكتابة الـ (margin).

ما هو ال flot ؟

يفيد الـ flot  في وضع مجموعة من العناصر في جهة محددة على اليمين أو على اليسار وهي بذلك لها قيمتين إما right أو left.

ما هو الـ vertical-align؟

هي تفيدنا في عمل محازاة لمجموعة من مكونات الصفحة على خط أفقي ومن أشهر القيم التي تأخذها إما محازاة من أعلى (Top) أو محازاة من أسفل (bottom) أو محازاة من الوسط (middle).

 

كيف تصنع لعبة حاسب آلي ممتازة باستخدام المحرك يونتي (Unity 3D):

ماذا نحتاج لنصنع لعبة؟

أولاً: الفكرة:

ليس شرطًا من أين تأتي بالفكرة؛ من الممكن أن تكون الفكرة من وحي الخيال أو من وحي كتاب أو قصة، المهم أن تكون هناك فكرة من الممكن أن تحولها إلى لعبة، كما يجب أن تراعي مواصفات الفكرة وتدرسها جيدًا وأن تراعي بذل المجهود من أجل تقديم فكرة جيدة ورائعة.

ثانيًا: الرسوم:

سواء كانت اللعبة ثنائية الأبعاد أو ثلاثية الأبعادفأنت في حاجة إلى تحويل الفكرة إلى رسومات تمكنك من توضيح معالم هذه الفكرة وسير العمل في تنفيذها مثل الشخصيات والخلفيات والأدوات التي سيتم استخدامها في اللعبة وهذه الخطوة تعرف كذلك بخطوة الـ (Story board).

ثالثًا: تصميمات ثلاثية الأبعاد:

هذه التصميمات تشمل النماذج المستخدمة في هذه اللعبة، مثل الشخصيات أو الأدوات أو المشاهد التي ستشهد مراحل هذه اللعبة.

رابعًا: ملفات الحركة:

وهي التي تقوم بتحويل النماذج الثلاثية الأبعاد من نماذج جامدة إلى نماذج متحركة تتفاعل مع اللاعب ويكون لها سلوك برمجي.

خامسًا: ملفات الصوت:

اللعبة التي بدون صوت تفقد من 50 إلى 60 % من جاذبيتها، رغم أن الجرافيك هو أول ما يلفت الانتباه في اللعبة إلا أن الصوت هو ما يدفع اللاعب إلى الانغماس في اللعبة.

سادسًا: لغة البرمجة:

من الأمور المطلوبة حتى يتمكن اللاعب من التواصل مع النماذج والمكونات الداخلة في اللعبة ويتحكم فيها، وتنفيذ الأوامر التي يعطيها اللاعب إلى أدوات اللعبة.

سابعًا: محرك الألعاب (Game Engine):

وهذا المحرك من الأمور الهامة بل إنه سيأخذ جزء كبير من هذه الدراسة، ومحرك الألعاب عبارة عن مجموعة من أوامر مصنوعة من لغات البرمجة.

هناك مهارات مفيدة وإن كانت غير لازمة:

1-      حب الألعاب.

2-      كيفية صنع رسومات ثنائية الأبعاد.

3-      استخدام برامج الرسوم ثلاثية الأبعاد والتحريك.

4-      اساسيات البرمجة ولغة البرمجة.

5-      كيفية التعامل مع محركات الألعاب.

الوقت:

عامل الوقت عامل مهم ربما تأخذ من وقتك ما يصل إلى3 شهور أو 6 شهور حتى تقدم لعبة متوسطة وليس لعبة قوية ورائعة.

لماذا يونتي؟

1-      محرك ألعاب مجاني، بالتالي لن يكلفنا مال وفي نفس الوقت قوي.

2-      سهل التعلم نسبيًا.

3-      المساعدة متوفرة، وكذلك هناك الكثير من المواد التعليمية.

4-      هناك الكثير من الأدوات والنماذج المجانية.

إلى أن نلتقي للمزيد من المقالات أرجوا العودة إلى روابط الاستوديو المختلفة على  الفيس بوك على  جوجل بلاس على  تويتر على  بيهانسا

لغة css الجزء الثالث

مازلنا نقدم لكم المحاضرات التي تقدم في دورة تصميم وبرمجة المواقع التي تقدم على منصة رواق والتي يقدمها ايمن احمد القضاة المحاضر في عمادة التعليم الإلكتروني والتعلم عن بعد - جامعة الدمام، ولمناقشة هذه الموضوعات على #برمجة_المواقع_مادة_رواق على تويتر.

في هذه المحاضرة سوف نتعلم معًا طرق كتابة ال CSS Selector (relationship html tags) ولقد تعلمنا سابقًا إحدى طرق الكتابة وهي:

 section p {.....}

في هذه المرة سنتاول الطرق التالية:

section> p {.....}

section+ p {.....}

section~ p {.....}

section: p {.....}

نستطيع أن نقسم الأوسمة إلى نوعين أوسمة عامة تفيدنا في تقسيم الصفحة وأوسمة خاصة تدخل في تكوين محتويات كل جزء من أجزاء الصفحة وللتعرف أكثر على هذه المعلومة أرجوا الرجوع إلى درس ما هو الـ semantic web.

فلنتخيل معًا أننا نتعامل معا وسام عام مثل الـ section أو الـ header أو Aside .....

<section> <p> <p> </p> <p> </p> </p> <p> <p> </p> <p> </p> </p> </section>

سنلاحظ في هذا المثال أن هناك وسام عام اسمه section بداخله مقاطع نصية وبداخل كل مقطع نصي مقاطع أخرى تم تلوينها باللون الأحمر المقصود هنا أن أوسمة المقاطع النصية الرئيسية والملونة باللون الأسود هي ابناء مباشرين للمقطع العام section أما الأوسمة الملونة باللون الأحمر فهي ابناء غير مباشرين للوسام العام section.  ولهذا فإن استخدام علامة > تعني أنك تحدد للمتصفح أن يقوم بتطبيق قواعد ال CSS على الأوسمة المباشرة للقطاع Section وليس الأوسمة الفرعية الملونة باللون الأحمر. أما لتحديد أول نص يأتي مباشرة بعد الـ Section  دون غيره فعلينا استخدام علامة + أما لتحديد كل النصوص الداخلة في الـSection  حتى وإن كان بينها فواصل فنستخدم علامة ~ أما لتحديد نص محدد حسب موقع فإننا نستخدم النقتطين : هكذا section p: first-of-type} section p: last-of-type}

نفترض لو أن لدي قائمة سواء كانت مرقمة أو غير مرقمة تحتوي على خمسة نقاط مثل القائمة التالية:

<ol>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ol>

هناك عدد من القواعد من الممكن أن تفيدنا في تنسيق هذه القائمة وهي:

لتحديد أحد ابناء هذه القائمة دون الآخرين حسب موقعه في البداية أو النهاية	ol li: first-child {....} ol li: last-child {....}
لو أننا نريد أن نحدد الأرقام الفردي	ol li: nth-child (2n-1)
لتحديد الأعداد الزوجية	ol li: nth-child (2n)
لتحديد أحد ابناء القائمة حسب الرقم	ol li: nth-child (3)
لتعميم مجموعة من الأوامر على القائمة مع استثناء أحد أفرادها	: not () حيث نضع ما نريد استثناءه بين قوسين

التعامل مع وسام (Anchor element):

هناك أربع حالات لشكل الرابط في الصفحة

الشكل المعتاد للرابط	a: link {....}
رابط تمت زيارته	a: visited {....}
عند مرور سهم الفارة على الرابط	a: hover {....}
حالة الرابط لحظ الضغط عليه	a: active {....}

ما هو الـ div؟

الـ div  وسيلة لاختيار مجموعة من الأوسمة المتتالية حتى نعطيها قيم واحدة بواسطة لغة CSS كما في المثال التالي:

لاحظ أننا اخترنا ثلاث عناصر ووضعناها داخل الـ div. div } CSS rules {

<div> <p>…..</p> <a href=”#”>click</a> <p>….</p> </div>

ما هو الـ span؟

يفيدنا الـ span في تنسيق الأوسمة بشكل جيد، مثل أن نكتب جملة "برمجة مواقع الإنترنت" مع مراعاة أن كلمة الانترنت مكتوبة باللون الأحمر دون بقية الجملة.

span } color: red; {

<p> برمجة مواقع  <span>الإنترنت</span> </p>

إلى أن نلتقي للمزيد من المقالات أرجوا العودة إلى روابط الاستوديو المختلفة على الفيس بوك على جوجل بلاس على تويتر على بيهانسا