البحث في الموقع

تعرّفنا في الجزء الأول من هذا الدرس على ما يقدّمه نظام التخطيط الشبكي Grid layout في CSS وقدّمنا ماهيّة الشبكة Grid ومساراتها Tracks. نكمل في هذا الجزء المفاهيم الأساسيّة لنظام التخطيط الشبكي. خطوط الشبكة Grid Lines تجدر الإشارة إلى أنه عندما نعرّف شبكة فإن ما نحدّده هو مسارات هذه الشبكة، وليس الخطوط. تعطينا الشبكة بعد تعريفها خطوطًا مرقمة لاستخدامها عند تحديد مواقع العناصر. على سبيل المثال في الشبكة أدناه، المكوَّنة من ثلاثة أعمدة وصفيْن تكون لدينا أربعة خطوط أعمدة Column lines. تُرَقَّم خطوط الأعمدة وفقًا لوضع الكتابة في المستند. في اللغات التي تتّجه كتابتها من اليسار إلى اليمين Left to right (الإنكليزية مثلا)، يكون السطر الأول على الجانب الأيسر من الشبكة. في اللغات ذات اتجاه الكتابة من اليمين إلى اليسار Right to left (العربية مثلا)، يصبح السطر 1 على الجانب الأيمن من الشبكة. يمكن أيضًا تسمية الخطوط، سوف ننظر في كيفية فعل بذلك في درس لاحق من هذه السلسلة. وضع العناصر وفق الخطوط سنكتشف وضع العناصر على أساس الخطوط Line-based placement بتفصيل كامل في درس لاحق. يوضح المثال التالي كيفية القيام بذلك بطريقة بسيطة. عند وضع عنصر نستهدف السطر، بدلا من المسار. في المثال التالي وضعنا العنصرين الأوليْن على ثلاثة مسارات أعمدة Column track، وذلك باستخدام الخصائص grid-row-start ،grid-row-end grid-column-start وgrid-column-end. بالعمل من اليسار إلى اليمين، يوضَع العنصر الأول (box1) على خط العمود 1، ويمتد إلى خط العمود 4 الذي يوجد في حالتنا أقصى يمين الشبكة. يبدأ هذا العنصُر في خط الصف 1 (في الأعلى) وينتهي في خط الصف 3؛ وبالتالي يمتد على اثنين من مسارات الصفوف Row tracks. يبدأ العنصر الثاني (box2) على خط عمود الشبكة 1، ويمتد على مسار واحد. هذا هو الوضع المبدئي، لذا لسنا بحاجة إلى تحديد خط النهاية. كما أنه يمتد على اثنين من مسارات الصفوف ابتداءً من خط الصف 3 إلى خط الصف 5. والعناصر الأخرى تضع نفسها في المساحات الفارغة على الشبكة. <div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } لا تنس أنه يمكنك استخدام Grid Inspector في أدوات مطوري فايرفوكس لترى كيف توضع العناصر على خطوط الشبكة. خلايا الشبكة Grid Cells خلية الشبكة هي أصغر وحدة على الشبكة، من الناحية النظرية تشبه خليةَ جدول: هي المسافة بين صفّين متجاورين وعمودين متجاورين من خطوط الشبكة. كما رأينا في الأمثلة السابقة، عند تعريف الشبكة على عنصُر فإن العناصر المتفرّعة من هذا العنصُر ستتموضع في الشبكة بواقع عنصر لكل خليّة. تظهر في الصورة أدناه شبكة الخلايا مع تحديد الخليّة الأولى في الشبكة مناطق الشبكة Grid areas يمكن أن تمتد العناصر على خلية واحدة أو أكثر، إما أن تمتد عن طريق الصف أو عن طريق العمود، وهذا ينشئ منطقة شبكة. يجب أن تكون مناطق الشبكة مستطيلة، ليس من الممكن إنشاء منطقة على شكل حرف L على سبيل المثال. في الصورة تمتد منطقة الشبكة المميزة باللون الأخضر على مساريْ صفوف ومساريْ أعمدة. المزاريب Gutters يمكن إنشاء المزاريب أو الأزقة بين خلايا الشبكة باستخدام الخاصيّتين grid-column-gap وgrid-row-gap، أو بالخاصيّة المختصرة grid-gap. في المثال التالي أنشأنا فجوة gap بقياس 10 بكسل بين الأعمدة و 1em بين الصفوف. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 1em; } <div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> تُحسَب المساحة التي تأخذها الفجوات قبل إسناد المساحة إلى المسارات ذات القياس المرن (الوحدة fr). تعمل الفجوات لأغراض التحجيم مثل مسارات الشبكة العادية ، ولكن لا يمكنك وضع أي شيء في الفجوات. بالنسبة للتموضع وفقا لخطوط الشبكة فإن التعامل مع الفجوات يكون على أساس أنها خطّ ثخين. الشبكات المتداخلة Nesting grids يمكن لعنصر في شبكة أن يصبح حاوية لشبكة أخرى. لدينا في المثال التالي شبكة أنشأناه سابقا، وتتكوّن من ثلاثة أعمدة وصفَّين، مع عصرَين مُتموضعَيْن (box1 وbox2)؛ إلا أن العنصر الأول في المثال أدناه يحتوي على عناصر فرعية. وبما أن هذه العناصر ليست متفرّعة مباشرةً عن العنصر الذي عرّفنا عليه الشبكة فإنها لا تشارك في تخطيط الشبكة. <div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> <div class="nested">c</div> </div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div> إذا طبّقنا الخاصيّة display: grid على الصّنف box1 فإنه سيكون بإمكاننا تعريف مسارات على عنصر الصنف ويصبح هو الآخر شبكة، تتموضع داخلها العناصر. .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: repeat(3, 1fr); } في هذه الحالة الشبكة المتداخلة ليس لها علاقة بالشبكة الأم parent. كما ترون في المثال أن grid-gap لم ترث من الشبكة الأم وخطوط في الشبكة المتداخلة لم يتم محاذاتها مع الخطوط في الشبكة الأم. وضع العناصر في طبقات باستخدام z-index يمكن أن تشغل عناصر الشبكة نفس الخلية. إذا عدنا إلى مثالنا مع العناصر التي وضعت باستخدام رقم السطر، يمكننا تغيير هذا لجعل اثنين من العناصر تتراكب كما في المثال التالي: <div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> <div class="box box4">Four</div> <div class="box box5">Five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; } العنصر box2 الآن متداخل مع العنصر box1. يظهر العنصر box2 فوق العنصر box1 لأنbox2 يأتي بعد box1في ترتيب العناصر. التحكم في الترتيب يمكننا التحكم في ترتيب العناصر التي تتراكب باستخدام خاصية z-index تمامًا كما هو الحال مع تموضع العناصر. إذا أعطينا قيمة أقل للخاصيّة z-index في box2 من box1 فسيُعرَض تحت box1. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; z-index: 2; } .box2 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; z-index: 1; } كان هذا الدرس والدرس الذي قبله نظرة سريعة جدا على المفاهيم الأساسيّة لنظام التخطيط الشبكي Grid Layout. تمعّن في أمثلة التعليمات البرمجية وجرّب التغيير في القيم والخصائص لكي تتبلور في ذهنك المفاهيم الأساسية في التعامل مع نظام التخطيط الشبكي في CSS. ترجمة - بتصرّف - للمقال Basic concepts of grid layout الذي اشترك في كتابته مساهمو موزيللا Mozilla contributors.

لم يعد إنشاء تصاميم متجاوبة اختياريًّا، فلقد أصبحت شبكات CSS وعلى نحو سريع الخيّار المفضّل لإنشاء بنى منسجمة لمواقع ويب تبدو بمظهر رائع على مختلف أنواع الأجهزة. تزوّدنا شبكات CSS بطريقة سريعة لبناء أيّ موقع. فلا بدّ أن تكون قد عانيت مع خصائص التموضع والتعويم float في CSS من قبل. كل هذه المعاناة ستنتهي مع شبكات CSS. تجعل شبكات CSS3 من عمليّة إنشاء وتعديل موقع، شيئًا يسيرًا للغاية. سنتعلّم كيف تعمل هذه الشبكات ولماذا ينبغي علينا استخدامها، وكيف ننشئ شبكاتنا الخاصّة بنا لبناء layouts مُخصّصة. ما هو نظام شبكة CSS؟ قبل أن نبدأ بإنشاء بنية خاصّة بنا، هناك بعض الأمور التي نحتاج أن نعرفها مسبقًا. لإنشاء مخطّط لموقع ويب جديد نبدأ أولّا بشبكة. ستحتوي هذه الشبكة الأساسيّة على أسطر rows وأعمدة columns وخلايا cells ومسارات tracks وخطوط lines ومناطق areas. هناك أيضًا عناصر الشبكة وهي بشكل أساسي عبارة عن المحتوى الذي نضعه ضمن الشبكة. تشبه الشبكة الجدول من ناحية الإظهار. ولكن يكمن الفرق الكبير بينهما في وجود خصائص مُحدّدة وقويّة متاحة ضمن شبكة CSS، سنتحدّث عنها بعد قليل. تحمل الأسطر والأعمدة والخلايا نفس المعنى في كلّ من شبكات CSS وجداول HTML العاديّة. أمّا المسار track فهو عبارة عن سطر كامل أو عمود كامل. المسار track في الشبكة، عبارة عن سطر كامل أو عمود كامل. وبالنسبة للمنطقة فهي مكوّنة من خلايا تشكّل حاويةً مستطيلة الشكل للمحتوى، في حين أنّ خطوط الشبكة grid lines هي الفواصل بين الخلايا في البنية الشبكيّة، وهي تشبه على أية حال حدود الخلايا في جداول HTML العاديّة. تشكّل المناطق مقاطع بنيويّة ذات طبيعة متنوّعة، مثل المناطق الخاصة بالعنوان header والشريط الجانبي sidebar والمحتوى الأساسي والتذييل footer. تشكّل المنطقة area مقاطع بنيويّة متنوّعة في الشبكة. بتعريف هذه المناطق باستخدام شيفرة CSS الجديدة المتاحة، يمكننا إنشاء وتنسيق البنية الشبكيّة المطلوبة، بنفس السرعة التي تحتاجها لإنشاء بنية جدوليّة قديمة، ولكن بمزايا قابلية التعديل والتغيير بسهولة أكبر بكثير. المشكلة الوحيدة في شيفرة CSS الجديدة هي أنّها حتى هذه اللحظة ليست متوافقة بشكل كامل مع جميع المتصفّحات، ولكن تبقى مسألة وقت قبل أن تصبح قياسيّة في المدى القريب، بحيث تعمل على جميع المتصفّحات الأساسيّة المعاصرة. يمكنك تجربة مزايا الشبكة الجديدة مع جميع المتصفّحات من خلال إضافة يمكن الحصول عليها من هنا. يمكننا في متصفّح Chrome تفعيل منصّة الويب التجريبيّة experimental web platform بكتابة العنوان التالي في شريط عنوان المتصفّح: Chrome://flags انتقل إلى الأسفل حتى تصل إلى قسم تفعيل مزايا منصّة ويب التجريبيّة Enable Experimental Web Platform features ثم انقر Enable تحت العنوان. يمكننا اختبار شبكات CSS3 في متصفّح Chrome بإجراءات بسيطة. انقر بعد ذلك زر إعادة التشغيل الآن Relaunch Now وهذا كلّ شيء. أصبحنا الآن مستعدّين لتجربة شبكات CSS في Chrome ضمن أنظمة تشغيل Windows و Mac و Linux وحتى أجهزة Android. إعداد الشبكات باستخدام HTML5 الآن وبعد تفعيل الأدوات التجريبيّة، يمكننا البدء بإنشاء البنية الشبكيّة. نحتاج إلى صفحة لاختبار تأثيرات شيفرة CSS، انشأ ملف index.html. نحن مستعدّون الآن لإضافة شيفرة HTML5 أساسيّة لعرض أي شبكة ننشئها بعد قليل. سننشئ منطقة خاصّة بالعنوان header وأخرى خاصّة بالتذييل footer بالإضافة إلى منطقة خاصّة بالمحتوى content ومنطقة للشريط الجانبيّ sidebar على الجانب الأيمن من الصفحة. لنضيف الشيفرة التاليّة إلى الصفحة: <div id="grid"> <div class="header"></div> <div class="sidebar"></div> <div class="content"></div> <div class="footer"></div> </div> يمكننا وبشكل اختياري أن نضيف محتوى إلى كلّ قسم من الأقسام السابقة إذا أردنا أن نرى أين ستظهر الشبكة بعد الانتهاء. تنسيق الشبكة بشيفرة CSS قبل أن نبدأ بتنسيق الشبكة يجب أن نعلم أنّ هناك بعض تنسيقات CSS لا تعمل مع الشبكات: الخصائص column-* أي جميع الخصائص التي تبدأ بـ column- مثل column-span و column-width و column-rule. الخاصيّة float، وهذه الخاصيّة يمكن استخدمها إذا طبّقتها قبل تطبيق الخاصيّة display التي تُعيّن طريقة العرض إلى شبكة كما سنرى بعد قليل. لن يكون بالإمكان تعويم float المحتوى داخل الشبكة. الخاصيّة clear، حيث أنّه بمجرّد العمل مع بنى الشبكات فلا داعي لاستخدام هذه الخاصيّة لأنّ الشبكة تتجاهلها. الخاصيّة vertical-align، لا تمتلك هذه الخاصيّة أي تأثير على بنية الشبكة. العنصرين الزائفين first-line:: و first-letter:: لا يمكن تطبيقهما ضمن الشبكة. بالنسبة لأي خاصيّة CSS غير موجودة في القائمة السابقة فيمكن استخدامها مع الشبكات. قم بإنشاء الملف style.css لنعمل على تطبيق بنية الشبكة على التصميم. سنبدأ الآن باستخدام مُحدّد معرّف العنصر كما يلي: #grid { display:grid; } إذا وجدت أنّ تموضع الشبكة ليس مناسبًا، جرّب تغيير الخاصية السابقة لتصبح display:inline-grid حيث يؤدي ذلك إلى إنشاء البنية ضمن المنطقة التي تعمل ضمنها بدلًا من إنشاء حاوية مُخصّصة كما تفعل القيمة block عند استخدامها. نلاحظ أنّ الشبكة قد تمّ إنشائها ولكنّها فارغة. لإنشاء الخلايا يمكننا استخدام grid-template-rows و grid-template-columns بحيث نضعهم أسفل الخاصيّة display التي عرّفناها قبل قليل. القيم التي يمكن تزويدها لهاتين الخاصيّتين هي قيم أحجام الخلايا التي نرغب بإنشائها. فمثلًا إذا عرّفنا قيمة حجم واحدة من أجل سطر ما، فسيؤدّي ذلك إلى إنشاء سطر واحد فقط، في حين يؤدّي تعريف خمس قيم حجم إلى إنشاء خمسة أسطر. ويمكن تطبيق نفس الأسلوب على الأعمدة. فلإنشاء البنية السابقة المقترحة، يمكننا تعريف الأسطر والأعمدة على الشكل التالي: #grid { display:grid; grid-template-rows:100px auto 100px; grid-template-colums:repeat(9, 100px); } أنشأنا في المثال السابق ثلاثة أسطر وتسعة أعمدة. يبلغ ارتفاع السطر الأوّل 100 بيكسل، أمّا السطر الثاني فسيتم ضبطه تلقائيًّا بحيث يلائم المحتوى المُضاف بالنسبة إلى الشبكة، وسيبلغ ارتفاع السطر الثالث 100 بيكسل أيضًا. تسمح لنا الدالّة repeat بإنشاء أي عدد من الأعمدة أو الأسطر طالما أردنا أن يكون لها نفس القياس. في مثالنا هذا سننشئ تسعة أعمدة بعرض 100 بيكسل لكلٍّ منها. يبدو للوهلة الأولى أنّنا أضفنا عددًا عشوائيًّا من الأعمدة، خصوصًا أنّه لدينا خمس مناطق areas في البنية التي خطّطنا لها مسبقًا. تكمن الإجابة على ذلك أنّه بإمكاننا أن نجعل المناطق تمتد span على أكثر من خليّة، ويسمح لنا ذلك بضبط الحجم الافتراضي لكلّ منطقة بشكل فعّال. في مثالنا هذا ومن أجل سطر واحد يمكن أن تمتدّ المنطقة التي تضمّ المحتوى الرئيسي عبر سبعة أعمدة بحيث يبلغ العرض الافتراضي لها 700 بيكسل، كما يمتدّ الشريط الجانبيّ عبر عمودين ليصبح عرضه 200 بيكسل، وهكذا نحصل على عرض إجمالي قدره 900 بيكسل. لاحظ أنّه كان بإمكاننا تعريف عدد أقل من الأعمدة بعرض أكبر لكلّ منها، ولكننا لم نفعل ذلك. يكمن السبب في أنّه عند استخدام عدد أعمدة أكبر بعرض أصغر لكلّ منها، فإنّ ذلك سيؤدّي إلى تحكّم أكبر في عرض المناطق الممتدة على تلك الأعمدة، وخاصةً التي تحتاج إلى عرض قليل نسبيًّا مثل المنطقة التي نضع فيها حقوق التأليف والنشر مثلًا. تُطبّق نفس الفكرة تمامًا من أجل الأسطر، لكن لاحظ بأنّنا قد اخترنا عددًا قليلًا منها ممّا لا يمنحنا نفس المرونة المتوفّرة بالنسبة للأعمدة. على العموم لا بأس في ذلك، فهدفنا هنا هو تحقيق الفكرة والتعلّم حول الإمكانيّات المتوفّرة لتخطيط البنية الشبكيّة. لا تبدو الأمور حتى الآن كما هو مخطّط لها، لكن بمجرّد تعريف وتسمية مناطق الشبكة ستأخذ البنية الشبكيّة الشكل المطلوب. لتسمية المناطق فإنّنا نعيّن اسم المنطقة لكلّ عمود وسطر ستمتدّ عليه هذه المنطقة. يمكننا استخدام الخاصيّة grid-template-areas بحيث نضعها أسفل الخاصّتين المسؤولتين عن تعيين عدد الأسطر والأعمدة الّلتين أضفناهما قبل قليل، أي على النحو التالي: #grid { display:grid; grid-template-rows:100px auto 100px; grid-template-colums:repeat(9, 100px); grid-template-areas: "header header header header header header header header header" "content content content content content content content sidebar sidebar" "footer footer footer footer footer footer footer footer footer"; } نلاحظ من السطر الأوّل أنّ المنطقة header تمتدّ على كامل الأعمدة، وكذلك الأمر بالنسبة للمنطقة footer على السطر الثالث. أمّا السطر الثاني فسيحتوي على منطقة المحتوى الرئيسي main بالإضافة إلى منطقة الشريط الجانبي sidebar. حتى هذه اللحظة لم يتم إنشاء الشبكة بعد. في الحقيقة تُشير الأسماء المعرّفة توًّا: header و content و sidebar و footer إلى أسماء أصناف CSS سنعرّفها بعد قليل. بحيث نستخدم خصائص جديدة مع هذه الأصناف تُشير إلى بداية ونهاية كل منطقة بالنسبة للأسطر: grid-row-start و grid-row-end وبالنسبة للأعمدة: grid-column-start و grid-column-end. يمكن إضافة أصناف CSS هذه مباشرةً بعد شيفرة الشبكة السابقة: .header { grid-row-start:1; grid-row-end:2; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:2; grid-row-end:3; grid-column-start:1; grid-column-end:8; } .sidebar { grid-row-start:2; grid-row-end:3; grid-column-start:8; grid-column-end:10; } .footer { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:7; } تُحتسب المناطق اعتبارًا من خطّ البداية (سطر أو عمود) إلى الخطّ الذي يلي خطّ النهاية الفعليّ حتى ولو لم يكن هذا الخط موجودًا، فإذا لم نأخذ هذا الأمر بعين الاعتبار، فمن الممكن إسناد نفس القيمة للبداية وللنهاية لمنطقة ما وبالتالي لا تظهر هذه المنطقة أبدًا. بهذا نكون قد انتهينا من إعداد الشبكة ويمكن البدء بإضافة التنسيقات المرغوبة. الأمر السلبيّ الوحيد في التصميم السابق أنّه ليس متجاوبًا مع شاشات الأجهزة المحمولة. جعل البنية متجاوبة مع الأجهزة المحمولة وفقًا لهذا التقرير فإنّ أكثر من نصف مجموع الأوقات التي قضاها المستخدمون على الانترنت في النصف الأوّل من عام 2015 كانت على الأجهزة المحمولة. وهذا يزيد بمقدار 11% عمّا كان عليه الوضع في العام السابق ويزيد بمقدار 39% عمّا كان عليه في عام 2008. من الملاحظ أنّ عدد الساعات التي يتمّ قضائها على الأجهزة المحمولة في ازدياد مطّرد، فإن لم نجعل موقعنا متجاوبًا مع هذه الأجهزة فسيفوتنا القطار! قد تبدو هذه العمليّة صعبة للوهلة الأولى، ولكنّ الأمر ليس بهذه الصعوبة. يوجد أسلوب أساسيّ يمكن من خلاله جعل البنية الشبكيّة متجاوبة، حيث يمكن باستخدام القاعدة media@ والخاصيّتان max-width و min-width أن نسمح للمتصفّح بعرض محتوى مناسب إذا استُخدم الجهاز المحمول لعرض الموقع. يمكن باستخدام القاعدة media@ تعريف أنماط تنسيق مُحدّدة للموقع بحيث تُطبّق عند استعراض هذا الموقع ضمن شاشة الجهاز المحمول. تسمح الخاصيّة max-width بشكل عام لأيّ عنصر بالالتزام بقياس مُحدّد عن طريق إسناد العرض الأعظمي للمنطقة التي يُسمح للمحتوى الخاص به أن يشغلها. تخبر هذه الخاصيّة موقعنا بأنّه من الممكن أن ندع محتويات المناطق تكبر أو تصغر طالما أنّها لا تتجاوز القيمة التي حدّدناها ضمن الخاصيّة max-width. أمّا عند استخدام الخاصيّة max-width مع القاعدة media@ فسيكون للخاصيّة max-width دور جديد وهو تحديد شرط لتطبيق أنماط تنسيق مُحدّدة عندما يتم استخدام شاشات صغيرة، كشاشات الأجهزة المحمولة. وينطبق نفس الأسلوب تمامًا على الخاصيّة min-width عند استخدمها مع القاعدة media@. الآن لنضع القاعدة التالية أوّل تنسيقات CSS التي أضفناها إلى ملف التنسيق: @media (max-width:900px) and (min-width:500px) { /* Your grid layout code goes here */ } ستُطبّق التنسيقات الموجودة ضمن القاعدة media@ عندما يُستخدم أيّ جهاز يتراوح عرض شاشته بين 900 بيكسل (العرض الأعظمي max-width) و500 بيكسل (العرض الأصغري min-width). لا ننسى بالطبع تعديل هذه القيم بما يتلاءم مع احتياجاتنا. التغييرات البسيطة في البنية لنضع الآن جميع التنسيقات مع بعضها البعض، ونضيف المزيد منها إلى البنية الجديدة. الشكل النهائي لملف تنسيقات CSS سيبدو مشابهًا لما يلي: @media (max-width:900px) and (min-width:500px) { #grid { display:grid; grid-template-rows:100px auto 100px; grid-template-colums:repeat(9, 100px); } } .header { grid-row-start:1; grid-row-end:2; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:2; grid-row-end:3; grid-column-start:1; grid-column-end:8; } .sidebar { grid-row-start:2; grid-row-end:3; grid-column-start:8; grid-column-end:10; } .footer { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:10; } .content { grid-row-start:3; grid-row-end:4; grid-column-start:1; grid-column-end:7; } وهنا صورة تمثيليّة لما سنحصل عليه ضمن المتصفّح: صورة تمثيليّة للشكل الناتج يتألّف من ترويسة ومنطقة محتوى رئيسيّة وشريط جانبي ومنطقة للتذييل. إذا أردنا في أيّ وقت تعديل البنية الشبكيّة السابقة، فكل ما علينا فعله هو إعادة تعريف المناطق بتغيير مواقع البداية والنهاية لها لنحصل على الشكل المرغوب. وهذا يساعدنا على الانتقال إلى أيّ شكل جديد دون الحاجة لإعادة تصميم الصفحة بشكل كامل. توجد هناك تقنيّات متقدّمة يمكننا استخدمها لإضافة المزيد من المزايا إلى هذه البنية، يمكننا كما هو متوقّع استخدام تنسيقات CSS المألوفة لإكساب بنيتنا الجديدة تنسيقات جميلة وجذّابة. خاتمة نحن مستعدّون الآن لاستخدام آخر التحسينات في عالم CSS، يمكننا الآن فهم وإنشاء عناصر جديدة ومختلفة وتجميعها معًا لتشكيل بنية شبكيّة. أنصح بمراجعة وثائق العمل الحاليّة الخاصّة بالبنية الشبكيّة، وبشكل دوريّ، للاطّلاع على آخر المستجدّات حالما تصدر. ترجمة -وبتصرّف- للمقال Understanding CSS Grids for Modern WordPress Website Design لصاحبته Jenni McKinnon.

كُنّا في درس سابق قد تحدثنا عن كيفية تخطيط صفحات الويب باستعمال CSS2 وكيف أنّ ذلك لم يكن بالأمر السهل، لذلك في هذا الدرس سوف نقوم بنفس التخطيط ولكن باستعمال تقنيات CSS3 الجديدة. تٌقدّم لنا CSS3 مجموعة من التقنيات والتحسينات لتساعدنا على تخطيط صفحات الويب بشكل أفضل وأسهل ودون الحاجة إلى الكثير من الأكواد كما كان الحال في CSS2. كما أنها مُصممة لتدعم السلوكات المتغيرة/الديناميكية وبالتالي يمكننا القول بأنها " لغة قابلة للبرمجة". دعونا إذًا نرى بعض الخصائص والتقنيات الجديدة التي توفرها هذه اللغة ونحاول استخدامها لدعم حالة الاستخدام التي كنّا قد بدأنا بها في الدرس السابق. دالة ()calc الخاصة بلغة CSS3تُستخدم دالة ()calc الجديدة لحساب القيم بشكل ديناميكي (ضع في الحسبان أن دعم هذه الدالة يختلف من متصفح لآخر). وفي داخل هذه الدالة يمكنك كتابة أي معادلة/تعبير (expression) باستخدام المعاملات الحسابية المعروفة (+، -، *، /). سوف يساعدنا استخدام هذه الدالة على التخلص من الكثير من الأكواد التي كان لا بد منها في CSS2، وفي حالتنا هذه فإنها سوف تساعدنا في تمدد العناصر بشكل أفضل (سوف يصبح استخدام تقنية CSS Expansion التي ذكرناها سابقًا أكثر سهولة). أنظر للكود الموجود في الأسفل: #nav, #subnan { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; }لاحظ أننا استخدمنا الدالة ()calc في الخاصية height وهذا سوف يساعدنا بالحصول على نفس النتيجة التي حصلنا عليها باستخدام CSS2 عندما استخدمنا الخاصيتين top: 6em و bottom: 4em، وبهذا يمكن للأمور أن تصبح أكثر مرونة وسوف نحتاج إلى خاصية واحدة (height مع ()calc) بدل اثنتين (top وbottom). استخدام CSS3 Flexbox في تخطيط الصفحاتتُعتبر Flexbox من الخصائص والتقنيات الجديدة التي ظهرت في CSS3 وهي تجعل من تخطيط الصفحات وترتيب عناصرها أمرًا سهلًا ومتشابهًا في مختلف أحجام الشاشات والأجهزة، وبالتالي فهي مفيدة جدًا عند القيام بتصميم مواقع متجاوبة. وهذه بعض الخصائص والميزات التي تتمع بها Flexbox: تمكننا من موضعة العناصر الأبناء (child elements) بشكل أسهل ويصبح تخطيط الصفحات المعقدة أبسط وأسهل ودون الحاجة إلى الكثير من الأكواد فيصبح لدينا كود أنظف وقابل للقراءة بشكل أفضل.يمكن وضع العناصر الأبناء بأي إتجاه نريده وتصبح أبعاد تلك العناصر مرنة أكثر بحيث يمكنها التجاوب مع مساحة العرض.تستطيع العناصر الأبناء أن تتمدد وتتقلص تلقائيًا لتشغل المساحة الفارغة.كما أنّ Flexbox يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها: Flex container: العنصر الذي يحتوي على الخاصية display بالقيمة flex أو inline-flex بحيث يصبح هذا العنصر هو العنصر الحاوي (الأب) للعناصر التي نريد التعامل معها.Flex item: هو أي عنصر موجود في الـFlex container. (ملاحظة: أي نص موجود بشكل مباشر داخل الـFlex container سيتم احتواؤه داخل anonymous flex item).Axes: أي flexbox يجب أن يحتوي على الخاصية flex-direction بحيث تُحدد هذه الخاصية المحور الرئيسي (main axis) الذي سوف تتموضع حوله الـflex items. ويوجد أيضًا المحور العرضي (cross axis) ويكون هذا المحور عموديًا على المحور الرئيسي.Lines: يمكن للـflex items أن تصطف/تتموضع في خط واحد أو خطوط متعددة وذلك ما تحدده الخاصية flex-wrap.Dimensions: يحتوي flexbox على main size و cross size كبديل عن height وwidth بحيث تُحدد هاتين القيمتين حجم المحور الرئيسي (main axis) والعرضي (cross axis) على التوالي.بعد هذه المقدمة القصيرة عن flexbox يمكننا الآن استخدامها في تخطيط الصفحات. <body class="layout-flexbox"> <header id="header"></header> <div class="content-area"> <nav id="nav"></nav> <aside id="subnav"></aside> <main id="main"></main> </div> <footer id="footer"></footer> </body>نريد في حالة الاستخدام التي نعمل عليها أن تكون العناصر الرئيسية (header ،content ،footer) مصفوفة بشكل عمودي، وبالتالي سوف نستخدم القيمة column في الخاصية flex-direction كما يلي: .layout-flexbox { display: flex; flex-direction: column; }ومع أنّ العناصر الرئيسية يجب أن تكون مصفوفة بشكل عمودي إلّا أنّ العناصر في منطقة المحتوى (nav ،subnav ،main) نريدها مصفوفة بشكل أفقي. وبما أنّ كل flex container يمكن أن يحتوي على خاصية flex-direction واحدة فقط فإننا سنقوم بتعريف العديد من flex containers داخل بعضها البعض حتى يمكننا التحكم في تخطيط الصفحة كما نشاء (أي حتى يصبح بإمكاننا أن نجعل العناصر تصطف كما نريد وألّا نصبح مقيدين باتجاه واحد فقط). ولهذا السبب قمنا بإضافة حاوي (container) آخر (<div class="content-area">) ليحتوي على عناصر nav ،#subnav# و main#. وبهذا يمكن للعناصر الرئيسية أن تصطف بشكل عمودي بينما تصطف عناصر منطقة المحتوى بشكل أفقي. نريد الآن أن نقوم بموضعة الـflex items لذلك سوف نستخدم الخاصية flex وهي اختصار(shorthand) للخصائص flex-grow ،flex-shrink وflex-basis. وهذه الخصائص تُحدد كيف تقوم الـflex items بتوزيع المساحة الفارغة المتبقية بينها، وهذا تعريف بسيط بهذه الخصائص: flex-grow: تُحدد كم يمكن للعنصر (flex item) أن ينمو/يتمدد نسبة للعناصر الأخرى في نفس الحاوي.flex-shrink: تُحدد كم يمكن للعنصر (flex item) أن يتقلص نسبة للعناصر الأخرى في نفس الحاوي.flex-basis: يُحدد الحجم الافتراضي للعنصر (أي حجمه قبل أن ينمو أو يتقلص). عندما نقوم بإعطاء الخاصيتين flex-grow وflex-shrink القيمة "صفر" فإننا نقوم بمنع العنصر من أن يتقلص أو ينمو حتى لو كان هناك مساحة فارغة (أي أنّ حجم العنصر يبقى ثابتًا). وهذا ما سوف نقوم به للترويسة (header) والتذييل (footer) لأننا نريد أن يبقى حجمهما ثابتًا: #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; }وإذا أردنا لعنصر أن يستغل أي مساحة ثابتة فإننا نعطي الخاصيتين flex-grow وflex-shrink القيمة "1" ونعطي الخاصية flex-basis القيمة auto. وهذا ما نريده بالنسبة لمنطقة المحتوى (نريدها أن تستغل أي مساحة فارغة). وكما ذكرنا سابقًا فإننا نريد للعناصر الموجودة داخل <div class="content-area"> أن تصطف بشكل أفقي، لذلك سوف نعطيها الخاصية display: flex حتى يصبح هذا العنصر عبارة عن flex container وسوف نعطيها أيضًا الخاصية flex-direction: row حتى نجعل العناصر الموجودة في داخله (nav ،#subnav# و main#) تصطف بشكل أفقي، وبالتالي نحصل على تنسيقات CSS التالية: .content-area { display: flex; flex-direction: row; flex: 1 1 auto; margin: 1em 0; min-height: 0; }في منطقة المحتوى نريد أن يكون حجم كلا العنصرين nav# وsubnav# ثابت وبالتالي سوف نعطيها الخاصية flex بقيم مناسبة: #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; }لاحظ أنني استعملت الخاصية overflow-y: auto وذلك حتى نتعامل مع المحتوى إذا ما تجاوز ارتفاع الحاوي. متصفح Firefox هو من يحتاج لهذه الخاصية. سوف يأخذ العنصر main# المساحة الفارغة المتبقية: #main { flex: 1 1 auto; overflow-y: auto; }كل شيء يبدو جيدًا إلى الآن، لذلك دعونا نقوم بإضافة السلوك المتغير/الديناميكي ونرى ما يحصل. سوف تكون أكواد الجافاسكربت مشابهة لما استخدمناه سابقًا باستثناء أن اسم الـclass للعنصر الحاوي سيكون layout-flexbox بدلًا من layout-classic: $('.layout-flexbox #nav’).on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });سوف نضيف "class expanded" إلى تنسيقات CSS كما يلي: #nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }لاحظ أننا هذه المرة لم نحتج إلى أن ندع العناصر الأخرى تعلم بشأن تغير العرض وذلك لأنّ flexbox تعالج الأمر دون تدخل منا. الشيء الوحيد المتبقي هو إخفاء القائمة الفرعية، ولكن احزر ماذا؟ لن نحتاج لكتابة أي أكواد إضافية لأن flexbox سيعلم بشأن المساحة الفارغة وسوف يتكفل بجعل كل شيء يعمل كما هو مطلوب. يوفر لنا flexbox أيضًا مجموعة من الطرق التي تمكننا من توسيط العناصر في الاتجاهين العمودي والأفقي. يمكننا الآن معرفة أهمية وجود مثل هذه التقنية في لغة CSS وكيف أنّها تساعد على جعل الكود أفضل وله القابلية للتطور والتوسع. ولكن على الناحية الأخرى فإنّ هذه التقنيات تحتاج إلى وقت أكثر لإتقانها مقارنة بخصائص CSS الأخرى. تخطيط الصفحات باستخدام CSS3 Gridإذا كنت تعتقد أن flexbox شيء جديد فأنت حتمًا لم تسمع عن CSS3 Grid، فهي ما زالت في مرحلة مبكرة (مرحلة draft) ودعم المتصفحات لها شبه معدوم (يمكنك تفعيلها في متصفح Google Chrome عن طريق الدخول إلى chrome://flags واختيار "experimental Web Platform features"). وفائدتها هي أنها تعمل في طبقة العرض (presentation layer) وبالتالي لن نحتاج إلى معرفة كيفية ظهور العناصر في التوصيف (markup) الخاص بملفات HTML (أي أنّ كل شيء سيتم باستخدام CSS بعض النظر عن ترتيب العناصر في HTML). الفكرة العامة هي أن يكون هناك شبكة تخطيط (grid) مرنة ومُعرّفة بشكل مسبق يمكن أن نستخدمها لموضعة العناصر بداخلها. وكما هو الحال في flexbox فإنها تعمل على مفهوم المساحات الفارغة وتسمح لنا بتعريف إتجاهين (عمودي وأفقي) في نفس العنصر مما يؤدي إلى تقليل حجم الكود وزيادة مرونته. يُقدّم لنا Grid Layout نوعين من الـgrids وهما explicit وimplicit، ولجعل الأمور بسيطة سوف نركز على explicit فقط. وكما هو الحال مع flexbox فإنّ Grid يقدم مجموعة خاصة به من المفاهيم والمصطلحات، ونذكر بعض منها: Grid container: هو أي عنصر يملك الخاصية display بالقيمة "grid" أو "inline-grid" بحيث تتموضع العناصر داخله ويتم محاذاتها بناءً على grid مُعرّف مسبقًا (explicit mode). والـgrid هو عبارة عن مجموعة من الخطوط العمودية والأفقية المتقاطعة والتي تفصل الـGrid container إلى مجموعة من الخلايا (cells). وهناك مجموعتين من الخطوط؛ الأولى لتعريف الأعمدة (columns) والثانية تكون عمودية على هذه الأعمدة لتعريف الصفوف (rows).Grid track: هي المسافة بين خطّين متجاورين، وكل Grid track يتم إعطاؤه دالة تحجيم (sizing function) للتحكم بكيفية نمو كل عمود أو صف وبالتالي التحكم في البعد بين الخطوط المحيطة بكل خط.Grid cell: هي المسافة بين صفّين متجاورين وعمودين متجاورين من خطوط الـgrid، وهو أصغر وحدة من الـgrid يمكن الرجوع والاستناد إليها عندما نقوم بموضعة عناصر الـgrid.Flexible length: هو بُعد يتم تحديده بوحدة fr وهو يُمثّل جزء من المساحة الفارغة في الـGrid container. إليك عناصر HTML التي سوف نستخدمها: <body class="layout-grid"> <header id="header"></header> <nav id="nav"></nav> <aside id="subnav"></aside> <main id="main"></main> <footer id="footer"></footer> </body>لاحظ بأننا في تخطيط الصفحة هذا لن نحتاج إلى عنصر إضافي يعمل كحاوٍ لمنطقة المحتوى كما كان الحال مع flexbox، وذلك لأنّ هذا النوع من تخطيط الصفحات (Grid layout) يسمح لنا بتعريف مساحة كل عنصر في كلا الإتجاهين وبنفس الـGrid container. لنبدأ الآن بإضافة تنسيقات CSS: .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; }قمنا باستخدام الخاصية display: grid على الحاوي (Grid container)، وكذلك استخدمنا الخاصيتين grid-template-columns وgrid-template-rows وهما تمثلان المساحة بين الـGrid tracks. بمعنى آخر، فإنّ هاتين القيمتين لا تمثلان مكان تواجد خطوط الـgrid وإنّما تمثلان مقدار المساحة بين الـGrid tracks. ضع في الحسبان أنّ وحدات القياس يمكن أن تكون أي واحدة من التالية: وحدة طول (length).نسبة مئوية معينة من حجم الحاوي (Grid container).مساحة من المحتوى الذي يحتله العمود أو الصف.جزء من المساحة الفارغة في الـgrid.فعلى سبيل المثال، في الخاصية grid-template-column: auto 0 auto 1em 1fr سيكون لدينا التالي: track واحد لتعريف عمودين بعرض auto (مساحة القائمة الرئيسية nav#).gutter واحد بقيمة "صفر" (الـmargin الخاص بالعنصر subnav# موجود في مستوى العنصر، ويمكن أن يكون موجودًا أو لا وبهذه الطريقة نضمن أن لا يكون هناك gutter مزدوج).track واحد لتعريف عمودين بعرض auto (مساحة القائمة الفرعية subnav#).gutter واحد بقيمة 1em.track واحد بقيمة 1fr للعنصر main# (سوف يأخذ المساحة المتبقية).لاحظ أننا استخدمنا القيمة auto في الـtrack، وهذا يسمح لنا بالحصول على أعمدة ديناميكية بحيث يتم تعريف مكان وحجم خطوط الـgrid بناءً على المحتوى الخاص بها. (سوف نحتاج أيضًا إلى تعريف حجم العنصرين nav# وsubnav# وهذا ما سنفعله بعد قليل). وبطريقة مشابهة، سوف تملك الصفوف الخاصية grid-template-row: 5em 1em 1fr 1em 3em مما يجعل العنصرين header# و footer# ثابتين ويؤدي أيضًا إلى أنّ العناصر الموجودة بين هذين العنصرين سوف تستخدم المساحة الفارغة المتبقية في حين تكون قيمة الـgutters بقيمة 1em. لنرى الآن كيف سنقوم بموضعة العناصر داخل الـgrid الذي قمنا بتعريفه: #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; }إنّ تنسيقات CSS الخاصة بالعنصر header# تُخبرنا بأننا نريد أن تكون الترويسة موجودة بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 1 و2 بالنسبة للصفوف. ونفس الشيء بالنسبة للعنصر footer# فنريده أن يكون موجودًا بين الخطين 1 و6 (أي العرض كامل) بالنسبة للأعمدة وبين الخطين 5 و6 بالنسبة للصفوف. أمّا بالنسبة لمنطقة المحتوى فقد تمّ إعطاؤها الخصائص المناسبة حتى تشغل المساحة التي يفترض بها أن تشغلها. لاحظ أنّ الخاصية grid-column هي اختصار (shorthand) للخاصيتين grid-column-start وgrid-column-end و أنّ الخاصية grid-row هي اختصار للخاصيتين grid-row-start وgrid-row-end. لنعد الآن إلى العنصرين nav# وsubnav#. بما أننا قمنا مسبقًا بوضع هذين العنصرين داخل الـtrack بقيم auto فسوف نحتاج إلى تحديد مساحتهما (نفس الشيء سيكون بالنسبة لـ"expanded" فسوف نقوم فقط بتغيير عرضها وسوف يتكفل Grid بالباقي). #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; margin-left: 1em; }يمكننا الآن أن نقوم بتغيير وضع القائمة الرئيسية nav# وإخفاء أو إظهار القائمة الفرعية subnav# وكل شيء سيعمل بشكل جيد وملائم. كما أنّ Grid Layout تسمح لنا باستعمال أسماء مستعارة لتسمية الخطوط حتى نستطيع أن نُغير في الـgrid كما نريد دون أن يؤدي ذلك إلى خلل في الأكواد لأنّها ستكون مربوطة باسم معين وليس بأحد خطوط الـgrid. خاتمةحتى باستخدام تقنيات CSS القديمة فإنّ هناك الكثير مما يستطيع مطورو الويب فعله واستغلاله. ومع ذلك فقد يكون ذلك مهمة ليست سهلة وتحتاج إلى الكثير من الأكواد والتي قد تكون مكررة في كثير من الأحيان. ولكن كما شاهدنا فإنّ CSS3 بدأت تقدم طرق وتقنيات أفضل لتخطيط صفحات الويب والتي بدورها تُسهّل العمل على مطوري الويب. لذلك أعتقد أنه يجب على أي مطور ويب أن يتقن ويتعلم هذه التقنيات حتى يُحسّن من تجربة المستخدم وحتى يقوم بكتابة كود أنظف وأفضل. وهذه المقالة قدمت جزءًا صغيرًا فقط مما يمكن فعله باستخدام تقنيات CSS3 وهناك الكثير مما يجب عليك تعلمه. ترجمة -وبتصرّف- للمقال CSS Layout Tutorial: From Classic Approaches to the Latest Techniques لصاحبه Laureano Martin Arcanio.

لقد أصبح التصميم الشبكي Grid Layout في CSS يتطابق تمامًا مع اسمه، حيث يمكن من خلال CSS بناء تصميم شبكة ببعدين عمودي وأفقي يمكن أن يتم توزيع التصماميم والأغراض الأخرى على العمود والسطر. سنستعرض في هذا الدرس العديد من الأمثلة على التصميم الشبكي، ولكن لنبدأ أولًا بحل المشاكل التي واجهتنا عندما حاولنا بناء flexbox بشكل شبكي. سنبدأ أولًا بتطبيق مثال نقوم فيه ببناء ثلاثة أعمدة ضمن الشبكة، من خلال بناء div يحمل اسم الصف example ونضيف فيه قائمة غير مرقمة ul اسم الصف الخاص بها cards ونضيف بداخلها عناصر من خلال الوسم li كل عنصر هو عبارة عن بطاقة card من البطاقات التي سننظم عرضها بمخطط شبكي grid layout على الشاشة (كود المثال على GitHub) لوضع البطاقات الخمسة ضمن الشبكة السابقة سنضيف مجموعة من تعليمات css للصف cards الذي يحوي البطاقات الخمسة: نضيف خاصية الشبكة لطريقة عرض الحاوية container من خلال التعليمة display:grid. لبناء ثلاثة أعمدة متساوية في العرض نضيف الخاصية grid-template-columns، وهنا سنستعرض وحدة جديدة يمكن استخدامها عند إنشاء الشبكة تسمى وحدة الطول المرن flexible-length unit ونشير إليها بـ fr حيث تمثل أجزاء الفراغ الموجود في الحاوية. في هذا المثال سنقسم الفراغ إلى ثلاثة أعمدة متساوية لذلك نضع 3 أجزاء fr قيمة كل واحد منها 1 والتي تعني تقسيم الفراغ إلى ثلاثة أجزاء متساوية. .cards { margin: 0 -10px; display: grid; grid-template-columns: 1fr 1fr 1fr; } (كود المثال على GitHub) وهذا كل مانحتاجه للحصول على ابن للحاوية يظهر بشكل شبكي، فعلى عكس طريقة بناء flexbox لانحتاج هنا إلى أي قواعد أخرى لإضافتها لخلايا الأبناء المكونة للشبكة حيث تقوم جميع الخلايا بوراثة كل خصائص الأب مباشرة. كما نرى فالعناصر ضمن الشبكة تشكل تصميم متماسك لايحتاج إلى أي تعديلات في عرضهم وبذلك نكون قد وجدنا حلًا لأحد المشاكل التي كانت تظهر لدينا في تصميم flexbox grid باستخدام الخصائص المعرفة للشبكة. الآن في حال أردنا إضافة فجوات بين العناصر المرنة داخل الشبكة في المثال السابق يمكن إضافة هوامش بين العناصر ولكن نحتاج أيضا لإضافة هوامش سلبية لحاوية الشبكة من أجل تصحيح الهوامش على اليمين واليسار غير المرغوب بها. في التصميم الشبكي لـ CSS يوجد خاصية تسمى grid-gap يمكن إضافتها من أجل إعطاء هوامش للعناصر داخل الشبكة. وهي تعبر عن خاصيتين في داخلها هما grid-columns-gap و grid-row-gap التي يمكن أيضًا إعطاؤهما قيم بشكل فردي في حال أردنا الهوامش بين الأعمدة والأسطر مختلفة. لنطبق هذه الخصائص عمليًا ونكتشف طريقة عملها معًا، سأقوم بحذف الهوامش المعطاة للعناصر وستحصل على نفس التصميم الذي أظهرناه في الأعلى، ولكن من دون الفوضى التي تحدثها الهوامش والهوامش السلبية .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } ملاحظة: بمجرد طباعة الكتاب الذي تم اقتباس هذا المقال منه، قامت إحدى مجموعات العمل على CSS بتغيير اسم الخصائص المتعلقة بـ grid-gap حيث سيتم تغيير اسم خاصية grid-column-gap إلى column-gap وخاصية grid-row-gap إلى row-gap أما خاصية grid-gap التي تجمع بين الخاصيتين السابقتين ستتغير إلى gap. بالإضافة إلى أنه سيتم تغيير تعريف الخصائص التي تحدد أبعاد مخطط المربع الإظهار box alignment وبالتالي يمكن دعم وجود فجوات داخل flexbox كما في الشبكة. ولأن المتصفحات قد تم تحميلها بهذه الخصائص، لذلك سيتم تغيير اسم الخصائص ذات الشكل grid-* إلى الشكل الجديد بالمستقبل القريب. حتى وقت كتابة هذا الدرس لم يقدم أي متصفح دعم لأسماء الخصائص الجديدة، لذلك سأبقي على الأسماء القديمة في هذا المثال ولكن لامانع في حال أردت التأكد يمكن أن تكتب كلا الشكلين من الخاصية في مثالك .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; gap: 20px; } طريقة توضع العناصر حول الشبكة نستطيع الوصول إلى مستويات أكثر تطورًا في طريقة توزيع العناصر ضمن الشبكة مما كان مسموحًا في flexbox من خلال الاستفادة من ميزات الشبكة ثنائية الأبعاد وطريقة توضع العناصر داخلها. الطريقة الأكثر الأساسية هي استخدام أرقام الأسطر. حيث أنه تم ترقيم أسطر وأعمدة الشبكة ورقم البداية هو 1، حيث أن بداية الترقيم تكون حسب اتجاه الكتابة في المستند فعندما يكون العمل داخل الصفحة باللغة الانجلزية مثلًا أي توضع الكتابة من اليسار إلى اليمين LTR عندها العمود رقم 1 هو العمود الموجود في الجهة اليسرى والسطر رقم 1 هو السطر الموجود في الأعلى. أما عندما تكون الكتابة من اليمين إلى اليسار RTL كما في اللغة العربية عندها سيكون العمود رقم 1 هو العمود الموجود في يمين الشبكة. كما ستكون أقصى زاوية في الشبكة (الزاوية اليمينة في اللغات التي يكون اتجاه الكتابة فيها LTR والزاوية اليسارية في اللغات التي اتجاهها RTL) ممثلة بالرقم 1- . لتوضيح هذه الطريقة سنقوم إضافة اسم صف إلى كل عنصر li داخل مستند Html يمثل رقم البطاقة card1, card2… ثم داخل ملف css سنغير خصائص كل صف لتصبح بالشكل. .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card1 { grid-column: 1 / 3; grid-row: 1; } .card2 { grid-column: 3; grid-row: 1; } .card3 { grid-column: 1; grid-row: 2 / 4; } .card4 { grid-column: 2 / 4; grid-row: 2; } .card5 { grid-column: 2 / 4; grid-row: 3; } (كود المثال على GitHub) نستطيع أن نشاهد قوة تنظيم المخطط الشبكي هنا، حيث يمكننا زيادة اتساع الأعمدة والأسطر وهو شيء كان صعبًا حدوثه في المنهج السابق المتبع في التصميم. بالنسبة للون الخلفية للبطاقات نلاحظ أنها مطبقة مباشرة حتى لو كان المحتوى قصير، كما أنه من السهولة تغيير مدى توسع كل كتلة كما يمكننا ترك كتل فارغة فمثلًا إذا قمت بتغيير البطاقة الثالثة card3 لتبدأ عند السطر 3 بدلًا من السطر الثاني عندها سنحصل على خلية فارغة ولايمكن لأي خلية أخرى ضمن الشبكة أن تنزاح إلى الأعلى لتملأ الفراغ وهنا يمكن الاختلاف عن floats التي تحاول أن تطفو إلى الأعلى لتملأ الفراغات المتاحة. كما يوجد طريقة أخرى لتغيير توضع العناصر ضمن الشبكة من خلال تسمية المناطق، حيث يُسمح لك بتوصيف مخططك كما تريد. سنشرح هذه الطريقة من خلال مثالنا، أولًا سنعطي كل بطاقة اسم من خلال الخاصية grid-area. .card1 { grid-area: a; } .card2 { grid-area: b; } .card3 { grid-area: c; } .card4 { grid-area: d; } .card5 { grid-area: e; } ثم نضيف الخاصية grid-template-areas إلى الحاوية للشبكة cards بحيث توصف القيمة المعطاة لهذه الخاصية كيفية توضع العناصر ضمن المخطط فمثلا في حال وصفنا التوضع بالشكل. .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; grid-template-areas: "a a b" "c d d" "c e e"; } (كود المثال على GitHub) سيظهر لدينا ترتيب البطاقات ضمن الشبكة بالشكل. ولكن هناك بعض الملاحظات من المهم تذكرها حول خاصية grid-template-areas وهي: في حال أردنا أن نمدد البطاقة على مساحة أكثر من خلية نقوم بتكرار اسم المنطقة، مثلًا تمتد البطاقة الأولى card1 على مساحة عمودين لذلك قمنا بتكرار المنطقة a مرتين حيث أن شكل المنطقة هو مستطيل (لا نستطيع إلى الآن بناء منطقة على شكل حرف L). لترك مساحات فارغة يتوجب علينا ترك مكان الخلية فارغًا، ويتم ذلك من خلال استخدام محرف النقطة "." مثلًا إذا استبدلنا أول c بنقطة عندها ستبقى خلية فارغة في المخطط. .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; grid-template-areas: "a a b" ". d d" "c e e"; } يمكنك تسمية المناطق بأكثر من محرف في حال كان عدد الأسطر كبير مثلًا كما أنه يمكن أن تمثل الخلية الفارغة بأكثر من نقطة ".." بشرط ألا يفصل بين المحارف أي فراغ. وأخيرًا وجدت أن هذه الطريقة للعمل على مخطط الصفحات تعتبر سهلة جدًا لتحريك العناصر والاستمتاع بوضع النماذج الأولية لصفحاتك أكثر من القلق هو طريقة تنفيذ التصاميم والحصول عليها حيث يمكنك اكتشاف أفضل طريقة لتمثيل شكل الواجهة ثم العودة لبناء محتويات الصفحة والترتيب المنطقي لعرضها. وبهذه الأمثلة التي طرحناها اليوم، تكون قد اكتسبت معرفة كافية تسمح لك باستخدام التصميم الشبكي grid layout لتقرر طريقة عرضك للمحتويات، ولكن تذكر هناك الكثير من الطريق لتخصيص العمل الذي تقوم به حيث يمكنك القيام بالكثير من خلال استخدام CSS. ترجمة للمقال The New CSS Layout, An Excerpt للكاتبة Rachel Andrew

إنّ HTML و CSS من أفضل وأسهل الطرق لتقديم المحتوى وأكثرها مرونة. فهي سهلة التعلم وقوية. لكن شيئا واحدا تعجَز فيه هذه اللغات هو الهيكلة المعقدة.، فإذا أردت إنشاء موقع بسيط بهيكلة واضحة فالأمر سهل جدا، ولكن انتقل إلى محتوى متعدد الأعمدة مثلا وشيئا آخر تماما، فهنا تقع نقطة ضعف لغات هيكلة الويب، فيستلزم بنا استخدام طرق ملتوية لإصلاح المشاكل، ناهيك عن توافق هذه الطرق مع مختلف المتصفحات وطريقة ظهورها في كل متصفح. لمجابهة هذه المشكلة يقدم لنا الإصدار الثالث من CSS مجموعة من الحلول البسيطة والسهلة لهذه المشاكل، وهي كالتالي: Multi-column layout Module. Grid layout Module. Flexbox layout Module. وسنتكلم نحن اليوم عن Flexbox (المعروف عموما بـFlex) وهو أكثرهم شيوعا وأكثرهم دعما من قبل المتصفحات (لدى كتابة هذا المقال كل المتصفحات تدعم flex إلى جانب الإصدار العاشر من IE)، وما يقوم به Flexbox هو التحكم بهيكلة مجموعة من العناصر التي تقع تحت حاوي واحد، ويسمح لنا بـ: صف هذه العناصر في سطر واحد بدون تحديد عرض كل واحد منها (واستخدام float) كما يقوم بإضافة العناصر إلى سطر جديد إن لم تكفي المساحة. صّف هذه العناصر على شكل عمود بسهولة كبيرة. محاذات العناصر إلى اليمين أو اليسار أو الوسط (بالنسبة للحاوي). تغيير الترتيب الذّي تظهر به العناصر بدون التعديل على HTML. تحديد المساحة التي يأخذها كل عنصر بدون القلق في حال تغيير حجم الحاوي. والآن لنتفقد المزيد من المميزات. مثال بسيط للعمل به حتى نبدأ باستخدام Flexbox، علينا استخدام مثال بسيط لنشرح به، ومن أجل ذلك اخترنا العمل على هيكلة ذيل صفحة يحتوي على 3 عناصر تجدها في أيّ ذيل صفحة وسنقوم بالتجربة عليها. ما نريد إنجازه هو أن نقوم بصف العناصر الثلاثة بشكل أفقي، وأن نقوم بمحاذاتها عموديا إلى المنتصف وأن يستغل العنصر الأخير ضعف مساحة بقية العناصر، لنقوم بالأمر بالطريقة التقليدية سيتوجب علينا صف العناصر باستخدام float مع تحديد مساحة كل واحدة وحسابها بشكل دقيق حتى يكون هناك ما يكفي من مكان. هذه هي النتيجة النهائية. البدء باستخدام Flexbox الشيء الذي يجب أن نفهمه هو أن Flexbox ليس خاصية واحدة بل مجموعة من الخواص المختلفة، ونستعمل Flexbox عبر تطبيق هذه الخواص على الحاوي والبعض الآخر على العناصر التي نريد التحكم بها. ولنبدأ باستخدام Flexbox نقوم بتطبيق الخاصية التالية على الحاوي: footer { display: flex; } تستطيع أيضا استخدام خاصية flex-flow التي تسمح لك بأن تحدد هل تريد أن تصف العناصر على شكل صف أفقي (row وهي القيمة الإفتراضية )أو على شكل عمود (column) وهل تريد أن تحشر كل العناصر في سطر واحد (nowrap وهي القيمة الافتراضية) أو أن تضيف سطرا جديدا (أو عمودا جديدا) في حال نفاذ المكان (wrap). footer { display: flex; flex-flow: row wrap; } ملاحظة: flex-flow تجمع ما بين الخاصيتين flex-direction (وقيمها هي row , column row-reverse column-reverse) و flex-wrap (قيمها هي wrap no-wrap wrap-reverse). دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن المحور الرئيسي والمحور الجانبي Flexbox تعتمد على مبدأ المحاور في العمل، فهي لا تعمل على أساس محور أفقي ومحور عمودي (حيث ستنعكس الأمور إذا صفننا العناصر عموديا عبر flex-direction : column) بل تستخدم محورا رئيسيا أو Main Axis وهو يتبع الإتجاه الذي حددناه في flex-direction بمعنى أنه من بداية الصفحة إلى نهايتها إذا حددنا flex-direction : row أو من أسفل الصفحة إلى أعلاها إذا حددنا flex-direction : column-reverse أما المحور الجانبي فهو يعامد المحور الرئيسي ويجري في نفس اتجاهه، هذه صورة توضح الأمر. محاذات العناصر يتيح لنا Flexbox محاذات العناصر بأكثر من طريقة، وعبر المحور الرئيسي والجانبي. المحاذات في المحور الجانبي للمحاذات على المحور الجانبي نستخدم خاصية align-items وقيمه هي: flex-start/baseline: تقوم بمحاذات أعلى نقطة من كل عنصر عند بداية المحور الجانبي. flex-end: تقوم بمحاذات نهاية كل عنصر عند نهاية المحور الجانبي. center: تقوم بمحاذات منتصف كل العناصر مع منتصف المحور الجانبي. stretch: تقوم بجعل العناصر تتمدد حتى تملأ مساحة كامل المحور الجانبي. كل هذه القيم واضحة، ولكن إن احتجت فهمها أكثر، جرب التعديل على المثال التالي: See the Pen jPzGPR by Hsoub Academy (@HsoubAcademy) on CodePen. خلاصة أتمنى أن تكون هذه المقالة واضحة وبسيطة لتشرح مجموعة الخواص الرائعة هذه، Flexbox تسمح لنا بالكثير من "المرونة" في التطوير وتتيح لنا أشياء لم نكن قادريين على القيام بها سابقا. ترجمة -وبتصرّف- للمقال Flexbox — Fast Track to Layout Nirvana.

يُعتبر مخطّط الشبكة Grid Layout من المخطّطات الهامّة والضروريّة في تصميم واجهات المستخدم بالنسبة لتطبيقات الأجهزة المحمولة. فيمكن من خلال هذا المخطّط التحكّم على نحو دقيق نسبيًّا بمواقع جميع العناصر المرئيّة الموجودة في الواجهة، وذلك بخلاف مخطّط المكدّس Stack Layout الذي تناولناه منذ بداية هذه السلسلة حتى الآن. حيث كان من الصعوبة التحكّم بمواقع العناصر المرئيّة بشكل دقيق، وخاصةً فيما يتعلّق بالمحاذاة. في الحقيقة يمكن استخدام كل من هذين المخطّطين معًا في الواجهة الواحدة. سنبدأ في هذا الدرس بالتعرّف على مفهوم هذا المخطّط وطريقة استخدامه. ثمّ نُتْبع هذا الدرس بدرسين آخرين يتناولان تطبيقين عمليين لاكتساب الخبرة اللازمة للعمل مع مخطّط الشبكة بسهولة ويسر أكبر. ما هو مخطّط الشبكة؟ مخطّط الشبكة هو عبارة عن بنية تشبه الجدول من الناحية الشكلية ولكنّها تختلف عنه من الناحية العمليّة. فمخطّط الشبكة قد صُمّم بالأساس ليكون وسيلة لتنظيم العناصر المرئيّة ضمن واجهة المستخدم. أمّا الجدول فهو بنية وظيفتها احتواء بيانات يمكن عرضها للمستخدم. سيكون أغلب تعاملنا مع مخطّط الشبكة من خلال رُماز XAML. إذ أنّه من الممكن أيضًا استخدام الأسلوب البرمجيّ في التعامل معه. ولكن التعامل معه من خلال الرُماز أفضل من ناحية الاستخدام والتنظيم. يمكن تعريف مخطّط الشبكة من خلال الوسم . حيث من الممكن تعيين الأسطر rows والأعمدة columns التي يتألّف منها هذا المخطّط من خلال الخاصيّتين RowDefinitions التي تحتوي على تعاريف الأسطر وColumnDefinitions التي تحتوي على تعاريف الأعمدة. يُدعى مكان تقاطع السطر والعمود بالخليّة Cell. الخاصيّة RowDefinitions هي عبارة عن مجموعة collection من العناصر التي يكون كلّ منها من النوع RowDefinition وتعني تعريف سطر. يمكن من خلال هذا النوع ضبط العديد من خصائص هذا السطر. سنهتم حاليًّا بالخاصيّة Height التي تُعبّر عن ارتفاع السطر. من الممكن تعيين قيمة هذا الارتفاع بثلاثة أنواع من المقاييس: النوع الأوّل هو القيمة العدديّة المباشرة وهي قيمة لا تتعلّق لا تتعلّق بالشاشة device-independent units (انظر هذا الدرس). النوع الثاني هو الكلمة Auto، والتي تعني أنّه ينبغي أن يكون ارتفاع السطر مساويًا لأعلى ارتفاع عنصر مرئي موجود ضمنه. النوع الثالث هو النوع النسبيّ، ويُعبّر عنه رمز النجمة (*)، حيث يكون ارتفاع السطر في هذه الحالة بحيث يشغل باقي الارتفاع المتاح لمخطّط الشبكة ككل. ومن الممكن أن يتعلّق أيضًا بسطر آخر له نفس هذا النوع من القياس، وسنوضّح ذلك في مثال تطبيقي بعد قليل. أمّا بالنسبة للخاصيّة ColumnDefinitions هي عبارة عن مجموعة collection من العناصر التي يكون كلّ منها من النوع ColumnDefinition وتعني تعريف عمود. يمكن من خلال هذا النوع ضبط العديد من خصائص هذا العمود. سنهتم بالخاصيّة Width منه التي تُعبّر عن عرض العمود. من الممكن تعيين قيمة هذا العرض كما هو الحال مع تعريف السطر أيضًا بثلاثة أنواع من المقاييس، تماثل من حيث المبدأ الأنواع الثلاثة السابقة من القياس للسطر: النوع الأوّل هنا هو نفسه النوع الأوّل بالنسبة للسطر، وهو قيمة العدديّة المباشرة التي لا تتعلّق لا تتعلّق بالشاشة device-independent units. النوع الثاني هو الكلمة Auto، والتي تعني أنّه ينبغي أن يكون عرض العمود مساويًا لأعرض عنصر مرئي موجود ضمنه. النوع الثالث هو النوع النسبيّ، ويُعبّر عنه رمز النجمة (*) أيضًا، حيث يكون عرض العمود في هذه الحالة بحيث يشغل باقي العرض المتاح لمخطّط الشبكة ككل. ومن الممكن أن يتعلّق أيضًا بعمود آخر له نفس هذا النوع من القياس. وسنوضّح ذلك أيضًا في المثال التطبيقي الذي سنكتبه بعد قليل. من الجدير ذكره أنّه في حالة القياس النسبيّ في كلّ من حالة السطر والعمود، من الممكن وجود رقم بجوار رمز النجمة يدل على الحصّة التناسبيّة للسطر أو للعمود كما سنرى ذلك بعد قليل. تطبيق عملي بسيط باستخدام مخطّط الشبكة ابدأ بإنشاء مشروع جديد من النوع Blank App (Xamarin.Forms Portable) وسمّه SimpleGridApp، ثم أبق فقط على المشروعين SimpleGridApp (Portable) و SimpleGridApp.Droid كما وسبق أن فعلنا في هذا الدرس. بعد ذلك سنضيف صفحة محتوى تعتمد على رُماز XAML كما وسبق أن فعلنا في هذا الدرس سنسمّها SimpleGridPage. احرص على أن تكون محتويات هذه الصفحة على الشكل التالي: 1 <?xml version="1.0" encoding="utf-8" ?> 2 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 3 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 4 x:Class="SimpleGridApp.SimpleGridPage"> 5 <Grid> 6 <Grid.RowDefinitions> 7 <RowDefinition Height="Auto" /> 8 <RowDefinition Height="100" /> 9 <RowDefinition Height="2*" /> 10 <RowDefinition Height="1*" /> 11 </Grid.RowDefinitions> 12 13 <Grid.ColumnDefinitions> 14 <ColumnDefinition Width="*" /> 15 <ColumnDefinition Width="*" /> 16 </Grid.ColumnDefinitions> 17 18 <Label Text="مخطط الشبكة" 19 Grid.Row="0" Grid.Column="0" 20 FontSize="Large" 21 HorizontalOptions="End" /> 22 23 <Label Text="تجربة مخطط الشبكة" 24 Grid.Row="0" Grid.Column="1" 25 FontSize="Small" 26 HorizontalOptions="End" 27 VerticalOptions="End" /> 28 29 <Image BackgroundColor="Gray" 30 Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Source="icon.png" /> 31 32 <BoxView Color="Green" 33 Grid.Row="2" Grid.Column="0" /> 34 35 <BoxView Color="Red" 36 Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" /> 37 38 <BoxView Color="Blue" 39 Opacity="0.5" 40 Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" /> 41 </Grid> 42 </ContentPage> انتقل الآن إلى الملف App.cs واحرص على أن تكون بانية الصنف App على الشكل التالي: public App() { // The root page of your application MainPage = new SimpleGridPage(); } نفّذ البرنامج لتحصل على شكل شبيه بما يلي: لنحلّل الآن هذا التطبيق البسيط. في البداية أنشأنا مخطّط شبكة عن طريق كتابة الوسم اعتبارًا من السطر 5. بعد ذلك وضعنا تعاريف أسطر الشبكة من السطر 6 حتى السطر 10 على الشكل التالي: <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="100" /> <RowDefinition Height="2*" /> <RowDefinition Height="1*" /> </Grid.RowDefinitions> ويعني ذلك أنّ هذه الشبكة سيكون لها أربعة أسطر (لوجود أربعة وسوم RowDefinition). سيكون ارتفاع السطر الأوّل Auto، ويعني ذلك أنّ هذا السطر سيكون ارتفاعه مساويًا لارتفاع أعلى عنصر موجود ضمنه. أمّا السطر الثاني فارتفاعه 100 وحدة مستقلة عن الجهاز. بالنسبة للسطرين الثالث والرابع فسيكون ارتفاعهما نسبيًّا لوجود رمز النجمة *. لاحظ وجود الرقم 2 بجوار رمز النجمة بالنسبة للسطر الثالث، ووجود الرقم 1 بجوار رمز النجمة بالنسبة للسطر الرابع. الذي سيحدث هنا أنّه وبعد أن يتم تعيين ارتفاعيّ السطرين الأوّل والثاني سيتم اقتسام الارتفاع المتبقي للشبكة بين السطرين الثالث والرابع بحيث تكون حصّة السطر الثالث ضعف (الرقم 2) حصّة السطر الرابع (الرقم 1). بعبارة أخرى ارتفاع السطر الثالث سيكون 2 إلى 1 من ارتفاع السطر الرابع. وضعنا بعد ذلك تعاريف أعمدة الشبكة من السطر 13 حتى السطر 16 على الشكل التالي: <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> من الواضح أنّه سيكون لهذه الشبكة عمودان فقط. كل من هذين العمودين سيكون عرضه نسبيّ (الرمز *). ولكن بسبب عدم وجود أيّ رقم بجوار رمز النجمة في كلّ منهما، سيتمّ اعتبار وجود الرقم 1 بشكل افتراضيّ بجوار كل رمز نجمة (مثل1*). أي بالمحصلة سيكون لكل منهما نفس الرقم، وبالتالي نفس الحصّة النسبيّة لذلك سيكون لهما نفس العرض تمامًا. تأتي بعد ذلك العناصر المرئيّة التي سنضعها ضمن هذه الشبكة. يبدأ ترقيم كل من الأسطر والأعمدة بالرقم صفر. فالسطر رقم صفر هو السطر الأوّل، وكذلك الأمر بالنسبة للأعمدة. إذا نظرت إلى الأسطر من 18 حتى 21 فستجد أنّنا نضيف لصيقة إلى الخليّة المحدّدة بالسطر الأوّل والعمود الأوّل. ويكمن سبب ذلك في السطر 19 حيث نجد الخاصيّتين Grid.Row="0" للسطر رقم 0، وGrid.Column="0" للعمود رقم 0 أيضًا. أي السطر الأوّل والعمود الأوّل. بنفس الأسلوب تمامًا نضيف لصيقة أخرى إلى الخليّة المحدّدة بالسطر الأوّل والعمود الثاني (الأسطر من 23 حتى 27)، وأيضًا عنصر صورة ضمن الخليّة المحدّدة بالسطر الثاني والعمود الأوّل (السطران 29 و30). نلاحظ أيضًا أنّ عنصر الصورة هذا سيشغل بالإضافة إلى العمود الأوّل العمود الثاني أيضًا، وذلك بسبب وجود الخاصيّة Grid.ColumnSpan="2" والتي تشير إلى أنّ الخليّة التي ستحتوي عنصر الصورة يجب أن تمتد على عمودين متتاليين باتجاه اليمين، وهذا ما يُفسّر سبب ظهورها ممتدّة على كامل عرض الشبكة كما هو واضح في الشكل السابق. بعد إضافة عنصر الصورة السابق، سنضيف ثلاثة عناصر BoxView لأغراض العرض فقط (الأسطر من 32 حتى 40). حيث ستشغل هذه العناصر الثلاثة على الترتيب الخلايا المحدّدة بالسطر الثالث والعمود الأوّل، ثم السطر الثالث والعمود الثاني، ثم السطر الرابع والعمود الأوّل. مع ملاحظة أنّ عنصر BoxView الأوسط يحوي الخاصيّة Grid.RowSpan="2" التي تسمح للخلية التي تحتويه بالامتداد إلى سطرين متتاليين. أمّا عنصر BoxView الأخير فيحوي على الخاصية Grid.ColumnSpan="2" لتسمح له بالامتداد على عمودين متتاليين. أي أنّ عنصريّ BoxView الثالث والرابع سيتداخلان في الخليّة المحدّدة بالسطر الرابع والعمود الثاني كما هو واضح من الشكل السابق. الخلاصة تعلّمنا في هذا الدرس كيفيّة التعامل الأساسي مع مخطّط الشبكة Grid Layout. ولعلّ الفهم الأفضل لمثل هذه الأمور تنبع من الممارسّة العمليّة ببناء تطبيقات عمليّة صغيرة ولكنّها مفيدة. سنعمل في الدرسين القادمين على بناء تطبيقين بسيطين يحتويان على العديد من التقنيّات البرمجيّة المفيدة والتي من الممكن استخدامها في التطبيقات الواقعيّة.

سنتناول في هذا الدرس من سلسلة تعلّم برمجة تطبيقات أندرويد باستخدام Xamarin.Forms تطبيقًا عمليًّا مفيدًا حول التعامل مع مخطّط الشبكة Grid Layout وهو عبارة عن تطبيق لوحة أرقام يمكن تطويرها لاحقًا لتصبح مثلًا تطبيق آلة حاسبة متعدّد الوظائف. اطلعنا في الدرس السابق على مخطّط الشبكة وتعلمنا بعض المبادئ الأساسيّة لاستخدامه. يمكنك مراجعة ذلك الدرس، أو من الممكن أن تبدأ مباشرةً في هذا الدرس. فكرة التطبيق سنعمل على كتابة تطبيق لوحة أرقام بسيط، حيث ستظهر أزرار تحمل الأرقام من 0 حتى 9 بالإضافة إلى زر الفاصلة العشرية، مع وجود زر لإلغاء آخر رقم تمّت كتابته. ستبدو واجهة التطبيق كما في الشكل التالي: عندما ينقر المستخدم على أزرار الأرقام ستظهر هذه الأرقام تباعًا بجوار بعضها بالترتيب. أمّا عندما ينقر زر الإلغاء فسيتم إلغاء آخر رقم تمّ نقره. لنستعرض الشيفرة البرمجيّة لهذا التطبيق في الفقرة التالية. الشيفرة البرمجيّة للتطبيق ابدأ بإنشاء مشروع جديد من النوع Blank App (Xamarin.Forms Portable) وسمّه KeypadGrid، ثم أبق فقط على المشروعين KeypadGrid (Portable) و KeypadGrid.Droid كما وسبق أن فعلنا في هذا الدرس. بعد ذلك سنضيف صفحة محتوى تعتمد على رُماز XAML كما وسبق أن فعلنا في هذا الدرس سنسمّها KeypadGridPage. احرص على أن تكون محتويات هذه الصفحة على الشكل التالي: <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="KeypadGrid.KeypadGridPage"> <Grid RowSpacing="2" ColumnSpacing="2" VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="180" Grid.HeightRequest="300"> <Label x:Name="displayLabel" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" FontSize="Large" LineBreakMode="HeadTruncation" VerticalOptions="Center" HorizontalTextAlignment="End" /> <Button x:Name="btnBackspace" Text="⇦" Grid.Row="0" Grid.Column="2" IsEnabled="False" Clicked="btnBackspace_Clicked" /> <Button Text="7" StyleId="7" Grid.Row="1" Grid.Column="0" Clicked="OnDigitButtonClicked" /> <Button Text="8" StyleId="8" Grid.Row="1" Grid.Column="1" Clicked="OnDigitButtonClicked" /> <Button Text="9" StyleId="9" Grid.Row="1" Grid.Column="2" Clicked="OnDigitButtonClicked" /> <Button Text="4" StyleId="4" Grid.Row="2" Grid.Column="0" Clicked="OnDigitButtonClicked" /> <Button Text="5" StyleId="5" Grid.Row="2" Grid.Column="1" Clicked="OnDigitButtonClicked" /> <Button Text="6" StyleId="6" Grid.Row="2" Grid.Column="2" Clicked="OnDigitButtonClicked" /> <Button Text="1" StyleId="1" Grid.Row="3" Grid.Column="0" Clicked="OnDigitButtonClicked" /> <Button Text="2" StyleId="2" Grid.Row="3" Grid.Column="1" Clicked="OnDigitButtonClicked" /> <Button Text="3" StyleId="3" Grid.Row="3" Grid.Column="2" Clicked="OnDigitButtonClicked" /> <Button Text="0" StyleId="0" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Clicked="OnDigitButtonClicked" /> <Button Text="." StyleId="." Grid.Row="4" Grid.Column="2" Clicked="OnDigitButtonClicked" /> </Grid> </ContentPage> من السهل فهم الرُماز السابق مع بعض الملاحظات البسيطة: في البداية لاحظ أنّنا قد أسندنا خصائص إضافيّة لمخطّط الشبكة مثل تباعد الأسطر RowSpacing وتباعد الأعمدة ColumnSpacing وذلك بهدف جعل الأزرار غير ملتصقة ببعضها البعض. كما أسندنا الخيارات الرأسية VerticalOptions والأفقية HorizontalOptions لكي تحمل كل منهما القيمة Center بهدف جعل الشبكة تظهر في مركز الشاشة. لم نستخدم في هذا التطبيق الخاصيّتين RowDefinitions و ColumnDefinitions اللّتان تحدثنا عنهما في الدرس السابق. إذ أنّه من الممكن اعتماد الإعدادات الافتراضيّة الخاصّة بهما، والبدء مباشرة بإضافة العناصر المرئيّة، حيث يمكن من خلال هذه العناصر تحديد السطر والعمود للخليّة التي نودّ وضع العنصر ضمنها كما سنرى بعد قليل. اللصيقة الوحيدة الموجودة في هذا التطبيق تُستَخدم لعرض الرقم الذي أدخله المستخدم. لاحظ أنّنا نريد عرضها في الخلية المحدّدة بالسطر الأوّل والعمود الأوّل، بالإضافة إلى الانتشار لعمودين متتاليين بسبب وجود الخصائص التالية: Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2". كما توجد خاصية أخرى ملفتة للنظر لهذه اللصيقة، وهي الخاصيّة LineBreakMode والتي تحمل القيمة HeadTruncation. هذه القيمة مفيدة في مثل هذه التطبيقات حيث يؤدّي وجودها إلى اقتطاع النص الذي تمّ إدخاله أولًا في حال لم تتسع اللصيقة لعرض كامل النص (يمكنك تجريب ذلك بنفسك فيما بعد). الزر الأوّل الذي يأتي بعد تعريف اللصيقة هو زر إلغاء آخر رقم مُدخل، واسمه btnBackspace، وهو مرتبط مع معالج حدث النقر btnBackspace_Clicked الموجود ضمن ملف الشيفرة البرمجيّة كما سنرى بعد قليل. بالنسبة لبقيّة الأزرار فأمرها بسيط. فكلّ زر نُعيّن له الخاصيّة StyleId للاحتفاظ بالقيمة النصيّة الموافقة للرقم الذي يحمله، فمثًلا الزر الذي يُعبّر عن الرقم 9 ستكون قيمة StyleId له تساوي "9"، وهكذا. الجدير بالملاحظة هنا أننا قد ربطنا جميع هذه الأزرار بنفس معالج الحدث وهو OnDigitButtonClicked، وهو أمر جائز تمامًا، بل ومن المفضّل القيام به. سنطّلع على هذا المعالج بعد قليل. انتقل الآن إلى ملف الشيفرة البرمجيّة KeypadGridPage.xaml.cs الموافق لملف الرُماز السابق، واحرص على أن تكون محتوياته على الشكل التالي: using System; using Xamarin.Forms; namespace KeypadGrid { public partial class KeypadGridPage : ContentPage { public KeypadGridPage() { InitializeComponent(); btnBackspace.IsEnabled = displayLabel.Text != null && displayLabel.Text.Length > 0; } void OnDigitButtonClicked(object sender, EventArgs args) { Button button = (Button)sender; displayLabel.Text += (string)button.StyleId; btnBackspace.IsEnabled = true; } void btnBackspace_Clicked(object sender, EventArgs args) { string text = displayLabel.Text; displayLabel.Text = text.Substring(0, text.Length - 1); btnBackspace.IsEnabled = displayLabel.Text.Length > 0; } } } الشيفرة السابقة بسيطة للغاية، فالصنف KeypadGridPage يحتوي بشكل أساسي على معالجيّ لحدث النقر: المعالج الأوّل هو OnDigitButtonClicked وهو يُستدعى عندما ينقر المستخدم على أحد أزرار الأرقام بالإضافة إلى زر الفاصلة العشرية. وفي هذا المعالج يتم إضافة الرقم الذي نقره المستخدم توًّا إلى محتويات اللصيقة التي تعرض كامل الرقم المُدخَل. نبدأ أولًا بعمليّة تحويل cast للحصول على الزر الذي سبّب استدعاء هذا المعالج: Button button = (Button)sender; ثمّ استخلاص قيمة الخاصيّة StyleId له وضمّها إلى اللصيقة displayLabel: displayLabel.Text += (string)button.StyleId; ومن ثمّ تفعيل زر إلغاء آخر رقم بسبب أنّه قد أصبح هناك رقم واحد على الأقل بشكل مؤكّد ضمن اللصيقة. أمّا المعالج الثاني فهو btnBackspace_Clicked وهو يُستَدعى عندما يتم النقر على زر إلغاء آخر رقم مُدخَل. الشيفرة البرمجيّة ضمن هذا المعالج بسيطة، فهي تعمل أولًا على الحصول على النص الموجود أصلًا ضمن اللصيقة displayLabel وتضعه ضمن المتغيّر النصي text: string text = displayLabel.Text; ومن ثمّ تقوم بحذف آخر رقم عن طريق التابع Substring من المتغيّر text ومن ثمّ إعادة إسناد النص الناتج إلى الخاصيّة Text للصيقة displayLabel. displayLabel.Text = text.Substring(0, text.Length - 1); نقوم في نهاية المطاف بتفعيل زر إلغاء آخر رقم مُدخل أو تعمل على إلغاء تفعيله باستخدام طريقة جميلة تعتمد على تقييم التعبير المنطقي الموجود على يمين عامل الإسناد (=): btnBackspace.IsEnabled = displayLabel.Text.Length > 0; فإذا كانت اللصيقة تحتوي على رقم واحد على الأقل سيكون التعبير displayLabel.Text.Length > 0 مساويًا للقيمة true وبالتالي يتم تفعيل الزر. وإلّا سيعطي هذا التعبير القيمة false ويتم إلغاء تفعيله. حاول إجراء بعض التجارب على هذا التطبيق، ثمّ فكّر كيف يمكن تعديله لإنشاء تطبيق آلة حاسبة فعليّ، يمكنه دعم العمليّات الحسابيّة الأساسيّة الأربع على سبيل المثال. الخلاصة استفدنا من التطبيق الذي تناولناه في هذا الدرس، في كيفيّة استخدام مخطّط الشبكة بشكل عمليّ بغية الاستفادة من مزايا التموضع الدقيقة نسبيًّا التي يوفّرها للعناصر المرئيّة التي تُوضَع ضمنه. سنتابع العمل في الدرس التالي لنبني تطبيقًا عمليًّا مفيدًا أخرًا يستفيد أيضًا من المزايا الرائعة لمخطّط الشبكة في إنشاء مخطّط تكراري إحصائي يشبه مخطّطات الأعمدة التي من الممكن الحصول عليها من تطبيقات مكتبيّة مثل Microsoft Excel مثلًا.

سنتناول في هذا الدرس من سلسلة تعلّم برمجة تطبيقات أندرويد باستخدام Xamarin.Forms تطبيقًا عمليًّا مفيدًا آخرًا، نتعلّم من خلاله المزيد عن مزايا مخطّط الشبكة Grid Layout واستخداماته العمليّة في التطبيقات التي نطوّرها. سيستخدم هذا التطبيق مخطّطًا تكراريًّا Histogram سيكون مصمّمًا باستخدام مخطّط الشبكة. إذا أردت معرفة المزيد عن مخطّط الشبكة فيمكنك مراجعة هذا الدرس. وإلّا، فيمكنك البدء مباشرةً في هذا الدرس. فكرة التطبيق تتلخّص فكرة هذا التطبيق في أنّ المستخدم سيُدخل نصًّا بأيّ لغة يرغبها. ثم ينقر على زر "احسب" ليعمل التطبيق بعد ذلك على حساب تكرار كلّ محرف من محارف النص المُدخل. بعد الانتهاء من ذلك، سيعمل التطبيق على إظهار مخطّط تكراري Histogram على شكل مخطّط أعمدة bars chart يمكن من خلاله ملاحظة الأحرف الأكثر تكرارًا والأقل تكرارًا من نظرة واحدة. سيعتمد التطبيق على عنصر رسومي من النوع Editor لاستقبال الدخل النصيّ من المستخدم. وكذلك على عنصر الزر Button للبدء بإيجاد القيم التكراريّة، وأيضًا سيستخدم مخطط شبكة لعرض النتائج التكراريّة. من أجل كل حرف موجود في النص، سيضيف التطبيق عمود bar سيكون عبارة عن عنصر BoxView يكون ارتفاعه متناسبًا مع تكرار الحرف ضمن النص المُدخَل. بعد إظهار مخطّط الأعمدة سيكون من الممكن النقر على أي عمود (عنصر BoxView) ليعرض التطبيق رسالة للمستخدم تحوي الحرف الذي يمثّله هذا العمود مع عدد مرًّات تكراره ضمن النص المُدخَل. أي بشكل مشابه لما يلي: سنتناول في الفقرة التالية كامل الشيفرة البرمجيّة لهذا التطبيق. الشيفرة البرمجيّة للتطبيق ابدأ بإنشاء مشروع جديد من النوع Blank App (Xamarin.Forms Portable) وسمّه GridBarChart، ثم أبق فقط على المشروعين GridBarChart (Portable) و GridBarChart.Droid كما وسبق أن فعلنا في هذا الدرس. بعد ذلك سنضيف صفحة محتوى تعتمد على رماز XAML كما وسبق أن فعلنا في هذا الدرس سنسمّها GridBarChartPage. احرص على أن تكون محتويات هذه الصفحة على الشكل التالي: 1 <?xml version="1.0" encoding="utf-8" ?> 2 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 3 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 4 x:Class="GridBarChart.GridBarChartPage"> 5 <StackLayout> 6 <StackLayout VerticalOptions="Start"> 7 <Label Text="تطبيق حساب تكرار المحارف" 8 HorizontalOptions="CenterAndExpand" 9 HorizontalTextAlignment="Center" 10 FontSize="Large" 11 TextColor="Green"/> 12 <Editor x:Name="txtInput" /> 13 <Button x:Name="btnCalculate" 14 Text="احسب" 15 HorizontalOptions="FillAndExpand" 16 Clicked="btnCalculate_Clicked" /> 17 </StackLayout> 18 19 <Grid x:Name="grdLettersHistogram" 20 VerticalOptions="FillAndExpand" 21 BackgroundColor="#EBF2F5" 22 Padding="5,5,5,0"> 23 </Grid> 24 </StackLayout> 25 </ContentPage> من الملاحظ أنّ رماز XAML لهذا التطبيق صغير نسبيًّا. يبدأ الرماز بتعريف مخطّط مكدّس StackLayout سيعمل على احتواء كامل واجهة التطبيق. سيحتوي مخطّط المكدّس هذا على عنصرين آخرين: العنصر الأوّل عبارة عن مخطّط مكدّس آخر (الأسطر من 6 حتى 17) يحتوي على لصيقة تعريفيّة بالتطبيق، وعلى عنصر الإدخال النصيّ Editor الذي أسميته txtInput وهو يسمح بكتابة أكثر من سطر نصيّ واحد ضمنه، بالإضافة إلى زر البدء بالحساب الذي أسميته btnCalculate والذي سيؤدّي نقره إلى الانتقال إلى معالج حدث النقر btnCalculate_Clicked. المعالج السابق سيكون بالتأكيد ضمن ملف الشيفرة البرمجيّة الذي سنطّلع عليه بعد قليل. العنصر الثاني هو مخطّط الشبكة (الأسطر من 19 حتى 23) والذي أسميته grdLettersHistogram. لاحظ أنّ هذا المخطّط لا يحوي حاليًّا أيّة عناصر. سنضيف لاحقًا إلى هذا المخطّط عناصر BoxView يمثّل كل منها محرفًا موجودًا ضمن النص المُدخَل، وذلك عن طريق الشيفرة البرمجيّة كما سنرى بعد قليل. انتقل الآن إلى الملف GridBarChartPage.xaml.cs وهو ملف الشيفرة البرمجيّة التابع لملف رماز XAML السابق. احرص على أن تكون محتوياته على الشكل التالي: 1 using System; 2 using System.Collections.Generic; 3 using Xamarin.Forms; 4 5 namespace GridBarChart 6 { 7 public partial class GridBarChartPage : ContentPage 8 { 9 public GridBarChartPage() 10 { 11 InitializeComponent(); 12 } 13 14 private void btnCalculate_Clicked(object sender, EventArgs e) 15 { 16 Dictionary<char, int> freq = new Dictionary<char, int>(); 17 List<View> bars = new List<View>(); 18 TapGestureRecognizer tapGesture = new TapGestureRecognizer(); 19 int maxFreq = -1; 20 21 tapGesture.Tapped += TapGesture_Tapped; 22 23 string s = txtInput.Text; 24 25 foreach (char t in s) 26 { 27 if (char.IsLetterOrDigit(t)) 28 { 29 if (!freq.ContainsKey(t)) 30 { 31 freq.Add(t, 1); 32 } 33 else 34 { 35 freq[t] = ++freq[t]; 36 } 37 } 38 } 39 40 grdLettersHistogram.Children.Clear(); 41 42 //find the max letter frequency. 43 foreach(var v in freq.Values) 44 { 45 if(maxFreq< v) 46 { 47 maxFreq = v; 48 } 49 } 50 51 //calculate measurment unit will apply on bars. 52 double measureUnit = grdLettersHistogram.Height / maxFreq; 53 54 foreach (var c in freq.Keys) 55 { 56 var boxView = new BoxView 57 { 58 HeightRequest = measureUnit * freq[c], 59 BackgroundColor = Color.Accent, 60 VerticalOptions = LayoutOptions.End, 61 StyleId = string.Format("المحرف '{0}' له التكرار {1}", c, freq[c]), 62 }; 63 64 boxView.GestureRecognizers.Add(tapGesture); 65 66 bars.Add(boxView); 67 } 68 69 grdLettersHistogram.Children.AddHorizontal(bars); 70 } 71 72 private void TapGesture_Tapped(object sender, EventArgs e) 73 { 74 DisplayAlert("رسالة", ((BoxView)sender).StyleId, "اغلاق"); 75 } 76 } 77 } تكمن معظم الشيفرة البرمجيّة في هذا الملف ضمن معالج حدث نقر زر حساب التكرارات btnCalculate_Clicked الذي يمتد من السطر 14 حتى السطر 70. في البداية تمّ تعريف المتغيّر freq في السطر 16 ليكون من النوع العمومي Dictionary، وهو عبارة عن بنية معطيات مشهورة تُعرف بالقاموس dictionary. سيحتوي هذا المتغيّر على جميع الأحرف المختلفة الموجودة ضمن النص المُدخَل بالإضافة إلى عدد مرّات التكرار لكلّ حرف. أمّا في السطر 17 فقد تمّ تعريف المتغيّر bars وهو من نوع القائمة List. سيحتوي هذا المتغيّر على جميع عناصر BoxView التي سننشئها لاحقًا من الشيفرة البرمجيّة. بعد ذلك نعرّف المتغيّر tapGesture وهو من النوع TapGestureRecognizer. سنتمكّن من خلال هذا المتغيّر أن نُكسِب لأي عنصر BoxView إمكانيّة أن ينقر عليه المستخدم ليعرض عند ذلك الرسالة التي تحدثنا عنها مسبقًا. أمّا في السطر 19 فقد عرّفنا المتغيّر maxFreq الذي سيحوي التكرار الأكبر من بين الحروف المختلفة.,> ,> نعمل في السطر 21 على إضافة معالج الحدث TapGesture_Tapped (مصرّح عنه في الأسطر من 72 حتى 75) لحدث النقر Tapped للكائن tapGesture. بعد أن نحصل على دخل المستخدم ونضعه ضمن المتغيّر s في السطر 23، سندخل حلقة foreach التكراريّة بحيث نقرأ محتويات النص s محرفًا تلو الآخر، ونختبر كون هذا المحرف هو حرف أو رقم في السطر 27 لأنّنا لا نريد قبول الفراغات على سبيل المثال. في السطر 29 سنختبر في حال كان هذا المحرف موجود فعلًا ضمن القاموس freq من قبل أم لا وذلك عن طريق التابع ContainsKey. فإن كان غير موجود من قبل، سنعمل على إضافته في السطر 31، أمّا إذا كان موجود من قبل فسنعمل على إضافة التكرار الخاص به بمقدار واحد وذلك في السطر 35: freq[t] = ++freq[t]; لاحظ أنّ التعبير freq[t] يسمح لنا بالوصول إلى قيمة المفتاح t الموجودة في القاموس freq. بعد ذلك سنمسح محتويات مخطّط الشبكة في السطر 40، ثم سننتقل إلى حلقة foreach أخرى (الأسطر من 43 حتى 49) تسمح لنا بحساب التكرار الأكبر من بين المحارف الموجودة ضمن القاموس freq. في السطر 52 سنقوم بإجراء عمليّة حسابيّة بسيطة، حيث سنعمل على حساب واحدة القياس الخاصّة بالأعمدة (عناصر BoxView)، وبشكل أدق، واحدة القياس الخاصّة بارتفاع كل عنصر BoxView. وذلك من خلال تقسيم ارتفاع مخطّط الشبكة grdLettersHistogram على التكرار الأكبر maxFreq الذي حسبناه قبل قليل. سنخزّن واحدة القياس هذه ضمن المتغيّر measureUnit كما هو واضح. سندخل أخيرًا ضمن حلقة foreach أخرى (الأسطر من 54 حتى 67) وظيفتها إنشاء عناصر BoxView كلّ منها يمثّل محرف مختلف موجود ضمن القاموس freq، وبارتفاع يتناسب مع تكرار هذا المحرف ضمن النص المُدخل. ستعمل هذه الحلقة على إضافة كل عنصر BoxView إلى القائمة bars (السطر 66). تجدر الملاحظة أنّنا في السطر 61 قد أسندنا نصًّا توضيحيًّا إلى الخاصيّة StyleId لعنصر BoxView. يحتوي هذا النص على الحرف وعلى تكراره ضمن النص المُدخَل. في الواقع يمكننا دومًا استخدام الخاصيّة StyleId مع أيّ عنصر يرث من الصنف View لمثل هذه الأغراض. في النهاية سنعمل على إضافة الأعمدة (عناصر BoxView) الموجودة ضمن القائمة bars دفعةً واحدةً إلى مخطّط الشبكة من خلال العبارة التالي الموجودة في السطر 69: grdLettersHistogram.Children.AddHorizontal(bars); يعمل التابع AddHorizontal من الخاصّية Children لمخطّط الشبكة على إضافة عنصر أو مجموعة من العناصر (كما في مثالنا) إلى مخطّط الشبكة على أن تكون على نفس السطر (أفقيًّا horizontal) وذلك دفعةً واحدةً. يوجد في الواقع تابع آخر مماثل لهذا التابع وهو التابع AddVertical، ولكنّه يضيف العناصر على نفس العمود. من الممكن تحديد السطر أو العمود المراد الإضافة إليه عن طريق توابع ساكنة static مثل Grid.SetRow و Grid.SetColumn ولكنّنا لن نحتاج إلى مثل هذه التوابع لأنّنا سنترك الإعدادات الافتراضيّة كما هي. بقي أن نتحدّث عن معالج حدث النقر TapGesture_Tapped. في الحقيقة الشيء الوحيد الذي يفعله هذا الحدث هو إظهار رسالة تنبيه للمستخدم (السطر 74) عند نقره لأحد الأعمدة ضمن المخطّط (عنصر BoxView) تحتوي هذه الرسالة على النص الذي مرّرناه مسبقًا لعنصر BoxView ضمن الخاصيّة StyleId له. انتقل الآن إلى الملف App.cs واحرص على أن تكون بانية الصنف App على الشكل التالي: public App() { // The root page of your application MainPage = new GridBarChartPage(); } نفّذ البرنامج وأجر بعض الإدخالات النصيّة، وراقب النتائج. حاول نقر بعض الأعمدة لتظهر لك رسالة المعلومات حوله. الخلاصة تناولنا في هذا الدرس تطبيقًا عمليًّا مفيدًا في حساب التكرارات للأحرف ضمن نص ما، ومن ثمّ عرضها بشكل مخطّط تكراري histogram ضمن مخطّط الشبكة. يوضّح لنا هذا التطبيق مدى القوّة والمرونة التي من الممكن الحصول عليها من استخدام مخطّط الشبكة، هذا بالإضافة إلى إمكانيّة المزج بين استخدام مخطّط الشبكة ومخطّط المكدّس بكلّ سهولة ويسر. هناك الكثير من التطبيقات التي يمكن استخدام مخطّط الشبكة معها. وسنعمل في الدروس القادمة على استخدامه بشكل متكرّر في التطبيقات التي نطوّرها.

سنتعلم في هذا الدرس طريقة استخدام الشبكة المسماة بـ Axonometric grid، وهي شبكة ثلاثية الأبعاد في برنامج إنكسكيب، وسنتناول رسم مطبخ كمثال لطريقة الاستفادة من هذه الشبكة. قبل أن نبدأ سنختار من القائمة View الخيار Zoom ثم Zoom 1:1 من أجل تكبير الصفحة بشكل مناسب. ثم من قائمة File سنختار خصائص المستند Document properties ثم في تبويب الصفحة Page سنزيل العلامة عند عبارة Show page border ليحذف إطار الصفحة. من نفس النافذة نتجه لتبويب الشبكة Grid ومن القائمة المنسدلة سنختار Axonometric grid ثم نضغط على الزر New بجانب القائمة. سنظهر لنا الشبكة ثلاثية الأبعاد في الشاشة وهي عبارة عن شبكة وهمية إلا أنها ستساعدنا في الرسم. من الشريط العلوي سنفعل خيار الكبس والالتقاط Enable snapping ومنه نفعل Snap nodes, paths, and handle وكذلك نفعل Snap to grids وذلك ليسهل علينا الرسم على هذه الشبكة، ثم عن طريق اختيار أداة Bezier tool -والتي ستصحبنا إلى نهاية الدرس- سنرسم شكل متوازي الأضلاع وهو عبارة عن جدار من جدران المطبخ، وسنلاحظ أن الأداة تلتقط خطوط الشبكة الوهمية. نلونه باللون الأخضر وتزيل حدوده من لوحة التعبئة والحدود Fill and stroke. نكرر الشكل عن طريق تحديده وبالضغط على الزر الأيمن نختار Duplicate ثم من الشريط العلوي نعكسه أفقيا، ونحركه للطرف المقابل للجدار الأول. نرسم تحت الجدارين معينا وهو عبارة عن أرضية المطبخ، ثم نلونه باللون المناسب. نرسم مجموعة من المعينات على أرضية الطبخ والزوائد منها نرسم فيها بعض من الأشكال متوازية الأضلاع في الأطراف. لنتمكن من تحديد جميع المعينات والأشكال على أرضية المطبخ، سنختار أحدها ثم بالزر الأيمن نختار Select same ومنها نختار Stroke style ليختار لنا جميع الأشكال بنفس الحدود، ثم نزيل الحدود ونلونها باللون المناسب. سنرسم في زاوية المطبخ شكلا شبيه بحرف L وهو عبارة عن جزء من أثاث المطبخ. ولأن الأثاث ممتدا إلى الأرض سنرسم أشكالا متوازية الأضلاع تصل قطعة الأثاث للأرض، ثم نلونها باللون المناسب. سنرسم فرنا بجانب قطعة الأثاث التي رسمناها، ونلونه باللون المناسب. لاحظ أننا نلون الفرن من جميع جوانبه بنفس اللون إلا أنا نغير في درجات اللون لإضفاء بعدا أو بروزا للرسم. سنرسم في وسط الفرن خطوطا ثلاثة لتعطي الفرن عمقا في داخله. نكرر متوازي الأضلاع الذي في جهة باب الفرن ونلونه بلون أقتم من سابقه، ثم بالضغط على Ctrl+Shift نصغر حجمه ثم نكرر العملية بتكراره مجددا وتصغيره، وباختيار الشكلين الجديدين معا نتبع المسار: Path > Difference نرسم شكلا صغيرا متوازي الأضلاع أعلى باب الفرن وهو عبارة عن مقبضه، ثم نرسم داخل الفرن رفا شفافا. بنفس الطريقة وبنفس أداة Bezier سنرسم ثلاجة في الجهة اليمنى ببابين ولكل باب مقبض. سنرسم في قطعة الأثاث التي رسمناها سابقا أبوابا وأدراجا. سنرسم في أعلى قطعة الأثاث متوازي أضلاع وهو عبارة عن حوض لغسيل الأواني، ونجعل له عمقا برسم مضلع في جانبه الأيسر يتطابق ضلعين منه مع الجهة اليسرى من الحوض، ويمتد أحد أضلاعه لقاع الحوض، بينما يوازي الضلع الأخير ضلع الحوض الأيسر العلوي. سنرسم مضلعا بطريقة المضلع السابق ونجعل أحد أضلاعه يوازي ضلع الحوض الأيمن العلوي. نلونها بلون أقتم من لون الأثاث ونعيد الزوائد منها خلف الثلاجة من الشريط العلوي بخيار Page down. سنرسم الصنبور في زاوية الحوض وسنبدأ برسم مفتاحيّ الصنبور عن طريق رسم مكعبين بأداة الرسم المنحني Bezier، بنفس الطريقة التي رسمنا بها أرضية وجداري المطبخ إلا أنا سنعكس في الاتجاه ونغير الألوان. نجمع الشكل المكعب في مجموعة واحدة بتحديد أجزائه، ثم من الزر الأيمن نختار Group ثم نكرره ونصغر حجمه ونرفعه للأعلى ونضعه حيث الموضع الذي سنرسم فيه الصنبور. نكرر الشكل ونعيده للخلف مع كل تكرار إلى أن يتكون عندنا شكل الصنبور. في الحافة العلوية من الصنبور سنكرر الشكل المكعب ونصغره قليلا ونضعه في الطرف العلوي للصنبور. سنحدد أجزاء قطعة الأثاث السفلية دون تحديد الحوض والأبواب والأدراج ثم نكررها ونرفعها لأعلى جدار المطبخ، مع الضغط على Ctrl أثناء التحريك للمحافظة على نفس المحاذاة. سنلاحظ أن الأطراف للأثاث فارغة لأننا لم نرسمها مسبقا، لذا سنقوم بتكرار الشكل الأصغر من متوازي الأضلاع، ونعكسه ونضعه من الجانبين أو نرسمه مجددا بأداة Bezier. سنرسم بابا في الطرف الأيسر، وبابا زجاجيا في الطرف الأيمن. سنلون القطع الداخلية للباب بلون سماوي ليمثل لون الزجاج. وبأداة Bezier سنرسم أشكال متوازية لتشكل لمعان الزجاج ثم نلون هذه الأشكال بعد تكرارها في الفتحتين الزجاجيتين باللون الأبيض ونزيل حدودها. سنضيف لجميع الأبواب التي رسمناها والأدراج مقابض ونلونها بلون أقتم. اكتمل مطبخنا، وحتى نزيل هذه الشبكة نتجه للقائمة View ثم نزيل علامة صح من أمام عبارة Page grid. وبهذا نصل للنتيجة النهائية، ويمكننا عمل أفكار أخرى بنفس الطريقة.

منذ بدء استخدامنا لمفهوم التصميم المتجاوب في سير العمل الخاص بنا، ظهرت العديد من الأدوات كمحاولة لتسهيل عملنا وتسهيل تصميم المواقع المتجاوبة. ولكن مع ذلك فإنّه من الصعب عليك اختيار الأدوات المناسبة والتي سوف تفيدك حقًا في تطوير مشاريعك. وفي هذا المقال سوف أتحدث عن بعض الطرق التي طوّرتها لإنشاء نظام شبكي (grid) مرن وسلس يسمح بالتضمين (nesting) كما يعطيك الحرية الكاملة حول كيفية تصرّف هذا النظام الشبكي في كافة الأبعاد. كل هذا سوف يتم بمساعدة من مولّد النظام الشبكي المسمى Gridpak. الأمور التي سوف نتمكن من فعلهاعندما ننتهي من هذا الدرس سوف يكون لدينا نظام شبكي يمكنه فعل بعض مما يظهر في هذه المعاينة. ويمكن استخدامه في تنظيم تخطيط الصفحات كما في هذه المعاينة. متطلبات ما قبل البدءقبل أن نبدأ بمعرفة كيفية إنشاء هذا النظام الشبكي دعونا أولًا نقوم بتحديد ما نتوقعه من هذا النظام. هذه بعض النقاط التي أرى أنها مهمة عند استعمال أي نظام شبكي: الأعمدة دقيقة ويمكن توقعها لجميع أبعاد الأجهزة.التنسيقات والتوصيف (markup) يجب أن يكون بسيطًا وسهل الاستخدام.لا يعتمد على جهاز معين أو أبعاد معينة وأن يكون مرن بشكل كامل.قابل للتضمين (nestable) لأي عمق.مكون من وحدات (modular) وله سيطرة كاملة على الأعمدة في جميع الأبعاد.يجب أن يعمل من دون الحاجة لـ polyfill في المتصفحات القديمة.بالنسبة للنقطة الأخيرة، فكثير من المطورين يحبون استعمال respond.js لاستخدام ودعم الـmedia query في المتصفحات القديمة. الجيد في الأمر أنّ المتصفحات القديمة لا تتطلب أن يتم دعمها في أي جهاز سوى أجهزة سطح المكتب وأجهزة الحاسوب المحمول. لذلك سوف أقوم بتوضيح كيفية تحديد هذه المتصفحات وحفظ طلب http واحد. التنصيب1. وسم <html> ودعم تراجعي (fallback) لمتصفح IEسوف نحتاج في البداية إلى التأكد بأنّنا نستطيع تحديد المتصفحات القديمة وجعل تنسيقات CSS تعمل عليها. هذه الطريقة تم استيحاؤها من html5 boilerplate وتم توضيحها في هذه المقالة. <!doctype html> <!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> <!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]--> <!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->كل ما تفعله الشيفرة البرمجية في الأعلى هو إضافة فئة (class) إلى وسم <html> بناءً على المتصفح الذي يستخدمه الزائر. في هذا المقال سوف نقوم فقط بدعم متصفحات Internet Explorer بدءًا من الإصدار الثامن. وبهذا يمكننا أن نقوم بتحديد الإصدارات القديمة من متصفح Internet Explorer بالشكل التالي: /* target only IE8 with the following class */ .ie8 .my-class { ... } 2. التنسيقات الأساسية ووحدة Remإذا كنت لا تستخدم الوحدة rem في تطوير المواقع فإنني أنصحك بالقيام بذلك في أقرب وقت، فهي وحدة رائعة خصوصًا فيما يتعلق بأحجام الخطوط (font sizing). وهذه الوحدة رائعة لأنها وحدة نسبية ولكنها نسبية فقط إلى تعريف واحد وهو التعريف الذي يوضع في وسم <html>. وهذا يعني أنّ جميع الحسابات المعقدة التي تنتج عن استخدام الوحدة em سوف تختفي. أنظر إلى الشيفرة البرمجية التالية: html { ... font-size: 100%; ... } body { ... /* base font size: 16px (user agent dependant, but usually 16px) */ font-size: 1em; ... } ... .padding { /* IE8 fallback */ padding: 32px; padding: 2rem; /* 2 * 16px = 32px */ } بما أنّ متصفح IE8 لا يدعم وحدة rem فإننا نحتاج إلى استخدام وحدة px أيضًا. وسوف أريك لاحقًا كيف يمكن أن تساعدنا هذه الوحدة في تسهيل عملنا عند إنشاء الأنظمة الشبكية. 3. الحصول على Gridpakإذهب إلى موقع gridpak.com وحاول التلاعب بالخيارات حتى تحصل على ما يريحك. بالنسبة لي سوف أقوم بتحميل نظام شبكي بهذه الخيارات ولكن لك الحرية في اختيار ما تريده: الأبعاد: 480px، 640px، 960px وأعلى.12 عمود في جميع الأبعاد (12 عمود في الهواتف والأجهزة اللوحية وأجهزة سطح المكتب).padding بقيمة تساوي صفر.تباعد بين الأعمدة بقيمة (24px (24px gutter. يسمح لك Gridpak بأن تقوم بإنشاء gutters محددة لكل بعد من الأبعاد، ولكننا لن نقوم بذلك حتى تبقى الأمور بسيطة.حاول أن تكون قيم الـpadding والـgutters قيم ناتجة عن حسابات ضرب بسيطة بالنسبة لحجم الخط في الـ body. سوف يساعد هذا على تقليل القيم العشرية لأنّ المتصفحات تتعامل مع القيم العشرية بطريقة مختلفة وحتى نُبقي كل شيء أجمل. فعلى سبيل المثال لو كان الخط الأساسي هو 16px فإنّ التباعد بين الأعمدة يمكن أن يكون أحد القيم التالية: 8px (وهذه القيمة ناتجة عن ضرب 16 في 0.5).12px (وهذه القيمة ناتجة عن ضرب 16 في 0.75).24px (وهذه القيمة ناتجة عن ضرب 16 في 1.5).32px (وهذه القيمة ناتجة عن ضرب 16 في 2).بعد أن تقوم بتحديد جميع الخيارات قم بتحميل النظام الشبكي. 4. تفصيل الـ Gridpakمن أفضل خصائص Gridpak هو أنّك سوف تحصل على نظام شبكي دقيق ومتين فقط بعدة سطور من CSS، فقوة Gridpak تأتي من استعمال الخاصية box-sizing: border-box على جميع عناصر الموقع. ففي حالة استعمال border-box فإننا سوف نتمكن من الحصول على عمودين كل واحد منهما بعرض 50% وسوف يبقيان بجانب بعضهما وسوف تتمكن أيضًا من استيعاب أي قيمة border نعطيها له. ومع تطبيق بعض تنسيقات CSS يمكننا أن نُعطي الـgutters حواف (borders) شفافة مما يمنحنا أعمدة دقيقة ومناسبة: وفوق كل هذا فإنّ Gridpak يقوم بوضع كل نظام شبكي لكل بُعد داخل media query خاص به: /* * Declare a grid between 0 and 479px only */ @media screen and (min-width: 0px) and (max-width: 479px) { ... .span_1 { width:8.33333333333%;} .span_2 { width:16.6666666667%;} .span_3 { width:25.0%;} .span_4 { width:33.3333333333%;} .span_5 { width:41.6666666667%;} .span_6 { width:50.0%;} .span_7 { width:58.3333333333%;} .span_8 { width:66.6666666667%;} .span_9 { width:75.0%;} .span_10 { width:83.3333333333%;} .span_11 { width:91.6666666667%;} .span_12 { margin-left:0; width:100%; } } /* * Declare a grid between 480px and 639px only */ @media screen and (min-width: 480px) and (max-width: 639px) { ... } /* etc. */ ...إذا كان علينا أن نحدد عدد مختلف من الأعمدة لكل بُعد عندما نقوم باختيار الخيارات الخاصة بـGridpak (لنقل أنها عمودين للهواتف وأربعة للأجهزة اللوحية و12 لأجهزة سطح المكتب) فإنّ تعريفات media query سوف تمنحنا مرونة وسيطرة أكبر على الأعمدة بدل أن نقوم بجعل الهواتف والأجهزة اللوحية تأخذ عمود واحد فقط كما هو الحال في معظم الأنظمة الشبكية الأخرى. فعلى سبيل المثال يمكن لفئة (class) واحدة أن تجعل أحد الأعمدة يحتل العرض الكامل لصف ما (row) أو نصف العرض أو حتى سُدُسَ (1/6) العرض وذلك بناءً على بُعد المتصفح. كل هذا جيد ولكن هناك شيء ما وهو أننا نريد هذه الأعمدة أن تفعل ما أريده في جميع الأبعاد. 5. تطويع Gridpak كما نريداستعمال وحدة rem لتسهيل عملية الصيانةدعونا في البداية نقوم بأخذ أساس الـGridpak ونُعطيه إضافة حديثة (مع دعم المتصفحات القديمة): .row { margin-left: -24px; margin-left: -1.5rem; } /* Reusable column setup */ .col { border: 0px solid transparent; border-left-width: 24px; border-left-width: 1.5rem; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box !important; -moz-background-clip: padding-box !important; background-clip: padding-box !important; }إذا أردنا في المستقبل أن نزيل دعم المتصفح IE8 فيمكننا بكل سهولة فعل ذلك عن طريق إزالة القيم ذات الوحدة px (أي أن نُزيل الخاصية margin-left: -24px وborder-left-width: 24px). تكبير وتتابع النظام الشبكينريد أيضًا أن نتأكد بأنّ تخطيط الصفحة لا يصبح سيء عندما يقوم الزائر بتكبير محتوى الموقع. يمكنك قراءة هذا المقال حول استخدام الوحدات المتناسبة مع تعريفات الـmedia query. بطبيعة الحال فإنّ استخدام وحدة الـpixel في تعريفات الـmedia query لا يبدو وكأنّه يعمل بشكل جيد عندما يقوم الزائر بتكبير المحتوى لذلك سوف نستعمل وحدة em. زيادة على ذلك، فإنّ الـmedia queries تستخدم حجم الخط الأساسي المُعرّف في المتصفح (user agent font size)، وهذا يعني أننا -وبشكل عام- سوف نستخدم حجم الخط 16px في حساباتنا. دعونا نتخلّص من استعمال max-width في الـmedia query حتى نستغل قوة التتابع/التعاقب (cascade): /* * Declare a grid which will be effective from 0px */ @media screen and (min-width: 0) { ... } /* * Declare a grid which will be effective from 480px * 480 / 16 = 30em */ @media screen and (min-width: 30em) { ... } /* * Declare a grid which will be effective from 640px * 640 / 16 = 40em */ @media screen and (min-width: 40em) { ... } ...علاوة على إصلاح مشاكل التكبير، فإنّ هذا الأمر يسمح لعرض الأعمدة المُعرّفة داخل أبعاد أكبر بأن تقوم بإلغاء (override) تلك المعرفة لأبعاد أصغر. تسمية الأعمدة الخاصة ببُعد معينحتى نتمكن من السيطرة على الأعمدة في جميع الأبعاد بشكل أفضل فإننا سوف نحتاج إلى إعطائها أسماء فريدة حتى يحدث إلغاء للتنسيقات فقط إذا أردنا نحن ذلك. حتى أنّ متصفح IE8 سوف يحصل على تعريفات خاصة به. سوف أقوم بإضافة اسم في نهاية كل span لتحديد الأبعاد التي يعمل بها: /* * IE8 grid * This grid will only work in IE8, and at all widths */ .ie8 .span_1_ie8 { ... } .ie8 .span_2_ie8 { ... } ... .ie8 .span_1_ie8 { ... } /* * VIEWPORT ALPHA * Declare a grid which will be effective from 0px */ @media screen and (min-width: 0) { ... .span_1_vpalpha { ... } .span_2_vpalpha { ... } ... .span_1_vpalpha { ... } } /* * VIEWPORT BETA * Declare a grid which will be effective from 480px * 480 / 16 = 30em */ @media screen and (min-width: 20em) { ... .span_1_vpbeta { ... } .span_2_vpbeta { ... } ... .span_1_vpbeta { ... } } /* * VIEWPORT GAMMA * Declare a grid which will be effective from 640px * 640 / 16 = 40em */ ...لنبدأ الآن باستعمال النظام الشبكي. استعمال النظام الشبكيإنّ استعمال Gridpak لهو أمر في غاية السهولة، فجميع الأعمدة يجب أن تكون موجودة داخل عنصر حاوي وهذا العنصر يجب أن يملك فئة clearfix وهذ هو كل ما تحتاج معرفته. <!-- create a row with 2 columns and the following features: mobile -> 3 spans + 9 spans tablet -> 6 spans + 6 spans desktop -> 4 spans + 8 spans IE8 -> 4 spans + 8 spans --> <div class="row cf"> <div class="col span_3_vpalpha span_6_vpbeta span_4_vpgamma span_4_ie8"> content... </div> <div class="col span_9_vpalpha span_6_vpbeta span_8_vpgamma span_8_ie8"> content... </div> </div>تضمين الأعمدة يتبع نفس النمط: <!-- create a row with 2 columns spanning half the width for all viewports. Have both columns then contain 2 columns each, both spanning half the width of the parent column. --> <div class="row cf"> <div class="col span_6_vpalpha span_6_ie8"> <div class="row cf"> <div class="col span_6_vpalpha span_6_ie8"> content... </div> <div class="col span_6_vpalpha span_6_ie8"> content... </div> </div> </div> <div class="col span_6_vpalpha span_6_ie8"> <div class="row cf"> <div class="col span_6_vpalpha span_6_ie8"> content... </div> <div class="col span_6_vpalpha span_6_ie8"> content... </div> </div> </div> </div>قد تقول في نفسك أنّ هناك العديد من الفئات التي يلزم استخدامها، وقد يكون ذلك صحيحًا ولكني متأكد أنّك لن تجد نظام شبكي بهذه المرونة فقط باستعمال بعض الفئات. خاتمةلقد كانت رحلة طويلة احتوت على العديد من الأمور والأفكار المفيدة، وأتمنى أن تكون قد استفدت من هذا الدرس. ترجمة -وبتصرّف- للمقال Creating Nestable Dynamic Grids لصاحبه Larry Botha.

هناك الكثير من الأشخاص ممن يحبون سلسة الدروس التي تبدأ بتصميم مدونة باستخدام برنامج فوتوشوب وتنتهي بتحويل ذلك التصميم إلى قالب ووردبريس كامل، وهذا ما سنقوم به في هذه السلسلة المكونة من ثلاثة دروس، بحيث سنقوم أولًا بتصميم فكرة القالب باستخدام الفوتوشوب، بعدها سنقوم بـتحويل ذلك التصميم إلى نموذج HTML5 وأخيرًا إلى قالب ووردبريس كامل. سنقوم بتسمية القالب الذي سنقوم بإنشائه بالاسم "Typo"، بحيث سيعتمد القالب بشكل كامل على مبادئ الخطوط والطباعة (typography) حتى يكون التركيز بشكل كامل على المحتوى. وبما أننا نريد للتصميم أن لا يحتوي على أي عناصر رسومية (صور مثلًا) فإننا سوف نستخدم نظام شبكي (grid) صارم لتحقيق التوازن في التصميم وربط جميع عناصره معًا. سوف نحتاج في البداية إلى نظام شبكي لوضعه في مستند الفوتوشوب الذي سنقوم بإنشائه، ولقد قمت بالفعل بإنشاء واحد مكون من 12 عمودًا (column) باستخدام موقع grid.mindplay.dk، كما أنني أنشأت نمط (pattern) على شكل خطوط لتعمل كشبكة خطوط قاعدية (baseline grid) بحجم 24px. قم بملء طبقة الخلفية (background layer) بلون رمادي فاتح وبعدها قم بإضافة Noise بقيمة أقل من 3% وذلك عن طريق الذهاب إلى: Filter > Noise > Add Noise قم بضبط الإعدادات إلى Gaussian وMonochromatic. قم بتحميل واحدة من الـtextures الموجودة هنا وضعها داخل مستند الفوتوشوب الذي نعمل عليه وقم بتحريكها إلى أعلى يسار الملف. قم بإلغاء تشبع الـtexture وتغيير نمط المزج (blending mode) إلى Darken. سوف تحتاج أيضًا إلى تعديل مستويات (levels) الصورة لتصبح ساطعة أكثر لتتناسب مع الخلفية الرمادية الفاتحة. قلنا سابقًا بأنّ هذا التصميم سوف يعتمد بشكل كلي على الـtypography بما في ذلك الشّعار. سوف نستخدم خط Droid Serif في التصميم وسنقوم لاحقًا في الدروس التالية من هذه السلسلة باستخدام خدمة Google Web Fonts. قم الآن بإضافة عناصر القائمة الرئيسية (navigation) بناءً على أعمدة النظام الشبكي والخط القاعدي (baseline)، وضع بجانب كل عنصر رقمًا (كما هو مبين في الصورة بالأسفل) وقم بتغيير لون هذه الأرقام حتى تكون أقل بروزًا من النص (أعطها لونًا أفتح/أبهت من لون عناصر القائمة نفسها). اجعل هناك مسافة قليلة بين الترويسة (header) وبين المحتوى الرئيسي للمدونة. وبما أنّ عنوان التدوينة يعدّ من أهم العناصر في أي مدونة فسوف نختار حجم خط كبير. قم باختيار أداة الكتابة وأنشئ مربع نصّي وضع بداخله نصًا عشوائيًا، واجعل حجم الخط 14pt وهو خط مناسب للمحتوى واجعل التباعد بين السطور (leading) بقيمة 24pt. يجب علينا تمييز الروابط داخل محتوى المدونة بتنسيقات مختلفة. لذلك سوف نجعلها ذات لون أزرق، مائلة (italic) وتحتها خط (underline). قم الآن بجمع العناصر التي تمثل التدوينة الأولى داخل مجلد واحد (اختر العناصر واضغط على ctrl + G من لوحة المفاتيح). قم بتكرير هذا المجلد ليصبح لدينا تدوينتين وقم بمحاذاة التدوينة الثانية أسفل الأولى واجعل بينهما مسافة مناسبة. قم بإضافة رابطين أسفل التدوينات؛ الأول "الصفحة التالية (next page)" والآخر "الصفحة السابقة (previous page)"، وقم بإعطاء هذين الرابطين نفس تنسيقات الروابط (أزرق ،مائل وتحته خط) وقم بزيادة الحجم حتى يكونا بارزين بشكل أفضل. ابدأ الآن بإضافة محتوى القائمة الجانبية (sidebar) واجعلها على نفس مستوى المحتوى الرئيسي اعتمادًا على خطوط الخط القاعدي الخاص بالنظام الشبكي، وبما أنّ ترويسات/عناوين (headers) هذه القائمة ليست مهمة كثيرًا فسوف نجعل حجم الخط الخاص بها صغيرًا. بعض الروابط في المدونة يمكن أن توضع بجانب بعضها (تكون كلمة واحدة على الأغلب)، والبعض الآخر سيكون فوق بعضه البعض (تكون جمل كاملة كعنوان لمقال على سبيل المثال، لذلك لن يكون هناك مجال لوضعها بجانب بعضها). لنقم الآن ببناء مربع البحث. قم برسم مستطيل واملأه بلون مناسب (#f7f7f7 مثلًا)، وبما أنّ مربع البحث يعد من أهم العناصر في أي موقع فسوف نقوم بإعطائه بعض التأثيرات لتمييزه عن باقي عناصر الموقع. أنقر مرتين على طبقة مربع البحث لإضافة بعض التأثيرات. قم بإضافة تأثير Inner Shadow خفيف وتأثير Color Overlay بلون رمادي فاتح وStroke بحجم 1px بلون رمادي مناسب. قم بمحاذاة النص الموجود داخل مربع البحث بالنسبة للخط القاعدي. سيؤدي هذا إلى أن يصبح الهامش أعلى وأسفل النص الموجود داخل مربع البحث غير متساوي، وبالتالي سوف نحتاج إلى قص جزء من مربع البحث حتى نصلح الأمر. بقي علينا إضافة أيقونة بحث إلى يمين مربع البحث. يمكنك رسمها يدويًا أو استخدام أيقونة جاهزة لتسهيل المهمة عليك. عندما تنظر إلى مربع البحث من دون وجود النظام الشبكي فإنّه يبدو متناسقًا ومتوازنًا. فالعناصر من مثل الأزرار أو مربعات البحث تحتاج غالبًا إلى تحجيمها من دون استعمال نظام شبكي وذلك حتى تسمح للنص الموجود بداخلها بأن يبقى على خطوط النظام الشبكي ليبدو كل شيء متوازنًا. تبقى علينا الآن أن نقوم بإضافة الـfooter، لذلك قم برسم مستطيل بسيط في نهاية الصفحة واجعل هذا المستطيل يأخذ ارتفاع سطرين من أسطر النظام الشبكي وقم بإعطائه لونًا اسودًا وقم أيضًا بتغيير نمط المزج (blending mode) إلى Overlay. أخيرًا وليس آخرًا، قم بإضافة بعض العناصر إلى الـfooter. لاحظ أنّه مع أننا لم نستخدم في هذا التصميم أي صور أو عناصر بصرية، إلّا أنّ الصفحة بقيت جميلة ومؤثرة وذلك لاستخدامنا لشبكة خطوط قاعدية (baseline grid) مناسبة مما جعل كل شيء متناسقًا. يمكنك في الصورة رؤية النتيجة النهائية بدون وجود الخطوط الشبكية وكيف أنّ كُلّ شيء في الصفحة يبدو متوازنًا ومتناسقًا مع بعضه. ترجمة -وبتصرّف- للمقال Create a Typography Based Blog Design in Photoshop لصاحبه Iggy.

تعد شبكة الخلايا المنزلِقة Slidable grid وسيلة رائعة وجذابة لعرض أجزاء عدة من المعلومات في نفس المساحة؛ فتنزلق كل خلية من الشبكة عند النقر أو الحومان Hover وتعرِض محتوى إضافيا. سنتطرق خلال هذا الدرس إلى عملية إنشاء شبكة خلايا منزلقة ابتداءً من وسوم HTML الضرورية، التنسيق وجعل الشبكة متجاوبة Responsive؛ مع إضافة خطوط أيقونات الويب. سنعرِض أيضا لكيفيّة استخدام jQuery لإضافة بعض التأثيرات على شبكة الخلايا. هكذا ستبدو شبكة الخلايا المنزلِقة بعد اكتمال الدّرس. إنشاء الشبكة في HTMLفي ما يلي وسوم HTML المستعملة لإنشاء الشبكة. سنشرح عملها بالمختصر. نحتاج لعنصر تغليف Wrapping يحيط بالشبكة، ثم أجزاء مستقلة بتموضع نسبي Relative positioning داخل عنصر التغليف. تمثل هذه الأجزاء الخلايا المرئية المكونة للشبكة. توجد داخل كل خليّة مساحتان بتموضع مطلق Absolute تملأ كل واحدة منهما طول وعرض الخلية تماما. سنضيف تأثيرات إلى كل من المساحتيْن بحيث تكون كل مساحة إما خارج مجال الرؤية في الصفحة أو مرئية. <div id="services" class="cf"> <section class="service"> <div class="service-icon"><span class="icon-web"></span><br/>التصميم للويب</div> <div class="service-description"><p>تقديم لطيف حول التصميم للويب وما نقدمه من خِدْمات في هذا المجال</p></div> </section> <section class="service"> <div class="service-icon"><span class="icon-graphic"></span><br/>التصميم الغرافيكي</div> <div class="service-description"><p> ... </p></div> </section> <section class="service"> <div class="service-icon"><span class="icon-logo"></span><br/>تصميم الشعارات</div> <div class="service-description"><p> ... </p></div> </section> <section class="service"> <div class="service-icon"><span class="icon-dev"></span><br/>التطوير للويب</div> <div class="service-description"><p> ... </p></div> </section> <section class="service"> <div class="service-icon"><span class="icon-3d"></span><br/>التصميم ثلاثي الأبعاد</div> <div class="service-description"><p> ... </p></div> </section> <section class="service"> <div class="service-icon"><span class="icon-illustration"></span><br/>إيضاحات</div> <div class="service-description"><p> ... </p></div> </section> </div> <!-- END #services -->يوجد div بمعرّف services وصنف Class اسمُه cf؛ توجد داخله ستة عناصر section وبداخل كل section عنصرا div، على النحو الذي ذكرناه سابقا. يوجد بداخل الأول من عنصري div عنصر span لنضع داخله أيقونة وعنوان. في عنصر div الآخر يمكن إدراج المحتوى الإضافي (وصف مثلا). حرصنا على جعل السّكربت يظهر في حالة عدم وجود Javascript لدى الزائر، فيظهر لديه المحتوى دون التأثيرات. ننتقل الآن إلى تنسيق المحتوى عن طريق CSS وتهيئته لعمل تأثيرات عليه بواسطة jQuery. تنسيق الشبكة عن طريق CSSيتكوّن ملف CSS من ثلاثة أجزاء: الأساسي للعمل مع jQuery، شفرة خط الأيقونة، والأخير تنسيقات لمظهر أجمل. في ما يلي الجزء الأول. #services .service { width: 33%; float: left; padding: 0.5em; min-height: 200px; overflow: hidden; position: relative; border: 1px solid #eee; } @media screen and (max-width: 600px) { #services .service { width: 50%; } } @media screen and (max-width: 320px) { #services .service { width: 100%; } } #services .service .service-icon, #services .service .service-description { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #fff; padding: 50px 0; color: #222; } #services .service .service-description { left: 100%; background: #249EC2; color: white; padding: 50px; } #services .service .service-description:hover { cursor: pointer; }نشرح عمل الأسطر السابقة. نستهدف أولا الخلايا (service.) لترتيبها داخل الشبكة بإعطائها عرضا مائعا Fluid وحدا أدنى للارتفاع، وجعلها تطفو إلى اليسار (لهذا السبب سنجعل - في ما بعد - عنصر التغليف يمنع المحتوى من الانسياب باستخدام خاصية clear. راجع درس أساسيات الطوفان Float في أوراق الأنماط المُتتالية CSS بهذا الخصوص). ثم - وهذا مهم جدا - نعطي القيمة hidden لخاصية overflow (لو لم نفعل ذلك لعُرِض المحتوى الإضافي طول الوقت) مع تحديد التموضع النسبي position: relative. نستخدم بعدها استعلامات الوسائط Media queries لأخذ عدة شاشات في الحسبان وبالتالي جعل الشبكة متجاوبة. تعني هذه الشيفرة أن تصميم الشبكة سيتكون من ثلاثة أعمدة بالنسبة لسطح المكتب (عرض الشاشة أكبر من 600px)، ثم يتحول إلى عموديْن إذا نقُص عرض الشاشة وفي الشاشات الصغيرة يصبح عمودا واحدا. نستهدف الآن - بعد الانتهاء من تجهيز الخلايا - العناصِر الداخلية، service-icon. وservice-description.؛ ونعطيها تموضعا مطلقا (لهذا السبب أعطينا حدا أدنى للارتفاع في النمط السابق) ثم نضعها في يسار الجزء العلوي. بالنسبة لموضع الوصف service-description. فسنغيره بعد قليل. نجعل العنصريْن الداخليّيْن يملآن كامل العنصر الأب. البقية للتأثير المرئي. أخيرا نستهدف عنصُر الوصف لوحده فنعطي القيمة %100 لخاصية left مما يجعله بالكامل يندفع إلى اليمين خارج مجال الرؤية نظرا لضبط خاصية overflow على hidden ضمن service.. سنستهدغ قيمة left هذه في jQuery، وهو ما يجعل من المهم تعريفها الآن. خط الأيقونةننتقل الآن إلى الخطوة التالية وهي تعريف أسماء الأصناف المُستخدمة ضمن HTML لتُعرَض الأيقونات الصحيحة؛ نستخدم font-face@ للحصول على خطوط الأيقونات. نبحث أولا عن وسيلة لإيجاد خط أيقونات مناسب لاحتياجاتنا. توجد عدة خيّارات اخترنا من بينها موقع Fontastic. تختار على الموقع الأيقونات التي ترغب في استخدامها، يعتمد الاختيار طبعا على نوعية المشروع الذي تعمل عليه. يمكنك تغيير بعض المعلومات مثل أسماء أصناف الأيقونات وأسماء الخطوط على النحو المبيَّن أدناه. اخترنا نفس الأسماء الموجودة في سكربت HTML من أجل تطابق دون مشاكل. يعطيك الموقع مجلدا لتنزيله مع شفرة للاستخدام. ضَع مجلد الخطوط في مجلد CSS (أو أي مجلد آخر يناسبك) ثم خذ الشفرة وضعها في ملف CSS. إليك ما تحتاجه: @font-face { font-family: "slidable-grid"; src:url("fonts/slidable-grid.eot"); src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"), url("fonts/slidable-grid.woff") format("woff"), url("fonts/slidable-grid.ttf") format("truetype"), url("fonts/slidable-grid.svg#slidable-grid") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "slidable-grid" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; font-size: 4em; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-web:before { content: "a"; } .icon-graphic:before { content: "b"; } .icon-logo:before { content: "c"; } .icon-dev:before { content: "d"; } .icon-3d:before { content: "e"; } .icon-illustration:before { content: "f"; }إن أعدت تحميل المشروع فستظهر الأيقونات. لم يتبقَّ لنا سوى إكمال التنسيق. تنسيقات نهائيةنستكمل ما بقي من تنسيقات. في ما يلي الشفرة التي تضع الشبكة في الوسط وتعطيها العرض الأقصى. نضيف تأثيرا للحوم على الأيقونات: @import url(reset.css); * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } .cf { *zoom: 1; } body { font-family: 'Exo 2', sans-serif; /* Google Font <a href="http://google.com/fonts">http://google.com/fonts</a> */ text-align: center; color: #999; background: #444; -webkit-font-smoothing: antialiased; } #services { max-width: 850px; margin: 0 auto; } #services .service .service-icon:hover { cursor: pointer; color: #249EC2; } #services .service .service-icon span { display: block; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; } #services .service .service-icon:hover span { position: relative; bottom: 5px; }إضافة jQueryنهدف من خلال استخدام jQuery إلى إعادة استخدام نفس الشفرة البرمجية للشبكة كاملة. ننتظر النقر على إحدى خلايا الشبكة (صنف service) وعند حدوثه نحرك مكان الأيقونة ونزيحها خارج الإطار المرئي ثم نجلب الوصف لعرضه. نضيف أيضا صنفا جديدا (open) لمساعدتنا في معرفة العنصر المرئي. اجلب jQuery إلى الصفحة ثم أضف الشفرة التالية في ملف أو في وسم <script>: $(document).ready(function() { $('.service').click(function() { var $this = $(this); if ($this.hasClass("open")) { $this.find('.service-icon').animate({left: "0"}); $this.find('.service-description').animate({left: "100%"}); $this.removeClass("open"); } else { $this.find('.service-icon').animate({left: "-100%"}); $this.find('.service-description').animate({left: "0"}); $this.addClass("open"); } }); });بعد أن تجهز الصفحة وعند النقر على كتلة service. نختبر هل لدى هذه الكتلة صنف open أم لا. في البداية لا يوجد قسم صنف لدى العناصر service مما يعني أن الاختبار سيتجاوز مباشرة إلى تنفيذ الأوامر الموجودة في else، فنبحث عن عنصر div الذي توجد به الأيقونة (service-icon.) ونحركه إلى اليسار ب%100-؛ ثم نعثر على الوصف ونحركه إلى اليسار عند 0 مما يجعله مرئيا. في الأخير نضيف صنف open إلى service. يعني هذا أنه سيكون لدى service بعد النقر عليه وإظهار المحتوى الإضافي صنفٌ باسم open على النحو الذي يظهر في الصورة التالية. يمكننا بالعودة إلى تعليمة if في الشفرة السابقة أن نرى أنه بالنقر على كتلة service. لديها صنف باسم open فإن الأيقونة تعود إلى الوضعية 0 والوصف ينزاح ب%100. نزيل بعدها الصنف open لتمكن إعادة استخدامه والنقر عليه أكثر من مرة. خاتمة وأفكارلدينا الآن نظام بشبكة لدى كل خلية منها وجهان. يمكن التعديل على الفكرة ومواءمتها حسب طبيعة الاستخدام. يوجد في الصفحة التجريبية مثال آخر يُبدَل فيه وجه الخلية عند الحوم فوقها وليس عند النقر. يمكن الحصول على هذا التأثير عبر إبدال دالة ()click. ب()hover. في شفرة jQuery. يعود الخيار لك. يمكنك أيضا تغيير اتجاه التحريك بإبدال left بالقيمة المناسبة. سرعة الحركة يمكن التعديل عليها هي الأخرى. ابتعد عن الإكثار من استخدام شبكة الخلايا المنزلقة بدون داع، ولا تستعملها إلا إذا كانت تضيف إلى تجربة المستخدم. يمكن تنزيل نتيجة هذا الدرس demo.zip. ترجمة بتصرف لمقال How to create a slidable grid with jQuery لصاحبه Harry Atkins.