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

هذه المحاضرة هي تكملة للمحاضرة التي تكلمنا فيها عن وصف محتوى الصفحة بدون محتوى أو ما يعرف بـ (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>

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