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

إذا كنت من مستخدمي برنامج مايكروسوفت وورد الدائمين -ومن منّا لا يستخدمه- فلا بُدّ لك من التعرّف على واحدة من أهم الخصائص التي تساعدك على إنشاء مستندات متّسقة ومنسقة بصورة جيّدة؛ الأنماط Styles. تحتوي المستندات عادة على العديد من الفقرات، كالعنوان، المَتْن، العناوين الرئيسية، العناوين الفرعية، تسميات توضيحية، اقتباسات، إلخ. وعند تنسيق هذه الفقرات باستخدام النمط المناسب لكل فقرة، لا يؤدي ذلك إلى جعل المستند أكثر جاذبية من الناحية البصرية فحسب، وإنّما يساعد القرّاء على فهم ما يقرؤونه بشكل أفضل. في هذا الدرس سنتعلّم كيفية تطبيق الأنماط السريعة التي يوفّرها وورد بشكل افتراضي، وكذلك كيفية إنشاء أنماط جديدة إن لم نكن نرغب في استخدام الأنماط الجاهزة. تطبيق الأنماط السريعة توجد العشرات من الأنماط الجاهزة في وورد والتي يمكن الوصول إليها من معرض الأنماط ضمن تبويب الصفحة الرئيسية Home. الصورة أدناه توضّح مستندًا بسيطًا من صفحتين يحتوي على نصوص عادية غير منسقة، ويتكون من عنوان ومجموعة عناوين رئيسية وفرعية بالإضافة إلى محتوياتها: تبدو العناوين في المستند أعلاه غير بارزة بسبب عدم تنسيقها بتنسيق خاص، وهذا قد يشتت القارئ بعدم معرفة العنوان الذي ينتمي إليه ذلك المحتوى الذي يقرأه من النص. يمكننا تنسيق العناوين، أو غيرها، بالطريقة العادية باستخدام الأوامر الخاصة بتنسيق النصوص في تبويب الصفحة الرئيسية كحجم الخط، لونه، سمكه، إلخ. لكننا سنقوم بتطبيق الأنماط المناسبة للسرعة، السهولة، ولفائدة الأنماط الكبيرة في جعل بعض خصائص وورد تعمل بصورة مثالية، كالفهارس مثلا. نحدد الفقرة/النص التي نريد تطبيق النمط عليها ثم نذهب إلى معرض الأنماط في تبويب الصفحة الرئيسية Home، نمرر المؤشر فوق الأنماط المختلفة لعرض معاينة مباشرة، وعندما نحدد النمط المناسب ننقر عليه لتطبيقه: كما نلاحظ، هناك العديد من الأنماط المختلفة كنمط للتوكيد، نمط للاقتباس، نمط للعناوين الفرعية، إلخ. لقد قمنا باختيار النمط Title لأنه ما يناسب عنوان المستند، وعند تطبيقه يتغيّر حجم ونوع الخط (أو لونه في أنماط أخرى) تلقائيا. قمنا بتطبيق أنماط أخرى على بقية الفقرات (نمط Heading 1 للعناوين الرئيسية، ونمط Heading 2 للعناوين الفرعية). ويمكننا الاستدلال إلى نوع النمط المطبّق على الفقرة بوضع المؤشر فوقها، إذ سيتغّير النمط في معرض الأنماط كلما قمنا بتغيير موضع مؤشر الكتابة: يمكننا الوصول إلى هذه الأنماط أيضا وتفاصيلها من جزء الأنماط Styles Pane. ننقر على أيقونة مشغّل جزء الأنماط في أسفل يمين خانة الأنماط لفتحها: نضع مؤشر الكتابة عند الفقرة التي نريد تطبيق النمط عليها، ثم ننقر على النمط من جزء الأنماط. من فوائد هذه القائمة أنّها تعرض تفاصيل النمط (نوع الخط، حجمه، المسافات البادئة، إلخ) بمجرّد تمرير المؤشر فوقه: وهناك طريقة أخرى لعرض الأنماط، بفتح جزء تطبيق الأنماط Apply Styles Pane: يحتوي هذا المربّع على نفس الأنماط السريعة بالإضافة إلى المزيد من الأنماط الأخرى، والكثير منها خاصّة بالجداول. يمكننا كتابة اسم النمط في حقل الاسم Style Name للبحث عنه أو تصفّح الأنماط في القائمة وتحديدها: هل ترغب في الحصول على مستندات وورد احترافية؟ وظّف مدخل بيانات محترف من مستقل لتحرير مستنداتك وتنسيقها أضف مشروعك الآن تغيير مجموعة الأنماط Styles Set إنّ مجموعة الأنماط الموجودة ضمن معرض الأنماط هي المجموعة الأساسية والافتراضية للمستند. لدينا خيار تغيير تنسيق هذه الأنماط بالكامل من تبويب تصميم Design، إذ يمكننا انتقاء مجموعة أنماط جديدة تختلف عن المجموعة الافتراضية من حيث خصائص الخط والفقرات. نمرر المؤشر فوق أحد التنسيقات من معرض تنسيق المستند Document Formatting لعرض معاينة مباشرة، وعند اختيار المجموعة المناسبة ننقر عليها لاختيارها: بعد اختيار مجموعة الأنماط الجديدة سيتغيّر مظهر المستند بالكامل، وكذلك ستتغيّر الأنماط السريعة في معرض الأنماط تبعا لذلك: ويمكننا تغيير النسق Theme، الخطوط Fonts، الألوان Colors، تباعد الفقرات Paragraph Spacing، وغيرها من الخيارات من نفس التبويب أيضا: ملاحظة: إذا كنت تستخدم إصدارا أقدم من 2013 فستجد معظم هذه الخيارات مجموعة ضمن أمر تغيير الأنماط Change Styles في تبويب الصفحة الرئيسية Home: مصدر الصورة مسح الأنماط والتنسيقات قد نحتاج أحيانا إلى مسح كافة التنسيقات وكافة الأنماط المطّبقة على فقرات المستند، وخصوصا إن لم نكن نحن من قام بإنشاء المستند من الأصل. في هذه الحالة من الأفضل إزالة هذه التنسيقات والأنماط ثم إعادة تنسيقها من جديد لتسهيل تمييز الفقرات التي قمنا بتطبيق تنسيقاتنا الخاصة عليها. للقيام بذلك نحدد الفقرة التي نريد مسح تنسيقاتها ثم نفتح جزء الأنماط وننقر على مسح الكل Clear All: أو ننقر على أمر مسح التنسيق بأكمله Clear All Formatting من خانة خط Font في تبويب الصفحة الرئيسية Home: نكرر الخطوة أعلاه على جميع الفقرات المنسّقة. لكنّ هذه العملية تصبح مملة ومضيّعة للوقت إذا كان المستند طويلا أو كانت التنسيقات والأنماط كثيرة ومعقّدة، ولذلك من الأفضل تحديد كافة محتويات المستند (Ctrl+A) ثم ننقر على مسح الكل Clear All: من الجدير بالذكر أنّ الأنماط تخلّصنا من الحاجة إلى إضافة فقرات إضافية من أجل ضبط التباعد بين الفقرات. فإذا كان المستند يحتوي على نصوص عادية بالشكل التالي: سيكون من الصعب تمييز بدايات الفقرات وسواء كانت عناوين أو غيرها، ولذلك سنضطر إلى إضافة فقرات إضافية بين العنوان والمتن: لكن عند تطبيق النمط المناسب على كل فقرة، سيتم ضبط تباعد الفقرات تلقائيا، وهذه فائدة أخرى لاستخدام الأنماط. إذا، فالأنماط هي عبارة عن خيارات تنسيقية تحسّن من مظهر المستند وتجعله سهل القراءة، كما توفّر الكثير من الوقت وتسّهل استخدام عدد من الخصائص الأخرى في البرنامج كالفهارس Table of Contents، الإسناد الترافقي Cross-reference، الارتباطات التشعبية Hyperlinks، إلخ. انشر كتابك عبر الإنترنت وأخرج أفكارك للنور دع مبدعي خمسات يساعدونك في تأليف كتابك ونشره وبيعه وترويجه عبر الإنترنت اطلب خدمتك الآن إنشاء أنماط جديدة بالرغم من التعدد في الأنماط الجاهزة المتوفرة في معرض الأنماط ومجموعات الأنماط المتوفرة في معرض تنسيق المستند، إلّا أنّنا في بعض الأحيان نحتاج إلى أنماط مخصصة تكون سمة للمستندات التي ننشئها. ومهما كان نوع النمط، يمكننا إنشاءه بعدة خطوات بسيطة. مثلا، في المستند الموضّح في الصورة أدناه، والذي لم يُطبّق عليه أي نمط أو تنسيق، إذا رغبنا في تنسيق كلمة "Workability" بنسق مخصص بحيث تظهر في كل الفقرات بهذا التنسيق يمكننا إنشاء نمط بهذا التنسيق وإضافته إلى معرض الأنماط. نقوم أولا بتنسيق الكلمة حسب ما هو مرغوب (قمنا بتغيير اللون ونوع الخط، وكذلك جعلناه مائلا Italic) ثم تحديدها (كلها أو جزء منها) والنقر على السهم في أقصى يمين معرض الأنماط، ثم نختار إنشاء نمط Create a Style: في مربع الحوار الذي سيظهر نقوم بإدخال الاسم المرغوب للنمط ثم ننقر على موافق OK: ستتم إضافة النمط الجديد إلى معرض الأنماط، وبذلك يمكننا البحث عن كلمة "Workability" في كافة فقرات المستند وتطبيق هذا النمط عليها: أو بطريقة أكثر اختصارا باستخدام خاصية الاستبدال Replace. نحدد كلمة "Workability" ثم ننقر على أمر استبدال Replace من تبويب الصفحة الرئيسية Home: من مربع الحوار Find and Replace نكتب نفس الكلمة (Workability) في حقل استبدال بـ Replace With ثم نتأكد من وضع مؤشر الكتابة في هذا الحقل، وننقر على Format ونختار Style: نحدد النمط الذي قمنا بإنشائه في الخطوة السابقة، ثم ننقر على موافق OK: بعد ذلك ننقر على زر استبدال الكل Replace All: وبذلك سيُطبّق النمط على جميع الكلمات مرّة واحدة، بدلا من تطبيقه على كل كلمة على حدة. بالإضافة إلى طريقة إنشاء نمط جديد التي قمنا بشرحها أعلاه، بإمكاننا تعريف نمط جديد وتخصيص كافة خياراته. مثلا إذا رغبنا في تعريف نمط للفقرات التي تمثل محتوى العناوين الفرعية، نضع مؤشر الكتابة داخل إحدى هذه الفقرات، ثم ننقر على زر نمط جديد New Style من جزء الأنماط: في مربع الحوار الذي سيظهر نقوم بإدخال اسم النمط، ونحدد نوعه Style Type سواء كان حرف Character، فقرة Paragraph، جدول Table، إلخ. والفرق بين الحرف والفقرة هو أنّ الأول سيُطبق على الكلمة التي يوجد عندها مؤشر الكتابة فقط، أما الثاني فيُطبّق على كامل الفقرة التي يوجد عندها مؤشر الكتابة. من قائمة Style based on نحدد النمط الذي نريد بناء نمطنا الجديد على أساسه (أي نستخدم خصائص ذلك النمط كأساس نبدأ بتعديل خياراتنا منه). نعدّل الخيارات الأخرى كالمسافة البادئة للفقرة، لون النص، حجم الخط، سمكه، نوعه، وغيرها. ويمكن الاستفادة من حقل المعاينة لمعرفة كيف سيبدو النمط الذي نقوم بإنشائه. بعد الانتهاء من تعديل جميع الخيارات ننقر على موافق OK: سيتم إدراج النمط الجديد في معرض الأنماط السريعة، ويمكننا تطبيقه على الفقرات بوضع مؤشر الكتابة فوق الفقرة ثم النقر على النمط: تعديل النمط إذا كنا نرغب في تعديل خيارات النمط الذي قمنا بإنشائه، أو أي نمط آخر موجود ضمن معرض الأنماط، ننقر بزر الفأرة الأيمن عليه ثم نختار تعديل Modify: أو بطريقة أخرى، ننقر على السهم بجانب اسم النمط في جزء الأنماط ونختار تعديل Modify: وفي الحالتين سيُفتح نفس مربع الحوار، Modify Style، ومنه نقوم بالتعديل المرغوب. سنقوم مثلا بإضافة مسافة تباعد عند نهاية الفقرة، ونلاحظ أنّ أي خيار نقوم بتخصيصه يظهر في المربّع السفلي الذي يوضّح خصائص النمط: بعد الانتهاء ننقر على موافق OK، وسيتم تطبيق التغيير في النمط على جميع الفقرات المُطبّق عليها هذا النمط، وبهذا نختصر الكثير من الوقت بدلا من إضافة تباعد لكل فقرة على حدة. استخدام مركز التحكم بالنمط Style Inspector مع تعدد طرق تنسيق النصوص في وورد، قد يصعب أحيانا معرفة نوع التنسيق المطبّق على فقرة أو كلمة معيّنة. لكن باستخدام أداة Style Inspector يمكننا معرفة بالضبط فيما إذا تم تطبيق تنسيق يدوي على النص بالإضافة إلى تنسيق النمط المُطبّق عليه. يمكننا أيضا استخدام خيارات Style Inspector وبالتحديد Reveal Formatting إذا كنا نريد معرفة تفاصيل النمط وتخصيص خياراته بدقة. للوصول إلى هذه الأداة، نفتح جزء الأنماط وننقر على زر Style Inspector: في نافذة مركز التحكم بالنمط يُوضَّح النمط المطبّق على الفقرة/الكلمة التي يوجد عندها مؤشر الكتابة. ومن خلاله يمكننا إزالة نمط الفقرة الحالي المخصص وإعادة تعيين النمط العادي Normal بالنقر على زر Reset to Normal Paragraph Style: أو إزالة التنسيق المطبّق يدويا على النص مع الإبقاء على التنسيق الآتي من النمط بالنقر على زر Clear Character Formatting: ولمعرفة تفاصيل النمط الحالي والتعديل عليها ننقر على زر Reveal Formatting: من خلال جزء Reveal Formatting بإمكاننا رؤية جميع المعلومات الخاصة بتنسيق النمط، وعند النقر على كل خيار ستُفتح نافذة مستقلة يمكننا بواسطتها تخصيص خيارات أكثر تفصيلا: فعند النقر على الخط Font مثلا، سيفتح مربع حوار يحتوي على كل ما يتعلّق بالخط من خيارات يمكن تخصيصها: وعندما ننقر على التباعد Spacing سنتمكن من تخصيص خيارات مسافات التباعد بدقة أكبر، حتى أنّه بالإمكان إدخال القيم يدويا، وهذا ما لم نتمكن من فعله في مربع الحوار Modify Style: إضافة النمط إلى المستندات الجديدة أو المستندات الموجودة عندما نقوم بإضافة النمط إلى معرض الأنماط السريعة، فإنّه وبشكل افتراضي يُضاف إلى المستند الحالي فقط. لكن هناك إمكانية إضافته إلى كل المستندات الجديدة التي نقوم بإنشائها أو المستندات الموجودة مسبقا. نقوم بفتح مربع الحوار Modify Style بالنقر بزر الفأرة الأيمن على النمط الذي قمنا بإنشائه ثم نختار Modify. عند فتح مربّع الحوار، نلاحظ أنّ الخيار Only in this Document محدد تلقائيا، وهذا يعني أنّ النمط الحالي مضاف إلى المستند الحالي فقط. لجعل النمط يُضاف إلى كل مستند جديد يُستخدم فيه القالب الحالي نحدد الخيار New Document based on this template: وبما أنّ القالب الذي نستخدمه في هذا المثال هو القالب العادي Normal، فإنّ هذا النمط سيُضاف إلى معرض الأنماط السريعة كلما قمنا بفتح مستند جديد بقالب فارغ: إما لإضافة النمط إلى مستند موجود مسبقا، نقوم بالنقر على زر إدارة الأنماط Manage Style من جزء الأنماط: في مربع الحوار الذي سيظهر ننقر على زر استيراد/تصدير Import/Export: في مربع الحوار Organizer لدينا مربعان، الأول (على جهة اليسار في الصورة أدناه) يحتوي على الأنماط الموجودة في المستند الذي نعمل عليه، Workability. والثاني (على جهة اليمين في الصورة أدناه) يحتوي على الأنماط الموجودة في القالب الافتراضي Normal: ما نريد القيام به هو نسخ النمط الذي قمنا بإنشائه سابقا باسم "Body Text1" من المستند الحالي، إلى مستند محفوظ لدينا على الجهاز باسم "The Bailey Method"، لذلك سنقوم أولا بإغلاق مستند القالب Normal بالنقر على زر Close File (المحدد في الصورة أعلاه)، ثم النقر على Open File: عند الانتقال إلى المجلد الذي نحفظ فيه المستند، سنلاحظ أنّه لا يحتوي على أي مستندات، وذلك لأنّ الامتدادات المحددة هي قوالب وورد All Word Templates. نقوم بتغيير هذا الخيار إلى كافة مستندات وورد All Word Documents: نحدد المستند المطلوب، وهو "The Bailey Method" في هذا المثال ثم ننقر على فتح Open: ستتم إضافة الأنماط الموجودة في هذا المستند إلى المربع على جهة اليمين. نحدد النمط الذي نريد نسخه من مستند "Workability"، وهو "Body Text1" ثم ننقر على زر نسخ Copy، وستتم إضافته إلى قائمة أنماط المستند "The Bailey Method": نغلق مربع الحوار Organizer ونحفظ التغييرات بالنقر على Save. عندما نقوم بفتح المستند "The Bailey Method" في المرة القادمة، سنجد أن النمط Body Text1 موجود ضمن معرض الأنماط السريعة:

من السهل أن ننجرف وراء فكرة أنّ المستخدم سيقرأ كلّ حرف نكتبه في واجهتنا، وسيُشاهد كل بكسل، لكنّ الحقيقة عكس ذلك، فالمستخدم يمسح الصّفحة بعينيه سريعًا، ثمّ يتوقّف عند جزء ما يلفت انتباهه. سنتعلّم اليوم عن أسلوبي مسح الواجهة: النّمط Z والنّمط F، والتّراتب المرئيّ. قد تظنّ أن تجربة استخدام تطبيق أو موقع مختلفة عن تجربة التّطبيقات والمواقع الأخرى، إلّا أنه في الحقيقة يمكن بسهولة توقّع نمط اطّلاع المستخدمين على الواجهة. فهرس سلسلة مدخل إلى تجربة المستخدم: مدخل إلى تجربة المستخدم User Experience فهم ودراسة المستخدمين في مجال تجربة المستخدم دراسة الشريحة المستهدفة في مجال تجربة المستخدم كيفية التصميم للأجهزة المختلفة هندسة المعلومات في تجربة المستخدم تعرف على أنماط التصميم في مجال تجربة المستخدم أشياء لا يمكن اعتبارها رسوما تخطيطية (Wireframes) في مجال تجربة المستخدم تعرف على الرسوم التخطيطية (Wireframes) في مجال تجربة المستخدم مفهوم الثقل المرئي (Visual Weight) والألوان في مجال تجربة المستخدم التكرار ومخالفة الأنماط في مجال تجربة المستخدم المحاذاة والقرب في مجال تجربة المستخدم تعرف على أساليب مسح الواجهة والتراتب المرئي في مجال تجربة المستخدم (هذا الدرس) أساليب الإطلاع في مجال تجربة المستخدم: التصفح، البحث والاكتشاف تصميم هيكل صفحة الويب والعناصر الأساسية في مجال تجربة المستخدم الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم استخدام علم النفس في مجال تجربة المستخدم لتكييف المستخدم وإقناعه كيف تغير الخبرة من تجربة المستخدم؟ تصميم تجربة المستخدم من خلال بيانات وإحصائيات المستخدمين تعرف على أنواع المخططات الإحصائية في مجال تجربة المستخدم اختبارات أ/ب (A/B Test) في مجال تجربة المستخدم النمط Z لنبدأ بأكثر التّصميمات إثارةً للملل: صفحة نصّيّة في جريدة، كلّها قصّة واحدة، دون عناوين أو صور أو فواصل أو اقتباسات بخطّ كبير، لا شيء سوى النّص، من أوّلها إلى آخرها. في تصميم كهذا (أرجو أن لا يكون من صنعك!) سيمسح القارئ الصّفحة بما يُشابه حرف Z (معكوس في العربيّة). نريد من خلال ما تعلّمناه عن أنماط التّصميم المرئيّ أن نُحسّن من هذا التّصميم. لو أضفنا عنوانًا (ثقل مرئيّ)، وعمودًا واحد يتبعه (خطّ وهميّ) ثمّ جزأنا النّص على أقسام أصغر (تكرار) لحصلنا على ما يُشبه النّمط F الشّهير. النمط F تُظهر الصّورة أعلاه نتائج تتبّع العين، وهي تقنيّة تُسجّل موضع نظر المُستخدم، وكلّ ما أطال المُستخدم نظره في موضع ما، بدا هذا الموضع أكثر "حرارة" في الخريطة الحراريّة أعلاه. التّخطيطات المُشابهة للصّورة أعلاه تعطي نتائج مُشابهة للخريطة الحراريّة السّابقة. اكتسب مؤسّسو مجموعة Nielsen Norman بعض الشّهرة من خلال النّمط F، وعلى الرّغم أنّهم لم يأتوا بثورة مُشابهة منذ زمن، فإنّهم ما يزالون ينشرون مقالات كثيرة تستحقّ القراءة. هكذا يعمل النّمط F: ابدأ في الزّاوية العلويّة اليُسرى (لقارئي الإنكليزية، أو العلويّة اليُمنى لقارئي العربيّة)، كما في النّمط Z. اقرأ أو امسح العنوان أو السّطر الأوّل من النّصّ. امسح بنظرك القسم الأيسر (أو الأيمن بالعربيّة) مُتجّها للأسفل من العمود حتّى تجد شيئًا مثيرًا للاهتمام. اقرأ ما أثار اهتمامك بتأنٍّ. تابع المسح بنظرك نحو الأسفل. بتكرار هذه الخطوات مرارًا ستبدو الخريطة الحراريّة وكأنّها حرف F أو E (معكوسين للعربيّة)، ومن هنا جاءت التّسمية. ما المهم في ذلك؟ لاحظ كيف تستحوذ بعض أجزاء الصّفحة على اهتمام كبيرة بصورة طبيعيّة دون أجزاء أخرى قد يتجاهلها المُستخدم معظم الوقت، وهذا ما يُسمّى المناطق القويّة والضّعيفة في التّصميم. فزرّ يقع في أيمن وأعلى الصّفحة سيتلقّى نقرات أكبر من زرّ يقع في يسارها وأعلاها، والّذي سيتلقّى نقرات أكثر بدوره من زرّ يقع في يمينها وأسفلها، وأمّا أقلّها نقرًا فستكون الأزرار الموضوعة في أماكن عشوائيّة في منتصف الصّفحة، ما لم نفعل شيئًا يُحسّن من وضعها. اعلم أيضًا أنّ كل "قطعة" من المحتوى يمكن أن تُنشئ نمط F مستقلّ عن بقيّة القطع، فقد تحوي الصّفحة على أكثر من نمط F، وهذا موضوع متقدّم خارج عن حديثنا اليوم. التراتب المرئي (Visual Hierarchy) عندما تستخدم الخطوط للإشارة إلى أهمّية نصّ ما، وبعض الألوان لتمييز الأزرار، وتُضفي ثقلًا مرئيًّا على الأجزاء المُهمّة، فهذا يخلق تراتبًا مرئيًّا، أي تصميمًا يمكن للنّاس مسحه بسهولة، إذا تنتقل العين سريعًا من جزء مهمّ إلى جزء مهمّ آخر وهكذا... يعتقد بعض المصمّمين أن التّراتب المرئيّ أمرٌ جيّد لكونه يُعطي مظهرًا أفضل للتّصميم، وهذا صحيح، ولكنّه أيضًا يُعطي شعورًا مُريحًا لأنّه يسهلُ مسحه بالعين. هل تريد مشاهدة نتائج أكثر لمتابعة العين؟ ألقِ نظرة على صفحة متابعة العين الّتي أنشأتها على Pinterest سنتابع الحديث عن مواضيع متعلّقة بمتابعة العين في الدّرس القادم، ومن ذلك كيف يستخدم النّاس التّصميم بأساليب مختلفة، بين التّصفّح والبحث والاكتشاف. ترجمة بتصرّف للدّرس Z-Pattern, F-Pattern, and Visual Hierarchy من سلسلة Daily UX Crash Course لصاحبها Joel Marsh. اقرأ أيضًا النسخة العربية الكاملة لكتاب مدخل إلى تجربة المستخدم (User Experience - UX) 1.0.0 المبادئ الخمسة الأساسية في قابلية الاستخدام (Usability) كيف تقوم تجربة المستخدم (UX) في خمس دقائق كيف تنشئ منزلِقًا Slider مناسبا للواجهة الرسومية عند التصميم للجوال

يشرح هذا الجزء من سلسلة تعليم CSS كيف تعمل CSS في المتصفّحات وما الهدف من وجود DOM. سنتعلّم أيضًا كيف نُحلّل مستندًا بسيطًا. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. (هذا الدرس) المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. كيفية عمل CSS عندما يعرض المتصفّح المستند، فإنّه يجمع محتواه مع معلومات التنسيق، ويُعالج المستند على مرحلتين: يحوّل المتصفّح لغة الرّماز وCSS إلى DOM (اختصارًا لـDocument Object Model). يُمثّل DOM المستند في ذاكرة الحاسوب، ويجمع محتوى المستند مع تنسيقه. يعرض المتصفّح محتويات DOM. تستخدم لغات الرّماز عناصر (elements) لتعريف هيكل المستند. يُحدّد العنصر بوسم (tag)، وهو نص يبدأ بالرّمز ‎<‎ وينتهي بالرّمز ‎>‎. معظم العناصر لها زوجان من الوسوم، وسم في البداية وآخر في النهاية. لكتابة وسم البداية أدرج اسم العنصر بين ‎<>‎، أما وسم النّهاية فيكتب بإضافة ‎/‎ بعد ‎<‎ وقبل اسم العنصر. قد يكون لبعض العناصر وسم بادئ فقط، أو وسم وحيد فيه تأتي ‎/‎ بعد اسم العنصر، وذلك تبعًا للغة الرّماز. قد يكون العنصر أيضًا حاويًا على عناصر آخرى ضمن وسْمَيه الأول والأخير. عليك التأكد من إغلاق الوسوم ضمن العنصر الحاوي. لـDOM بنية تشبه الشجرة، حيث يصبح كل عنصر أو خاصّة أو سلسلة من النصوص في لغة الرماز عقدة (node) في البنية الشجريّة. تُحدّد العُقد بعلاقتها بالعقد الأخرى، فبعض العناصر هي آباء (parent nodes) لعناصر آخرى (children nodes)، وقد يكون للأبناء إخوة (sibling nodes). يُعينك فهم DOM على تصميم وتنقيح وصيانة CSS، لأنّه يمثّل نقطة التقاء CSS مع محتوى المستند. مثال يُنشئ الوسم ‎<p>‎ ونظيره ‎</p>‎ عنصرًا حاويًا: <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> في هيكل DOM، تُعتير العقدة P أبًا، أبناؤه هي العقد STRONG والعقد النصيّة، وبالمثل فإنّ العقد STRONG آباء للعقد النّصيّة. ├─STRONG │ └─"C" ├─"ascading" ├─STRONG │ └─"S" ├─"tyle" ├─STRONG │ └─"S" └─"heets" تدريب: تحليل DOM باستخدام أداة فحص DOM لتحليل هيكل DOM، نحتاج إلى برنامج خاصّ، بإمكانك استخدام إضافة DOM Inspector من Mozilla لتحقيق ذلك. ما عليك إلا تثبيت الإضافة (المزيد من التفاصيل أدناه). استخدم متصفح Mozilla لفتح مستند HTML الذي أنشأته. من قائمة المتصفّح اختر: أدوات > DOM Inspector أو أدوات > تطوير الويب > DOM Inspector. تفاصيل أكثر إن لم يحوِ متصفح Mozilla عندك على أداة فحص DOM، فبإمكانك تثبيت الإضافة من موقع الإضافات وإعادة تشغيل المتصفح ثم العودة لهذا الدّرس. إن لم ترغب بتثبيت هذه الإضافة (أو لم تكن تستعمل متصفح من Mozilla)، بإمكانك استخدام Web X-Ray Goggles كما هو مشروح في القسم التالي. بإمكانك أيضًا تجاوز هذا القسم والمتابعة. في أداة فحص DOM، وسّع عقد المستند بالنقر على الأسهم. ملاحظة: قد تؤدي المسافات في ملف HTML إلى عرض عقد نصية فارغة، يمكنك تجاهلها. يبدو جزء من النتيجة مشابهًا لما يلي، تبعًا للعقد الّتي وسّعتها: │ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ►╴STRONG │ │ عندما تختار أيّة عقدة، بإمكانك استخدام اللوحة على يمين DOM Inspector للاطّلاع على معلومات إضافية عنها، فمثلًا: يعرض DOM Inspector النص في اللوحة على اليمين عندما تحتار عقدة نصيّة. عندما تختار عقدة تمثّل عنصرًا، تُحلّل الأداة هذه العقدة وتقدّم معلومات كثيرة في اللّوحة على اليمين، يكون من ضمنها معلومات التنسيق. تمرين انقر على عقدة من نوع STRONG في أداة فحص DOM، ثم استخدم اللوحة على اليمين لإيجاد الموضع الّذي يُعيّن فيه لون العقدة إلى أحمر، والموضع الّذي يُجعل فيه خطّها أعرض من النصّ العاديّ. شاهد الحل في القائمة فوق اللوحة على اليمين، اختر CSS Rules، سترى عنصرين مُدرجين، أحدهما هو المصدر الداخلي الّذي ي يُعرّف font-width على أنّها bolder، والآخر آتٍ من ورقة الأنماط الّتي تُحرّرها والّذي يُعرّف color على أنّه red. استخدام Web X-Ray Goggles تعرض الأداة Web X-Ray Goggles معلومات أقل من DOM Inspector، ولكنّها أبسط في التثبيت والاستعمال: اذهب إلى الصّفحة الرئيسيّة للأداة. اسحب رابط العلامة المرجعيّة إلى شريط المتصفّح. افتح مستند HTML الّذي أنشأته. فعّل الأداة بالنقر على العلامة المرجعيّة في الشّريط. اسحب مؤشّر الفأرة فوق العناصر المختلفة في المستند. تتالي الأنماط ووراثتها سنتعلّم الآن كيف تتفاعل الأنماط المتتالية، وكيف ترث العناصر الأنماط عن آبائها، وكيف تضيف الأنماط إلى ورقة الأنماط مستفيدًا من فكرة الوراثة بحيث تغيّر تنسيق عدة أجزاء من المستند مرّة واحدة. قد يُحدّد النّمط النّهائي للعنصر في عدّة مواضع، تتفاعل فيما بينها بطريقة مُعقّدة، وهذا التّفاعل المعقّد يُعطي CSS قدراتها المُميّزة، ولكنّه قد يُعقّد الأمور ويجعل تتبّع الأخطاء عمليّة صعبة. تجتمع المصادر الثلاثة الأساسية لمعلومات التنسيق مشكّلة ما نسمّيه تعاقب الأنماط (cascade)، وهذه الأنماط هي: التنسيقات المبدئيّة الّتي يحدّدها المتصفّح للعناصر في لغة الرّماز. التنسيقات الّتي يحدّدها المستخدم الّذي يقرأ المستند. التنسيقات المرتبطة بالمستند الّتي يحدّدها مؤلّفه، والّتي قد تعيّن في ثلاثة مواضع: في ملفّ خارجيّ: وهذا الموضوع الأساسيّ لهذه الدّروس. في تعريف في بداية المستند: للتنسيقات الخاصّة بصفحة واحدة فقط. في عنصر معيّن ضمن متن المستند: وهي الطريقة الأقل سهولة في الصيانة، ويمكن استخدامها على سبيل التّجربة. تُغيّر أنماط المستخدم الأنماط الّتي يعيّنها المتصفّح، ثمّ تغيّر أنماط مؤلّف المستند تلك الّتي عيّنها المستخدم. في هذه السّلسلة أنت مؤلّف المستند، ولن نتعامل إلّا مع هذا النّوع من الأنماط. مثال عندما تقرأ هذا المستند في متصفّح، يأتي جزء من التنسيق الّذي تراه من الإعدادات المبدئيّة لـHTML في المتصفّح. وقد يأتي جزء آخر من الإعدادات المخصّصة للمتصفّح، إذ يمكن تخصيصها في مربع التفضيلات في Firefox مثلًا، أو يمكن تعيينها في ملف userContent.css في ملفّ المتصفّح الشّخصيّ. ويأتي الجزء الأخير من التنسيق من خادوم موقع الأكاديميّة. عندما تفتح المستند الّذي تتدرّب عليه في المتصفّح، تكون العناصر <strong> أعرض خطًّا من بقيّة النّصّ، هذا التنسيق يأتي من إعدادات المتصفّح المبدئيّة. كما أن العناصر نفسها ذات لون أحمر، وهذا التنسيق يأتي من ورقة الأنماط الّتي كتبناها بأنفسنا. ترث عناصر <strong> أيضًا معظم تنسيقها عن عناصر <p> لأنّها أبناؤها، وبالمثل ترث العناصر <p> معظم تنسيق عنصر <body>. يكون للتنسيقات الّتي يحدّدها مؤلّف المستند الأولويّة في تعاقب الأنماط على تلك الّتي يحدّدها القارئ، وتكون الأولويّة الأقل لتنسيقات المتصفّح المبدئيّة. بالنّسبة للتنسيقات الموروثة، يكون للتنسيقات المعرّفة على العقدة ذاتها الأولويّة على تلك الّتي ترثها عن آبائها. هناك قواعد أخرى لهذه الأولويّات، سنتعرّف عليها لاحقًا. تفاصيل أكثر توفّر CSS أيضًا طريقة للقارئ لحجب التنسيق الّذي يحدّده مؤلّف المستند باستخدام الكلمة !important. وهذا يعني أنّه لا يمكن توقّع الشّكل الّذي سيكون عليه المستند لكلّ قارئ. إذا أردت معرفة المزيد عن موضوع التعاقب والوراثة، انظر فقرة Assigning property values, Cascading and inheritance في تعريف CSS. تمرين: استخدام الوراثة حرّر ملفّ CSS الّذي تتدرّب عليه. أضف هذا السّطر بنسخه ولصقه. لا يهمّ إن كان فوق أو تحت السّطر الّذي أضفته من قبل. إلّا أن إضافته فوقه أكثر منطقيّة لأن العنصر <p> أب للعنصر <strong> في مستندك. p {color: blue; text-decoration: underline;} احفظ الملفّ وحدّث متصفّحك لتشاهد تأثير ذلك على المستند. يؤدّي ذلك إلى تسطير النّص في كامل الفقرة، بما في ذلك الحروف الأولى من كلّ كلمة، وهذا يعني أن العناصر <strong> ورثت عن أبيها نمط تسطير النّصّ. ولكّن هذه العناصر ما تزال حمراء اللّون، لأنّ اللون الأحمر هو نمطها الخاص، ولذا يكون له الأولويّة على اللّون الأزرق لأبيها العنصر <p>. قبل <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> strong {color:red} بعد <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> p {color:blue; text-decoration:underline} strong {color:red} تمرين عدّل ورقة الأنماط بحيث تكون الحروف الأولى فقط مُسطَّرة: شاهد الحل انقل التصريح الذي يُعنى بتسطير النّص من قاعدة <p> إلى <strong>، كما يلي: p {color: blue; } strong {color: orange; text-decoration: underline;} ما التالي؟ سنتعرّف في الدّرس التالي كيف نستهدف العناصر بطريقة أكثر انتقائيّة. ترجمة -وبتصرف- للمقال How CSS works من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

في عام 1993، جلب أبي إلى البيت هاتفًا محمولًا كبيرًا على شكل حجر من الطوب، كنا جميعًا متحمسين جدًا لهذه التكنولوجيا الجديدة، ولم يخطر ببال أحد منا أنه سيكون لها تأثيرٌ ضخم على حياتنا. إنني في الواقع لا زلت أعتبره أداة سحرية، وقد قام بعض أصدقائي بشرائه بعد عدة سنوات. أما اليوم، فهناك ستة مليارات مؤيد للهواتف المحمولة حول العالم؛ مما يعني أنه إذا امتلك كل واحد منهم هاتفًا، فسيمتلك 87% من سكان العالم هواتفًا محمولة، وهذا عدد ضخم جدًا مقارنة بأن هناك أقل من ثلاثة مليارات شخص فقط يمتلكون حواسيبًا مكتبية. من الواضح جدًا أن الهواتف النقالة سوف يستمر بقاؤها لفترة طويلة؛ وتبقى معها أيضًا مجموعة من القيود (والفرص) الجديدة للمصممين؛ لذا دعونا نلقي نظرة عن كيف يمكننا تطوير نهجنا في التعامل. كيف تختلف الهواتف عن غيرها؟ إن أول شيء علينا فهمه حول تصاميم الهواتف هو أنها مختلفة، ليس فقط بشأن الحجم؛ فبِنْية ومواصفات الجهاز المحمول تعطينا تصاميمَ مختلفة القدرات والمتطلبات. ونحن نجد أن الهواتف المحمولة أنسب في الاستخدام لكونها خفيفة وسهلة الحمل والتنقل، ومع استخدامها المنتظم تتكون لدينا معها رابطة عاطفية مميزة. البنية والمواصفات تمتلك معظم الهواتف المحمولة شاشات لمسية، حيث يتفاعل معها المستخدمون معتمدين على الإيماءات، بالإضافة إلى واجهة ذات عناصر بسيطة. ونظرًا لصغر أبعاد هذه الأجهزة، نتوقع أيضًا أن تكون بنية المحتوى بسيطة وصغيرة. أيضًا لمحدودية عرض النطاق الترددي والاتصال (bandwidth and connectivity) لهذا الأجهزة، فإنها تتطلب تصميمًا يجمع بين المثالية في وقت التحميل، والانخفاض في استهلاك بيانات الهاتف. كيف، أين ومتى نميل لاستخدام هواتفنا المحمولة في كثير من الأحيان؛ ولذلك لأن لدينا وصولًا مستمرًا إليها، فهي معنا في وسائل المواصلات، وحين نتمشى في الشارع، أو حين نشاهد التلفاز، بل نحن غالبًا ما نستخدمها بينما نقوم بعمل آخر، وهذا يعنى أن بعضنا ربما يستخدم جهازه تحت ظروف عرض صعبة، أو بين العديد من المشتتات. كيف نتصرف ونشعر لدينا طرقًا وسلوكيات وأولويات مختلفة في استخدامنا للهواتف المحمولة؛ ففي جزء من دراسة Going Mobile 2012، وجدت وكالة User Experience Design agency Foolproof أن الهواتف أعطتنا شعورًا جديدًا من الحرية والتحكم؛ لذا يشعر بعض المستخدمين بمودة حقيقية بينهم وبين هواتفهم! فقد وجدت وكالة Foolproof أن 63% من الناس يفتقدون هواتفهم إذا لم يستطيعوا الوصول إليها بسهولة، ووصفوا هواتفهم بأنها (على قيد الحياة)، وأنها جزء من أجسامهم وشخصياتهم. ولأن الهواتف المحمولة قد غيرت توقعات المستخدم جذريًا، فمن المهم جدًا لنا- نحن المصممين- أن نتبع عملية التصميم التي تركز على المستخدم للوصول إلى حلول، فالمشكلة الوحيدة هي أن أفضل ممارساتنا التقليدية قد لا تفلح دائمًا. كيف تؤثر الهواتف على المصممين إن اختلافات الهواتف المحمولة تؤثر بشكل مباشر على جميع أجزاء عملية التصميم التي تركز على المستخدم، بداية من أبحاث المستخدم وحتى التطوير النهائي واختبار الحلول، وأكبر الأجزاء المؤثرة في العملية هي: طرق التقديم والعرض، وهندسة المعلومات. طرق التقديم والعرض على عكس مواقع الإنترنت التقليدية، هناك أربع طرق شائعة لتقديم محتوى الهواتف المحمولة: بالنسبة للمستخدمين الذين يفضلون عرض المحتوى على المتصفح، فتناسبهم المواقع المخصصة للهواتف (mobile-specific site)؛ أو المواقع المتجاوبة (responsive site) التي تعيد ترتيب واجهتها بحيث تتناسب مع أبعاد الهاتف. أما بالنسبة للذين يفضلون تحميل التطبيقات على هواتفهم المحمولة، فيناسبهم إما تحميل التطبيقات المخصصة (native app)؛ أو التطبيقات الهجينة (hybird app). التطبيقات المخصصة مستقلة بذاتها؛ فكل صفحة من صفحات التطبيق محددة في تصميمها من الألف إلى الياء. أما التطبيقات الهجينة ففيها بعض المرونة؛ إذ أنها تستطيع عرض المحتوى من الإنترنت كالمتصفحات، مع الاحتفاظ بواجهة مستخدم شبيهة بواجهة التطبيقات. إن كل طريقة من طرق تقديم المحتوى لديها إيجابيات وسلبيات. اختر ما تراه مناسبًا لك بِناءً على متطلبات تصميم المشروع. (في الجدول التالي مقارنة بين الطرق الأربعة المذكورة أعلاه، وكلما زادت عدد النجوم كلما كان أفضل). المأخوذ في الاعتبار المواقع المخصصة للهواتف المواقع المتجاوبة التطبيقات المخصصة التطبيقات الهجينة ملاحظات مصممة خصيصًا لأولويات المستخدم ★★★ ★★ ★★★ ★★★ يمكن للمواقع المخصصة أن تزيد من تقييم استجابة التصميم إلى ثلاث نجوم تقديم المحتوى ★★ ★★★ ★★ ★★★ من السهل فهرسة المواقع المتجاوبة (والتطبيقات الهجينة) في محركات البحث الوظائف ★★ ★★ ★★★ ★★★ تُوفر التطبيقات المخصصة إمكانية الدخول إلى مميزات الجهاز (مثل نظام تحديد المواقع، والكاميرا) مما يسمح بتجربة أكثر فاعلية وجاذبية التوافق ★★ ★★★ ★ ★ من السهل عرض التصميم المتجاوب على أي شاشة؛ أما المواقع والتطبيقات المخصصة فهي معتمدة بالأساس على الجهاز الذي صُممت من أجله تكاليف التطوير ★★ ★★★ ★ ★★ بالاعتماد على كونك تطور موقعًا كاملًا من الصفر، فإن التصميم المتجاوب يحتاج بناؤه لمزيد من الوقت، لكن ليس بقدر التصميم التقليدي المخصص تكاليف الصيانة ★★ ★★★ ★ ★★ في التطبيقات المخصصة، تلزمك صيانة كل تطبيق منها على حدة؛ بينما في التصميم المتجاوب فلا يلزمك إلا صيانة الموقع المحتاج لذلك، وستُعمم النتائج هندسة معلومات الهواتف المحمولة تمتلك الهواتف المحمولة مجموعتها الخاصة من أنماط هندسة المعلومات أيضًا؛ وبينما تُبنى المواقع المتجاوبة باتباع أنماط معيارية؛ توظِّف التطبيقات المخصصة- على سبيل المثال- هياكل متنقلة مستندة على علامات التبويب. ليست هناك طريقة (صحيحة) لهندسة مواقع أو تطبيقات الهواتف المحمولة؛ بدلًا من ذلك، دعونا نلقي نظرة على بعض الأنماط الشائعة: نمط التسلسل الهرمي (Hierarchy)، المحور والعجلة (Hun & Spoke)، الدمية المنزلية (Nested doll)، العرض المُبوّب (Tabbed view)، صندوق بينتو (Bento box)، والعرض المُصفّى (Filtered view): التسلسل الهرمي (Hierarchy) يعد نمط التسلسل الهرمي بناءً معياريًا للموقع، مع صفحة فهرس ومجموعة من الصفحات الفرعية. إذا كنت تصمم موقعًا متجاوبًا فربما ستُضطر لاتباع هذه النمط؛ بينما إدخال أنماط أخرى سوف يسمح لك بتفصيل التجربة على الهاتف المحمول. إن مبادرة Luke Wroblewski في كتابه Mobile First تساعدنا في التركيز على الأمور المهمة أولًا: المميزات، ورحلات المستخدم (user journeys)؛ حيث ستساعدنا تلك الأمور على إيجاد نماذج أفضل لتجارب المستخدم. الإيجابيات: يستطيع التسلسل الهرمي ترتيب هيكل مواقع معقدة، مثل تلك التي تحتاج إلى اتباع هياكل مواقع سطح المكتب. السلبيات: يمكن أن تمثل هياكل التنقل متعددة الأوجه (Multi-faceted navigation structures) مشكلة لمن يستخدمون الشاشات الصغيرة. المركز هو المحور (Hub)، والفرعيات هي العجلة (Spoke) المحور والعجلة (Hub & Spoke) يعطيك نمط المحور والعجلة فهرسًا في المركز يمكنك التنقل من خلاله إلى المحتويات، وهذا هو النمط الافتراضي في أجهزة Apple’s iPhone. لا يستطيع المستخدمون التنقل بين العجلات، بل عليهم العودة إلى المحور؛ هذا النمط مستخدم منذ فترة طويلة في سطح المكتب حيث يتم وضع قيود على سير العمل (غالبًا ما تقود قيودًا تِقَنية، مثل الموجودة في نموذج لعملية شراء)؛ ومع ذلك، فبمرور الوقت يصبح هذا النمط أكثر انتشارًا على الهاتف المحمول؛ لأن المستخدم صار يركز على مهمة واحدة، كما أن عامل تكوين الجهاز يجعل التنقل الشامل أصعب في الاستخدام. الإيجابيات: وجود أدوات متعددة الوظائف، لكل منها مهمة وتنقل داخلي مستقل. السلبيات: غير مناسب لمن يفضل القيام بمهام متعددة. الدمية المنزلية (nested doll) إن نمط الدمية المنزلية يقود المستخدم في شكل خَطيّ إلى محتوى فيه المزيد من التفاصيل. هذه طريقة سهلة وسريعة للتنقل حين يكون المستخدم في ظروف صعبة، كما أنها تعطي المستخدم شعورًا قويًا حول مكانهم في هيكل المحتوى؛ بفضل إمكانية التحرك للأمام ثم الرجوع للخلف. الإيجابيات: يمكن لهذا النمط أن يُستخدم كقسم فرعيّ داخل نمط من الأنماط الأساسية، مثل نمط الهرم التسلسلي أو نمط المحور والعجلة؛ وذلك في المواقع أو التطبيقات ذات الموضوعات الأحادية أو وثيقة الصلة ببعضها. السلبيات: لن يستطيع المستخدمون التنقل سريعًا بين الأقسام، لذا من الجيد النظر فيما إذا كان هذا سيكون مناسبًا، أم عائقًا أمام استكشاف المحتوى. العرض المُبوّب (Tabbed view) هذا النمط سيكون مألوفًا لمن يستخدم التطبيقات بانتظام؛ إنه عبارة عن أقسام فرعية مرتبطة ببعضها عبر قائمة شريط الأدوات، وهذا يسمح للمستخدم أن يفصح ويفهم سريعًا وظيفة التطبيق كاملة من أول مرة يفتحه فيها. الإيجابيات: مناسب للتطبيقات المتفقة الموضوع والمعتمدة على الأدوات، ولديه القدرة على القيام بمهام متعددة. السلبيات: التعقيد؛ فهذا النمط مناسب جدًا للمحتويات ذات البنية البسيطة. مربع بينتو (Bento box) إن نمط مربع بينتو أو لوحة القيادة يجلب المزيد من المحتوى التفصيلي مباشرة إلى شاشة الفهرس باستخدام مكونات لعرض أجزاء من الأدوات المترابطة أو المحتوى. هذا النمط يناسب الجهاز اللوحي (Tablet) أكثر من الهاتف المحمول لكونه- أي النمط- أكثر تعقيدًا. أنه مميز حقًّا؛ إذ يتيح للمستخدم أن يفهم المفاتيح الأساسية في لمحة واحدة، لكنه يعتمد بشكل كبير على امتلاك واجهة ذات تصميم جيد مع معلومات مقدمة بشكل واضح. الإيجابيات: مناسب للأدوات متعددة الوظائف، وللمحتوى المعتمد على تطبيقات الشاشات اللوحية والتي لها مواضيع مماثلة. السلبيات: إن شاشة الجهاز اللوحي تعطيك مساحة أكبر لاستخدام هذا النمط جيدًا؛ ومع ذلك، فمن المهم فهم كيف سيتفاعل المستخدم مع وبين كل جزئية من المحتويات؛ وذلك للتأكد من كون هذا التطبيق سهلًا، فعالًا وممتعًا للاستخدام. العرض المُصَفّى (Filtered view) وأخيرًا، يسمح نمط العرض المُصفى للمستخدم بالتنقل ضمن مجموعة من البيانات عبر تحديد خيارات التصفية لإنشاء طريقة عرض بديلة للمحتوى؛ فالتصفية (Filtering) وطرق البحث متعددة الأوجه (faceted search methods)، تعتبر خيارات ممتازة تسمح للمستخدم باستكشاف المحتوى بالطريقة التي تناسبه. الإيجابيات: مناسب للتطبيقات والمواقع ذات الكميات والمحتويات الكبيرة، مثل: المقالات، الصور وأشرطة الفيديو. يمكن أن يكون أساسًا جيدًا لتطبيق لموقع أو مجلة، أو كنمط فرعيّ ضمن نمط تنقليّ آخر. السلبيات: يمكن أن يكون من الصعب عرض نظام التصفية وطرق البحث متعددة الأوجه على شاشة صغيرة نظرًا لكون هذه الأنماط معقدة. الخطوات القادمة لقد مر تقريبًا عقدين من الزمن منذ رأيت هذا الهاتف الحجريّ الكبير أول مرة، وحوالي عشرين سنة منذ اشتريت أول هاتف محمول لي، والآن نمتلك أنا وأبي وتقريبًا كل من أعرف هواتف محمولة؛ حيث نستخدمها أكثر الوقت في التفاعل والتواصل وإدارة حياتنا. في كل عام تقفز التكنولوجيا قفزة جديدة، ومن الواضح أن علينا أن نواكبها جنبًا إلى جنبٍ. إن تطوير هندسة معلومات صديقة للهواتف المحمولة والأجهزة اللوحية، هي الخطوة الأولى في تقديم تجربة رائعة للهواتف. في الجزء الثاني: متطلبات التصميم، سوف أشرح كيف أن الاختلافات في سياق الهاتف المحمول سوف يؤثر على كيفية تطوير حل التصميم النهائي الخاص بك. ترجمة -وبتصرّف- للمقال Designing for Mobile, Part 1: Information Architecture لصاحبته Elaine McVicar حقوق الصورة البارزة محفوظة لـ Freepik

مع بداية كل عام جديد تجدنا نفكر في الطرق التي تمكننا من تحسين أنفسنا للأفضل، فلا ضَير من توجيه البعض من تلك الطاقة لتحسين مظهر الموقع والقيام بعملية تجميل خفيفة له. حينما يتعلق الأمر بتجديد مواقع الانترنت فليس هناك حاجة للقيام بعملية تجديد كاملة ما لم يتحتم ذلك. وإلا فبعض الشّد والتزيين يكون كافيًا لإعطاء موقع الوردبريس حلة جديدة. اقتراحي هو البدء بتغيير خطوط الطباعة. الخطوة الأولى: تقييم خطوط الموقع الحالية قبل الشروع في إحداث أي تغييرات كانت من الأحسن إلقاء نظرة تحليلية لتقييم الموقع حتى نتمكن من معرفة نقاط الضعف و كذا المجال المتاح لإحداث التغييرات. من أجل تقييم خطوط الموقع، يتوجب علينا التحقق من النقاط الآتية 1- مصدر اختيار الخط الحالي هل نعلم من أين جاءت خيارات الخطوط الحالية للموقع، هل هي الخطوط الافتراضية للوردبريس أم أنها كانت مختارة وفق نزوةٍ آنيةٍ. على الرغم من أنها تبدو بمظهر جيد إلا أن هذه الخطوط لم تكن مختارة بعناية لتناسب علامة الموقع التجارية الفريدة من نوعها فمفتاح التصميم هو التناسق، بداية من الصور المستخدمة وصولًا إلى نوعية الخطوط. خطوط جوجل مكان رائع للبحث عن الخطوط وزيادة عن ذلك فهو مجاني 2-هل نملك مجموعة الحروف كاملة؟ لنفرض أنه قد حددنا نوع الكتابة التي تتماشى مع تصميم الموقع، فما العمل إن اكتشفنا أن نوع الخط لا يحتوي على كل مجموعة الأحرف كاملة. هل سنُجبِر الكُتاب والمحررين على تجنب الأحرف التي لا يتضمنها نوع الخط. لتجنب ذلك يتعين علينا قبل اختيار نوع الخط التحقق من أنه يتضمن كل الأحرف، الأرقام والرموز عبر الرجوع إلى مصدره، هناك يوجد حقل معاينة يتيح لنا معرفة ما إذا كان يحتوي على مجموعة الحروف كاملة أو لا. للتحقق من أن نوع الخط يحتوي على كل الأحرف اللاتينية أدخل السطور التالية للتحقق ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz àèéïöùüçûæÆœŒ .،؛:؟! / [] {} () * - - ... "" '' _ 0123456789 ≤≥ ÷ + = ≈ ≠ ± - · √ ° @ € £ $٪ & * | «» \ <> / ~ "" §¶ © ® ™ 3- مسألة القابلية للقراءة بإمكان مستخدمي نظام التشغيل ماك تنزيل برنامج Font Book حيث يسمح هذا البرنامج لمستخدميه بالقيام بما يلي: التحقق من وجود مجموعة الحروف كاملة. معاينة الخط رقميًا، لمعرفة كيفية ظهوره على الموقع. طباعة مجموعة الأحرف كاملة في أحجام وأنماط مختلفة لتحديد أكثرها ملاءمة للقارئ. تخزين الخطوط وحفظها منظمةً لإعادة استعمالها لاحقًا. 4-ملائمة نوع الخط للجوال يتواجد العديد من البرامج على الإنترنت مثل Responsinator تسمح بالتحقق من مدى توافق مواقع الإنترنت على شاشات الجوال، نفس هذه الاداة تتيح معاينة توافق نوع الخط مع الجوال. إن التوصية القياسية لضبط حجم الخط للتوافق مع عديد المنصات هو مقياس 16 نقطة أو أكثر. قد لا يكون هذا هو الحال الأمثل في حالة الخطوط المنمقة جدًا، لذلك يتوجب التأكد باستعمال واحدة من هذه الأدوات قبل الالتزام بخط معين. 5- مناسبة لون الخط للقراء إن تحسين نوع خطوط الموقع لا يقتصر على العثور على نوع الخط أو الحجم الصحيح فقط، بل يتعدى إلى إيجاد اللون المناسب أيضًا. استخدام لوحة التصميم يُبًّيِن أنه بغض النظر عن الألوان المختارة فلون الخط الأساسي والثانوي دائمًا ما يكون أسودًا أو بدرجات ظل اللون الرمادي. لوحة التصميم 6-اختبار إمكانية وصول الخط يعرف مطورو الويب المحترفين كل التقنيات التي تجعل من مواقع الويب متاحة للجميع. مع ذلك، فإذا أردنا إعطاء خطوط الموقع مدى عالمي، فلا بد من إيلاء من يعانون قصورًا بصريًا أو من عمى الألوان اهتمامًا بالغًا. برنامج Color Oracle يحاكي كيف تظهر مواقع الانترنت للمصابين بعمى الألوان. باستعراض ودراسة التوصيات التي قدمتها المؤسسة الأمريكية للمكفوفين. تجعل الكتابة والخطوط أكثر قابلية للقراءة، من حيث حجم الخطوط، نوعها، ولونها، مدى التباين والبعد بين الكلمات والأسطر. الخطوة الثانية: اتباع أفضل الخطوات للمساعدة في اختيار الخطوط ان اختيار الخطوط هو قرار شخصي بحت، يشبه إلى حد كبير اختيار تصاميم مواقع الإنترنت فكل وذوقه واختياراته. لكن بإمكاننا دائمًا تنظيم و ذِكر الخطوات الواجب إتباعها أثناء اختيار نوع جديد من الخطوط. مطابقة العلامة التجارية: عند اختيار الخطوط يتوجب احترام قواعد التصميم المتبعة أثناء إنشاء العلامة التجارية للموقع. البساطة: تَجَنُب استعمال أكثر من ثلاثة أنواع من الخطوط في الموقع الواحد، مع الحرص على ضمان سهولة مقروئية الخطوط المختارة. الاتساق: يتوجب استعمال نمط خطٍ مُوَحَد في كل الموقع، حيث يجب المحافظة على نفس نوع الخط، حجمه، لونه وأسلوبه في جميع عناوين الموقع. ونفس الشيء ينطبق أيضًا على نصوص الموقع. التباين: بجانب المحافظة على الاتساق يتوجب إنشاء تباين بين عنوان النص ومحتوى النص. على التباين أن يكون لافتًا للنظر دون أن يكون خارجًا عن الإطار. على سبيل المثال يمكننا استعمال خط cursive مع خط handwritten. التحقق من الالوان: كما ذكرنا سابقًا، يعتبر اللون الأسود أو درجات ظِل اللون الرمادي الداكن من أفضل الألوان المناسبة للقراءة. دون نسيان الأخذ بعين الاعتبار لون الخلفية (نص فاتح على خلفية داكنة و نص داكن على خلفية فاتحة). استعمال الاحرف اللاتينية الكبيرة: يتوجب الحذر عند استعمال الأحرف اللاتينية الكبيرة فهي صعبة القراءة نوعًا لذلك يجب استعمالها بتحفظ. إنشاء تسلسل هرمي: على الرغم من أن القاعدة العامة هي استخدام حجم خط لا يقل عن 16 نقطة فهذا لا يعني أن يكون حجم كل خطوط الموقع مماثلًا لذلك. فيجب أن يتم تحديد حجم خاص بكل من العناوين، العناوين الفرعية والنص الأساسي لتحديد تسلسل هرمي واضح. احترام المسافات: بعد اختيار نوع خطوط الموقع، يجب تفقد شكل و مظهر النصوص. والعمل على تحسين المسافات بين الأسطر و الكلمات لجعلها سهلة القراءة والفهم. كقاعدة عامة كل سطر يجب أن لا يتعدى خمسة عشر (15) كلمة. إجراء إختبار أ/ ب : طرح مظهرين عامين للموقع بإختيار مجموعتين مختلفتين من أنواع النصوص و إجراء نوع من سبر الآراء لمعرفة شعور المستخدمين إزاء المظهرين واختيار الأنسب بينهما. ترجمة –وبتصرّف- للمقال How to Give Your WordPress Site a Font Facelift لصاحبته Brenda Barron حقوق الصورة البارزة محفوظة لـ Freepik

تعرفنا في الدرس السابق على القوالب في LibreOffice وتعلّمنا كيفية استخدام القوالب المضمّنة لإنشاء المستندات، بالإضافة إلى طريقة تنصيب قوالب من مصادر أخرى. في هذا الدرس سنغطي طريقتين لإنشاء القوالب وتعديلها، ونتعرف على بعض الإجراءات لتنظيم تلك القوالب، كإنشاء المجلدات، الحذف، النقل، الاستيراد، والتصدير. إنشاء القوالب يمكنك إنشاء القوالب بطريقتين: إمّا عن طريق حفظ المستند الاعتيادي كقالب، أو باستخدام المُرشدات Wizards. إنشاء قالب من مستند بالإضافة إلى التنسيقات، يمكن أن نحفظ ضمن القالب أيّة إعدادات يمكن إضافتها أو تعديلها في المستند. على سبيل المثال، يمكنك أن تحفظ إعدادات الطباعة وأيّة إعدادات أخرى تعيّنها من أدوات > الخيارات، مثل المسارات Paths والألوان. يمكن أن تحتوي القوالب التي تنشئها على نصوص معرّفة مسبقًا، مما يجنّبك إعادة كتابتها في كل مرة. على سبيل المثال، يمكن أن تنشئ قالبًا للرسائل التي ترسلها باستمرار، وتضيف إلى القالب اسمك، عنوانك، خاتمة الرسالة، وتوقيعك. كما بإمكانك أن تحفظ في القالب تخصيصات أشرطة القوائم والأدوات. لإنشاء قالب من مستند وحفظه في مجلد قوالبك، ابدأ بفتح مستند جديد أو مستند أنشئ سلفا وترغب في حفظه كقالب، ثم عدّل المستند وأضف أي محتوى ترغب في ظهوره في كل المستندات التي ستنشئها بناء على القالب الجديد، كشعار الشركة مثلًا، حقوق الطبع والنشر، رأس وتذييل الصفحات، وغيرها من العناصر. بعد ذلك، أنشئ الأنماط التي تريد استخدامها في القالب الجديد وعدّلها بما يلائم احتياجاتك. يوضح المستند أدناه مثالًا على قالب رسالة بسيط، استخدمنا فيه عناصر كالنصوص والإطار التي نريد تكرارها في كل الرسائل التي ننشئها من هذا القالب، وطبّقنا التنسيقات المرغوبة على العناصر. لحفظ القالب، اذهب إلى ملف File > القوالب Templates > احفظ كقالب Save As Template: أدخل في من مربع الحوار احفظ كقالب اسمًا مناسبًا للقالب، حدد الخيار قوالبي My Templates، وهو الفئة التي سيحفظ ضمنها القالب، ثم انقر على زر حفظ Save. بذلك تكون قد انتهيت من حفظ القالب، وبإمكانك الوصول إليها واستخدامه لإنشاء المستندات (راجع درس كيفية استخدام القوالب لإنشاء المستندات) من مربع الحوار القوالب (ملف > جديد > القوالب). إنشاء قالب باستخدام المرشدات بإمكانك استخدام المرشدات لإنشاء القوالب للرسائل، الفاكسات، جداول الأعمال، أو لإنشاء العروض التقديمية وصفحات الويب. لإنشاء قالب باستخدام أحد المرشدات، اذهب إلى ملف File > المرشدات Wizards > اختر نوع القالب. اتبع التعليمات في صفحات المرشد لإنشاء القالب، علمًا أنّ خطوات الإنشاء تختلف لكل نوع من القوالب، لكن تتبع نمطًا متشابهًا جدّا. على سبيل المثال، يمكنك من خلال المرشد لإنشاء قالب جدول أعمال أن تتحكم في تصميم الصفحة، أسماء حضور الاجتماع، بنود الاجتماع، وغيرها. ويمكنك معاينة التغييرات التي تجريها على تصميم القالب من نافذة المعاينة خلف مربع الحوار. بإمكانك أن تحدد في القسم الأخير من المرشد الاسمَ الذي سيظهر في مربع الحوار القوالب بالإضافة إلى تحديد الموقع الذي ستحفظ عليه القالب. أدخل اسم القالب في الحقل المخصص له، ثم انقر على النقاط الثلاثة بجانب حقل الموقع لإدخال اسم ملف القالب وتحديد مجلد الحفظ (الموقع المبدئي هو مجلد template، لكن يمكنك اختيار موقع مختلف). بعد تحديد اسم ملف القالب وموقعه انقر على زر احفظ Save لإغلاق مربع الحوار حفظ باسم Save As. وبالعودة إلى المرشد، يمكنك أن تحدد ما إذا كنت تريد إنشاء مستند جديد من القالب مباشرة، أو إجراء تعديلات يدوية على القالب، حدد أحد الخيارين تحت عبارة ما الذي تريد عمله بعد ذلك ثم انقر على زر أنه Finish. سيُضاف القالب الجديد إلى فئة قوالبي وبإمكانك الوصول إليه واستخدامه لإنشاء المستندات عبر مربع الحوار القوالب. ملاحظة: إذا لم يظهر القالب، حاول أن تُحدّث القائمة بالنقر على أيقونة الترس ثم الخيار أنعش (حدّث) Refresh لكي يظهر القالب الجديد. تحرير القوالب بإمكانك تحرير أنماط القالب ومحتواه، ومن ثم إعادة تطبيق أنماط القالب على المستندات التي أنشِئت اعتمادًا على ذلك القالب، لكن لا يمكنك إعادة تطبيق المحتوى. لتحرير قالب معيّن، افتح مربع الحوار القوالب (ملف > القوالب > أدر القوالب أو اضغط على Ctrl + Shift + N). بعد ذلك انقر بزر الفأرة الأيمن على الصورة المصغرة للقالب الذي تريد تعدليه واختر حرّر Edit. سيُفتح القالب في LibreOffice، ويمكنك بعدها أن تجري أي تعديل تريده على المستند. ولحفظ التغييرات اذهب إلى ملف File > احفظ Save من شريط القوائم. تحديث المستندات من قالب مُعدَّل إذا قمت بتحرير القالب وأنماطه، فإنه في المرة القادمة التي تفتح فيها أحد المستندات التي أنشئت اعتمادا على ذلك القالب قبل تعديله ستظهر لك رسالة تأكيد لتحديث المستند. يمكنك من خلالها القيام بأحد الإجراءين التاليين: تحديث الأنماط: لتطبيق الأنماط المعدّلة في القالب على المستند. الاحتفاظ بالأنماط القديمة: لعدم تطبيق الأنماط المعدلة في القالب على المستند. لكن في هذه الحالة سيتم فك ارتباط القالب بالمستند، حتّى وإن كان اسم القالب ما زال ظاهرًا في خصائص المستند (ملف > خصائص > عام). مع ذلك، ما زال بإمكانك استيراد الأنماط يدويًا من القالب، لكن في حال رغبت في إعادة ربط المستند بالقالب، يجب أن تنسخ محتويات المستند وتلصقها في مستند فارغ يستند على ذلك القالب. تعيين قالب افتراضي (مبدئي) Default إذا كنت تنشئ المستندات عبر المسار ملف > جديد، فسيُستخدَم القالب الافتراضي لذلك النوع من المستندات (نص، جدول بيانات، عرض تقديمي…إلخ). مع ذلك، بإمكانك أن تحدد القالب الافتراضي الذي تريد استخدامه في كل مرة تنشئ مستندًا جديدا. تعيين القالب كـ “افتراضي” أغلب الإعدادات الافتراضية، كحجم الصفحة وهوامش الصفحة، تكون قابلة للتغيير عبر المسار أداوت > الخيارات، لكن هذه التغييرات تُطبّق على المستند الذي تعمل عليه فقط. لجعل هذه التغييرات هي الإعدادات الافتراضية لذلك النوع من المستندات، يجب أن تستبدل القالب الافتراضي بآخر جديد. بإمكانك تعيين أيّ من القوالب المعروضة في مربع الحوار القوالب كـ افتراضي لنوع معين من المستندات بالذهاب إلى ملف > القوالب > أدر القوالب. بعد ذلك انقر بزر الفأرة الأيمن على القالب المرغوب واختر اجعله المبدئي. في المرة القادمة التي تريد فيها إنشاء مستند جديد عبر المسار ملف > جديد، سيُنشَأ ذلك المستند من هذا القالب الذي عيّنته كافتراضي. إعادة تعيين القالب الافتراضي لإعادة تعيين القالب الافتراضي الأصلي للمستندات، واستخدامه من جديد كقالب افتراضي، انقر على أيقونة الترس في الجزء السفلي من مدير القوالب، مرر مؤشر الفأرة فوق صفّر القالب المبدئي Reset Default Template واختر مستند نصي Text Document. لن تظهر هذه الخيارات مالم تعيّن قالبًا مخصّصًا كـ افتراضي مسبقًا، وكما وضحنا في الفقرة السابقة. بعد إعادة تعيين القالب الافتراضي، ستُنشَأ كل المستندات الجديدة بناءً على القالب الافتراضي الأصلي لذلك النوع من المستندات. تنظيم القوالب يمكن أن يستخدم LibreOffice القوالب المضافة إلى مجلدات القوالب الخاصة به فقط. وبإمكانك إنشاء مجلدات القوالب واستخدامها لتنظيم قوالبك. على سبيل المثال، يمكنك إنشاء مجلد لقوالب التقارير، وآخر لقوالب الرسائل، وهكذا. كما بإمكانك تصدير القوالب من تلك المجلدات أو استيرادها إليها. للبدء، افتح مدير القوالب عبر المسار ملف > القوالب > أدر القوالب. إنشاء مجلد قوالب لإنشاء مجلد قوالب، انقر على أيقونة الترس في الجزء السفلي من مربع الحوار القوالب واختر فئة جديدة New Folder. في مربع الحوار الذي سيظهر، أدخل اسمًا مناسبًا لمجلد القوالب وانقر على حسنًا OK. ملاحظة: لا يمكن إنشاء مجلد فرعي ضمن مجلد قوالب في LibreOffice. حذف مجلد قوالب لا يمكن حذف مجلدات القوالب التي تأتي مبدئيا مع LibreOffice، ولا يمكن حذف أي مجلد مضاف بواسطة مدير الامتدادات، إلّا إذا قمت بحذف الملحق الذي قام بتنصيب ذلك المجلد أولًا. مع ذلك بإمكانك حذف مجلدات القوالب التي أنشأتها بنفسك، ويتم ذلك بالنقر على أيقونة الترس في الجزء السفلي من مربع الحوار القوالب واختيار احذف الفئة Delete Folder. من مربع الحوار الذي سيظهر، حدد مجلد القوالب الذي تريد حذفه وانقر على زر حسنًا. بعد ذلك أكّد الحذف بالنقر على زر نعم. نقل القوالب لنقل قالب معين من مجلد قوالب إلى آخر، حدد هذا القالب ثم انقر على زر انقل Move في الجزء السفلي من مربع الحوار القوالب. بعد ذلك حدد مجلد القوالب الذي تريد نقل القالب إليه من مربع الحوار الذي سيظهر، ثم انقر على زر حسنا. حذف القوالب لا يمكنك حذف القوالب التي تتوفر بشكل افتراضي مع LibreOffice. كما لا يمكنك حذف أي قوالب تم تنصيبها بواسط مدير الامتدادات مالم تقم بحذف الملحق الذي قام بتنصيب تلك القوالب. مع ذلك، بإمكانك حذف القوالب التي أنشأتها أو استوردتها بنفسك. لحذف قالب معين، انقر عليه بزر الفأرة الأيمن من مربع الحوار القوالب، ثم اختر احذف Delete. بعد ذلك أكّد عملية الحذف بالنقر على زر نعم من مربع الحوار الذي سيظهر لك. استيراد القوالب لقد تطرقنا إلى كيفية استيراد القوالب ومجلدات القوالب إلى LibreOffice بالتفصيل في الدرس السابق (كيفية استخدام القوالب لإنشاء المستندات) لذا سنكتفي بشرح الخطوات بشكل سريع في هذا الدرس. لاستيراد قالب قمت بحفظه على أحد المجلدات في جهازك، انقر على زر استورد Import من مربع الحوار القوالب. بعد ذلك حدد مجلد القوالب الذي تريد استيراد القالب إليه. وأخيرًا اذهب إلى المجلد الذي تحفظ القالب عليه من متصفح الملفات، حدد القالب، ثم انقر على زر فتح Open. ستتم إضافة القالب إلى مجلد القوالب الذي حددته، وسيكون بإمكانك استخدامه لإنشاء المستندات. تصدير القوالب لتصدير قالب ما من مجلد القوالب إلى مكان آخر على جهازك، حدّد القالب من مربع الحوار القوالب ثم انقر على زر صدّر Export. من مربع الحوار اختيار مسار الذي سيظهر، حدد المجلد الذي تريد حفظ القالب عليه ثم انقر على حسنًا OK. ترجمة- وبتصرّف - لدليل المستخدم الخاص بالحزمة المكتبية LibreOffice.

القالب هو عبارة عن مستند نموذجي يُستخدَم لإنشاء مستندات أخرى. على سبيل المثال، يمكنك إنشاء قالب لتقارير العمل بحيث يحتوي على شعار شركتك في الصفحة الأولى. وبالنتيجة ستحتوي كل المستندات الجديدة التي تنشئها من هذا القالب على شعار الشركة في الصفحة الأولى أيضًا. يمكن أن تتضمن القوالب جميعَ العناصر التي يمكن أن يتضمنها المستند الاعتيادي، كالنصوص، العناصر الجرافيكية، والأنماط، بالإضافة إلى الإعدادات المخصصة من قبل المستخدم، كالقياسات، اللغة، الطابعة المبدئية (الافتراضية)، وتخصيصات قوائم وأشرطة الأدوات. تُبنى جميع مستندات LibreOffice على أساس القوالب، وبإمكانك إنشاء قالب محدد لأي نوع من المستندات (النصوص، جداول البيانات، العروض التقديمية…إلخ). إذا لم تحدد قالبًا معيّنًا عند إنشاء المستند، فسيُنشَأ باستخدام القالب المبدئي لذلك النوع من المستندات. وإذا لم تحدّد قالبًا مبدئيًّا، سيستخدم LibreOffice القالب الفارغ لذلك النوع من المستندات والذي نُصِّب مع البرنامج. سنتعلم في هذا الدرس كيفية استخدام القوالب التي يوفرها LibreOffice لإنشاء المستندات بطرق مختلفة، كيفية إضافة قوالب من مصادر أخرى، وكيفية ربط المستند بقالب مختلف. إنشاء مستند من مربع الحوار القوالب Template Manager لاستخدام أحد قوالب LibreOffice لإنشاء مستند، قم أولًا بفتح مربع الحوار القوالب عن طريق المسار ملف File > جديد New > القوالب Templates (أو باستخدام مفاتيح الاختصار Ctrl + Shift + N). من مربع الحوار القوالب، بإمكانك إمّا إدخال كلمة مفتاحية معينة في حقل البحث للعثور على القالب المرغوب، أو تصفية القوالب المعروضة حسب نوع الملف (مستندات، عروض تقديمية، رسومات…إلخ)، ثم اختيار إحدى الفئات المتوفرة. وبما أننا نعمل على برنامج Writer، سنحدد الخيار مستندات من قائمة رشّح والخيار كل الفئات من القائمة المجاورة لها. من القوالب المتوفرة لمستندات LibreOffice Writer، قوالب للسيرة الذاتية، قوالب الرسائل الرسمية/المهنية، وغيرها. عندما تعثر على القالب المناسب، انقر عليه نقرة مزدوجة وسيُفتح في مستند جديد مستقل. يمكنك بعد ذلك أن تبدأ بتحرير القالب وإجراء التخصيصات المرغوبة ومن ثم حفظه. إنشاء مستند من قالب في صفحة البداية Start Center بإمكانك إنشاء مستند من القوالب في صفحة البداية لحزمة LibreOffice، ويمكن عرض هذه الصفحة عندما تكون جميع مستندات LibreOffice مغلقة، وعندما تكون بيئة التطوير المتكاملة (IDE) للماكرو مغلقة أيضًا. لفتح نافذة القوالب (Template Manager) من صفحة البداية، انقر على زر القوالب من الجزء الجانبي. يرافق هذا الزر أيضًا قائمة منسدلة لعرض القوالب الخاصة بنوع معين من المستندات (رايتر، كالك، إمبريس…إلخ)، بالإضافة إلى الخيار أدر القوالب الذي يفتح نفس مربع الحوار القوالب الذي استخدمته في الطريقة السابقة. عند اختيار أحد أنواع المستندات، ستُعرض القوالب المتاحة لذلك النوع فقط، بعدها انقر نقرة مزدوجة على الصورة المصغرة للقالب المرغوب لإنشاء مستند جديد مبني على هذا القالب، ومن ثم البدء بتحرير القالب وتخصيصه. إضافة قوالب من مصادر أخرى بالإضافة إلى مجموعة القوالب آنفة الذكر التي تتوفر مع تنصيب الحزمة، بإمكانك استخدام قوالب من مصادر أخرى لإنشاء مستنداتك، كأن يكون المصدر محليًّا (مجلد على جهازك قمت بتنزيل القوالب عليه)، أو بعيدًا (رابط يمكنك تنزيل القوالب منه). بإمكانك الوصول إلى مصدر القوالب الرسمي الخاص بالحزمة LibreOffice بالنقر على زر الكرة الأرضية في الجزء السفلي من مربع الحوار القوالب (جديد > القوالب)، أو بزيارة هذا الرابط بواسطة المتصفح. في الحالتين سيتم توجيهك إلى الصفحة الرسمية لقوالب حزمة LibreOffice، يمكنك تصفح القوالب المتوفرة وتحميل القالب المرغوب. عند تحميل القوالب، ربما تلاحظ أن بعضها متوفر بشكل حزمة ومجموعة في ملف بامتداد OXT. وطريقة تنصيب القوالب المنفردة تختلف قليلًا عن طريقة تنصيب حزمة القوالب، كما سنوضّح أدناه. ### تنصيب قالب مفرد افتح مربع الحوار القوالب، ثم انقر على زر استورد Import في الزاوية السفلى اليسرى منه. بعد ذلك حدد الفئة التي تريد نقل القالب إليها وانقر على زر حسنًا: بعد فتح مستعرض المجلدات، اذهب إلى المجلد الذي قمت بحفظ القالب فيه عند التنزيل، حدد ملف القالب، ثم انقر على زر فتح Open. سيُضاف القالب إلى الفئة المحددة، وسيكون بإمكانك استخدامه لإنشاء المستندات. تنصيب حزمة قوالب يوفر مدير الامتدادات Extension Manager طريقة سهلة لتنصيب حزم القوالب التي تم تجميعها بصيغة امتداد، ويتم ذلك باتباع الخطوات أدناه. بعد أن تُنزّل حزمة القوالب (ملف OXT) وتحفظها في مجلد ما على جهازك، افتح مربع الحوار مدير الامتدادات عبر المسار أدوات Tools > مدير الامتدادات Extension Manager. انقر على زر أضف Add لاستيراد الامتداد/الملحق (حزمة القوالب): من مستعرض المجلدات، اذهب إلى المجلد الذي قمت بحفظ حزمة القوالب عليه، حدد الملف، ثم انقر على زر فتح Open. سيبدأ تنصيب الحزمة، وسيُطلب منك قراءة اتفاقية الترخيص والموافقة عليها قبل التنصيب، انقر على زر اقبل للمواصلة. أغلق مربع الحوار بعد اكتمال التنصيب وأعد فتح المستند لكي يعمل الامتداد بشكل صحيح. وسيصبح بإمكانك الوصول إلى مجموعة القوالب التي قمت بتنصيبها واستخدامها لإنشاء المستندات عبر مربع الحوار القوالب. ربط المستند بقالب مختلف إذا رغبت في ربط المستند بقالب آخر غير القالب الأصلي الذي بنيت عليه المستند في البداية يمكنك استخدام إحدى الطريقتين التاليتين. الطريقة الأولى يُربَط المستند بقالب مختلف يدويًا على النحو التالي: افتح مربع الحوار القوالب ثم افتح القالب المرغوب بالنقر نقرة مزدوجة على الصورة المصغرة الخاصة به. سيُفتح مستند جديد مبني على هذا القالب يحتوي على النصوص أو الصور التي يمكن أن يتضمنها القالب. احذف العناصر غير المرغوبة من المستند الجديد. افتح المستند الذي تريد تغيير قالبه وحدّد جميع محتوياته (Ctrl + A) ونسخها (Ctrl + C). انقر داخل المستند الفارغ الذي أنشأته في الخطوة الأولى، ثم ألصق المحتوى الذي قمت بنسخه (Ctrl+ V).حدّث الفهرس (جدول المحتويات) إن وُجد، ثم احفظ المستند الجديد. الطريقة الثانية تعتمد هذه الطريقة على استخدام الملحق Template Changer، كالتالي: نزّل الملحق Template Changer من هذا الرابط ثم نصّبه من خلال مربع الحوار مدير الامتدادات (أدوات > مدير الامتدادات) كما قمنا بتنصيب حزمة القوالب. سيُضاف خياران جديدان إلى القائمة ملف > قوالب هما: Assign Template (current document) لتعيين قالب للمستند الحالي، وAssign Template (folder) لتعيين قالب لمستند آخر. افتح المستند الذي تريد تغيير قالبه، ثم اذهب إلى ملف > القوالب > Assign Template (current document). من نافذة Select Template، اذهب إلى المجلد الذي تحفظ عليه القالب الجديد، حدد القالب، ثم افتحه بالنقر على زر Open. احفظ المستند بعد تغيير القالب. ويمكنك الآن أن تلاحظ أن القالب الجديد قد تم تعيينه للمستند الحالي إذا نظرت إلى خصائص المستند العامة (ملف > الخصائص > عام > القالب). يُفضَّل للحصول على أفضل نتيجة عند تغيير القالب في كلتا الحالتين أن تكون أسماء الأنماط هي نفسها في المستند الحالي والقالب الجديد. فبخلاف ذلك سيتوجب عليك استخدام البحث والاستبدال لاستبدال الأنماط القديمة بالأنماط الجديدة. خاتمة يمكن أن تكون القوالب من الأدوات المفيدة جدًا لاختصار الوقت إذا كنت تنشئ مستندات متشابهة باستمرا؛ ففي هذه الحالة تستطيع استخدام نفس القالب في كل مرّة بتعديله وتخصيصه بدلًا من إنشاء مستند من الصفر. بالإضافة إلى ذلك، تكون بعض القوالب ذات مظهر متسق وجميل، يمكنك استخدامها لإنشاء مستندات منسقة مسبقًا بتحرير القالب وتخصيص محتواه فقط. سنتعرف في الدرس القادم على كيفية إنشاء القوالب وتعديلها. ترجمة- وبتصرّف - لدليل المستخدم الخاص بالحزمة المكتبية LibreOffice.

بالرغم من أنّ LibreOffice Writer يوفّر مجموعات متنوّعة من الأنماط المبدئية (الافتراضية) التي يمكن تطبيقها مباشرة أو إجراء التعديلات عليها لتناسب تنسيق مستندك، إلّا أنّه تُتاح لك أيضًا إمكانية إنشاء أنماط جديدة وتخصيص جميع سماتها يدويًا وإضافتها إلى قائمة الأنماط المبدئية. سنتعلّم في هذا الدرس كيفية إنشاء أنماط جديدة وتخصيصها، بالإضافة إلى كيفية حذف الأنماط. إنشاء الأنماط يمكن إنشاء نمط جديد بإحدى الطرق التالية: باستخدام مربع الحوار نمط Style. إنشاء نمط من عنصر محدد. نسخ الأنماط من قالب أو مستند. باستخدام مربع الحوار نمط يُنشَأ نمط جديد باستخدام مربع الحوار نمط بطريقتين. الطريقة الأولى تُستخدم الطريقة الأولى لإنشاء نمط جديد كليًا، ومن ثم تعديله. انقر على السهم الصغير بجانب أيقونة الدلو في نافذة الأنماط والتنسيق (عرض > الأنماط والتنسيق) ثم اختر نمط جديد New Style من القائمة المنسدلة. سيُفتح مربع حوار صغير لتسمية النمط، أدخل اسمًا مناسبًا ثم انقر على حسنًا: سيُضاف النمط الجديد إلى قائمة الأنماط التي حددتها قبل إنشاء النمط. مثلًا إن نقرت على فئة أنماط الأحرف ثم أنشأت نمطا جديدا، ستعثر على ذلك النمط ضمن مجموعة أنماط الأحرف. انقر على النمط الجديد بزر الفأرة الأيمن ثم اختر عدّل لتخصيص خياراته. الطريقة الثانية تُستخدم هذه الطريقة لإنشاء نمط جديد على أساس نمط موجود مسبقًا (أحد الأنماط المبدئية). وفي هذه الحالة سيُربَط النمطان الجديدان (الأصلي والجديد معًا). وبما أنّ النمطين سيصبحان مرتبطين، فإن أي تغيير تجريه على النمط الأصلي سينعكس على كل الأنماط المرتبطة به تلقائيا. لإنشاء نمط جديد بهذه الطريقة، حدّد النمط الأساس أولًا من نافذة الأنماط والتنسيق، انقر عليه بزر الفأرة الأيمن، واختر جديد من القائمة المنبثقة: تُخصَّص الخيارات في كلتا الطريقتين عن طريق مربع الحوار نمط، وهو نفسه الذي استخدمناه في الدرس السابق لتعديل الأنماط المبدئية. مع الأخذ في الاعتبار أنّ الخيارات ستختلف باختلاف نوع النمط. ملاحظة: يُنصح، إذا احتجت إلى إنشاء أنماط جديدة على أساس الأنماط المبدئية، بتسمية النمط الجديد بنفس اسم النمط المبدئي مع سبقه أو إلحاقه باسم دلالي لتمييزه عن بقية الأنماط في القائمة. على سبيل المثال، إذا أنشأت نمطًا جديدًا على أساس النمط متن النص، يمكنك تسمية النمط الجديد متن النص-تقرير، أو متن النص-سيرة ذاتية .. وهكذا. إنشاء نمط من عنصر محدَّد بإمكانك إنشاء نمط جديد عن طريق نسخ التنسيق الذي طبّقته يدويًا على عنصر (فقرة، قائمة، صفحة… إلخ). يُضاف النمط الجديد في هذه الحالة إلى المستند الحالي فقط، أي أنّه لن يُحفَظ في القالب. افتح نافذة الأنماط والتنسيق ثم حدّد نوع النمط الذي تريد إنشاءه من الجزء العلوي للنافذة. انتقل بعد ذلك إلى المستند، وحدد العنصر الذي تريد حفظه كنمط، وليكن إطارًا مثلًا، ثم انقر على السهم الصغير بجانب أيقونة الدلو واختر نمط جديد من القائمة. أدخل اسمًا مناسبًا للنمط الجديد وانقر على حسنًا. سيُضاف النمط إلى قائمة الأنماط للنوع المحدد، ويمكنك استخدامه لاحقًا لتنسيق العناصر ذات الصلة. نسخ الأنماط من قالب أو مستند بإمكانك نسخ الأنماط إلى المستند عن طريق تحميلها من قالب أو من مستند آخر. للقيام بذلك يجب أولًا أن تفتح المستند الذي تريد نسخ الأنماط إليه، بعد ذلك انقر على السهم بجانب أيقونة الدلو في الجزء العلوي من نافذة الأنماط والتنسيق واختر حمّل الأنماط Load Styles. حدد في مربع الحوار حمّل أنماطًا أنواعَ الأنماط التي تريد نسخها بتأشير مربعات الخيار في الجزء السفلي. وبإمكانك تأشير خيار الاستبدال Overwrite إذا كنت ترغب في استبدال الأنماط في المستند الأصلي بالأنماط التي تحمل نفس الاسم في المستند الذي تستورد منه الأنماط. إذا تركت هذه الخيار غير مؤشر، ستُنقَل الأنماط غير المكررة (التي تحمل أسماء مختلفة) وتُتجاهل الأنماط المكررة. انقر بعد ذلك على زر من ملف From File لتحديد المستند أو القالب الذي ستنسخ الأنماط منه. وأخيرًا، اذهب إلى مجلد حفظ المستند/القالب، حدد امتداد الملف المرغوب (سواء كان قالبًا أو مستندًا) من القائمة المنسدلة بجانب حقل الاسم، ثم حدد الملف وانقر على فتح Open. ستُضاف الأنماط الجديدة المستوردة من المستند أو القالب إلى قوائم الأنماط وحسب نوع النمط (أنماط الفقرات تُضاف إلى قائمة أنماط الفقرات، وأنماط الصفحات تُضاف إلى قائمة أنماط الصفات… وهكذا). ملاحظة: إذا كان مستندك يحتوي على فهرس (جدول محتويات) واستخدمت أنماطًا مخصّصة للعناوين، يجب أن تأخذ في الحسبان أنه سيتم إرجاع مستويات العناوين المرتبطة بالمستويات التي قمت بتخصيصها في مربع الحوار ترقيم التخطيط (أدوات > ترقيم التخطيط) إلى الأنماط المبدئية (الافتراضية) عنوان رئيسي 1، عنوان رئيسي 2، وهكذا، عند تحميل أنماط نصوص من ملف لا يستخدم نفس الأنماط المخصصة. وبذلك سيتوجب عليك تغيير إعادة تطبيق الأنماط المخصصة على العناوين من جديد. حذف الأنماط لا يمكن حذف أي من الأنماط المعرّفة مسبقًا في LibreOffice من المستند أو القالب حتّى لو كانت غير مستخدمة، لكن يمكنك حذف أي من الأنماط المخصصة التي قمت بإنشائها بنفسك. ويفضّل قبل ذلك أن تتأكّد من أن تلك الأنماط غير مستخدمة في المستند الحالي. لحذف النمط، انقر عليه بزر الفأرة الأيمن في نافذة الأنماط والتنسيق واختر احذف Delete. بإمكانك تحديد أكثر من نمط وحذفها دفعة واحدة بالضغط على مفتاح Ctrl أثناء التحديد. ستُحذَف الأنماط مباشرة إذا كانت غير مستخدمة في المستند. وبخلاف ذلك ستظهر رسالة تنبّهك أن النمط مطبَّق في المستند الحالي، انقر على نعم لتأكيد الحذف. إذا حذفت أحد الأنماط المستخدمة، سيُطبَّق النمط الافتراضي على جميع العناصر التي كان النمط المحذوف مطبقًا عليها. إذا كانت لديك أيّة أسئلة أو أفكار حول إنشاء الأنماط واستخدامها، شاركنا بها عبر صندوق التعليقات. ترجمة- وبتصرّف - لدليل المستخدم الخاص بالحزمة المكتبية LibreOffice.

تطرّقنا في دروس سابقة إلى كيفية بدء العمل على محرر النصوص Writer، أحد برامج حزمة الأدوات المكتبية LibreOffice. كما شرحنا كيفية استخدامه لتنسيق الفقرات النصية وإدراج مختلف العناصر، كالجداول والصور. وفي هذا الدرس سنتعرّف على الأنماط في LibreOffice وعلى كيفية تطبيقها لتنسيق الأجزاء المختلفة للمستند، من العناوين الرئيسية، إلى العناوين الفرعية والمتون. ما هي الأنماط؟ النمط Style هو مجموعة من التنسيقات التي يمكنك تطبيقها على صفحات محددة، نصوص محددة، أو غيرها من عناصر المستند لكي تغيّر مظهرها بسهولة وسرعة. وبما أنّ النمط ينطوي على أكثر من تنسيق، كاللون، الحجم، السمك، وغيرها؛ فإن تطبيق النمط يعني تطبيق مجموعة من التنسيقات على نفس العنصر دفعة واحدة. يغفل كثير من المستخدمين عن فائدة استخدام الأنماط، فينسّقون الفقرات، الكلمات، الجداول، تخطيطات الصفحة، وغيرها من أجزاء المستند يدويا. أي أنّهم اعتادوا على كتابة المستندات وفقًا لسمات مرئية محددة؛ على سبيل المثال، نوع الخط، حجمه، وغيرها من التنسيقات كالخط العريض أو المائل. أما الأنماط فهي عبارة عن سمات منطقية، واستخدامها يعني أنّك ستتوقف عن تحديد حجم الخط، لون الخط، محاذاة النص، وغيرها، وتكتفي بتحديد النمط فقط، لأنّك عرّفت ذلك النمط مسبقًا ليكون بتلك السمات/الخصائص. بعبارة أخرى، استخدام الأنماط يعني أنّك ستؤكّد على ماهية النص (أو الصفحة أو أي عنصر آخر)، بدلًا من التأكيد على مظهر ذلك النص. تساعد الأنماط على تحسين تناسق المستند، كما أنّها تسهّل تغيير التنسيقات الرئيسية. على سبيل المثال، قد ترغب في تغيير المسافات البادئة لكل الفقرات، أو تغيير نوع الخط لكل العناوين في المستند، هذه المهمة البسيطة يمكن أن تتطلب منك القيام بالكثير من التغيرات في أماكن مختلفة ومتفرقة، وستصبح العملية منهكة جدًا في المستندات الطويلة. وعلى النقيض من ذلك، سيتطلب الأمر إجراء تغيير واحد فيما لو قمت باستخدام الأنماط. بالإضافة إلى ذلك، تُستخدم الأنماط في عمليات أخرى، غير التنسيقات، حتّى وإن لم تكن مدركًا لها. على سبيل المثال، يعتمد Writer على أنماط العناوين Heading styles (أو غيرها من العناوين التي تحدّدها) عند إنشاء الفهارس Table of contents. وسنتطرّق إلى بعض الاستخدامات الشائعة للأنماط في درس لاحق. ما هي أنواع الأنماط التي يدعمها LibreOffice Writer؟ يدعم LibreOffice Writer أنواع الأنماط التالية: أنماط الصفحة Page Styles: وتتضمن الهوامش، الرؤوس والتذييل، والحدود والخلفيات. أنماط الفقرات Paragraph Styles: تتحكم هذه الأنماط بجميع جوانب مظهر الفقرة، مثل محاذاة النص، مواضع علامات الجدولة tab، التباعد بين السطور، والحدود، ويمكن أن تتضمن تنسيقات الأحرف أيضًا. أنماط المحارف Character Styles: تؤثر هذه الأنماط على نص محدد ضمن الفقرة، مثل نوع الخط، حجم النص، بالإضافة إلى تنسيقات النص العريض والمائل. أنماط الإطارات Frame Styles: تُستخدم لتنسيق أطر العناصر الجرافيكية والنصوص، وتتضمن التفاف النص، الحدود، الخلفيات، والأعمدة. أنماط القوائم List Styles: تتيح لك هذه الأنماط إمكانية تحديد، تنسيق، وتغيير مواضع التعداد الرقمي أو النقطي في القوائم. كيفية تطبيق الأنماط يوفر LibreOffice Writer عدة طرق لتحديد الأنماط وتطبيقها. باستخدام قائمة الأنماط Styles Menu تحتوي هذه القائمة على الأنماط المهمة شائعة الاستخدام من مجموعة أنماط الفقرات والمحارف، والتي يمكن تطبيقها على أي مستند نصي. ولكنها لا تحتوي على أنماط الإطارات، الصفحات، والقوائم. لتطبيق أحد أنماط الفقرات، ضع مؤشر الكتابة في موضع ما داخل الفقرة، ثم اختر أحد الأنماط من قائمة الأنماط (ستجد القائمة في أقصى يمين شريط التنسيق): على سبيل المثال، سنقوم بتطبيق النمط “المسمى الوظيفي”، على عنوان المستند، لأنه النمط المخصص لتنسيق عناوين المستندات. نضع مؤشر الكتابة في أي موقع داخل العنوان، ثم نختار النمط “المسمى الوظيفي” من القائمة: بمجرد تطبيق النمط، سنلاحظ تغيّر مظهر النص حسب التنسيقات المخصصة لذلك النمط. وبذلك يمكننا تنسيق النصوص والفقرات بنمط معين وبصورة متسقة بنقرة واحدة سريعة. ملاحظة: لا يمكن إضافة أنماط مخصصة إلى قائمة الأنماط. باستخدام نافذة الأنماط والتنسيق Styles and Formatting تتضمن نافذة الأنماط والتنسيق مجموعة متكاملة من الأدوات الخاصة بالأنماط. ولفتح هذه النافذة واستخدامها لتطبيق أحد الأنماط، اذهب إلى عرض View ثم الأنماط والتنسيق Styles and Formatting من شريط القوائم العلوي. يمكنك أيضًا فتح هذه النافذة عن طريق المسار أنماط Styles > الأنماط والتنسيق Styles and Formatting، أو بالنقر على زر F11 من لوحة المفاتيح، أو بالنقر على زر الأنماط والتنسيق من الشريط الجانبي تعرض نافذة الأنماط والتنسيق جميع الأنماط المتاحة، وتكون هذه الأنماط مصنّفة في فئات حسب النوع (أنماط الفقرات، أنماط الأحرف، أنماط الإطارات…إلخ)، ويمكنك استعراض قائمة الأنماط تحت كل فئة بالنقر على زر الفئة المرغوبة في الشريط العلوي من النافذة: لتطبيق أحد الأنماط، حدد الجزء/العنصر الذي تريد تطبيق النمط عليه، ثم انقر نقرا مزدوجًا على النمط المرغوب من الفئة المناسبة لذلك العنصر. على سبيل المثال، سنطبق نمط المحارف “وصلة إنترنت” على نص معين في المستند. وللقيام بذلك يجب أن نحدد ذلك النص أولًا، بخلاف أنماط الفقرات حيث نضع مؤشر الكتابة في أي موضع داخل الفقرة، لأنّ نمط الأحرف يطبّق على النص المحدد فقط وليس على الفقرة برمّتها. بعد تحديد النص ننقر نقرا مزدوجًا على النمط “وصلة إنترنت”: ملاحظة: يمكنك تحديد مجموعة الأنماط التي تريد عرضها في نافذة الأنماط والتنسيق، إذ يمكنك عرض كل الأنماط، الأنماط المخفية، الأنماط المطبقة، أو الأنماط المخصصة فقط: باستخدام نمط الفقرة Fill Format Mode يمكنك استخدام أداة نمط الفقرة (وأفضّل تسميتها أداة نسخ النمط أو تكرار النمط) لتطبيق النمط على العديد من المناطق المختلفة في المستند بصورة سريعة، دون الحاجة إلى العودة إلى نافذة الأنماط والتنسيق والنقر المزدوج مرارًا وتكرارًا. وهذه الطريقة مفيدة لتطبيق نفس النمط على العديد من الفقرات المتفرّقة، أو غيرها من العناصر. لاستخدام أداة نمط الفقرة، افتح نافذة الأنماط والتنسيق كما وضحنا في الفقرة السابقة ثم حدد النمط الذي تريد تطبيقه بنقرة واحدة بزر الفأرة الأيسر. بعد ذلك انقر على أداة نمط الفقرة (أيقونة الدلو) في الجزء العلوي للنافذة. عندما يتحول شكل المؤشر إلى شكل الدلو، مرر مؤشر الفأرة فوق الفقرة (أو الإطار، أو القائمة، أو غيرها من العناصر) التي تريد تطبيق النمط عليها، ثم انقر نقرة واحدة بزر الفأرة الأيسر لتطبيقه: وكما ذكرنا أعلاه، يُطبق نمط الفقرة على الفقرة برمتها، أما نمط الأحرف فنحتاج إلى تحديد الكلمة أو مجموعة الكلمات لتطبيقه. نكرر نفس الخطوة على العناصر التي نريد تنسيقها بنفس النمط لحين الانتهاء من إجراء جميع التغييرات. ولإلغاء تفعيل الأداة نمط الفقرة Fill Format Mode، ننقر على زر الدلو مجددًا، أو نضغط على المفتاح ESC من لوحة المفاتيح. ملاحظة: عندما تكون أداة نمط الفقرة فعالة، فإن النقر بزر الفأرة الأيمن على أي مكان في المستند سيؤدي إلى التراجع عن آخر عملية تطبيق للنمط. باستخدام اختصارات لوحة المفاتيح بعض اختصارات لوحة المفاتيح مخصصة لتطبيق أنماط معيَّنة، ويمكنك استخدامها لتطبيق النمط بصورة سريعة ومباشرة لاختصار الوقت، بدلًا من استخدام الطرق سابقة الذكر. على سبيل المثال، يُستخدم مفتاحا الاختصار Ctrl+0 لتطبيق النمط متن النص Text Body، ومفتاحا الاختصار Ctrl+ 1 لتطبيق النمط عنوان رئيسي Heading 1، والاختصار Ctrl+ 2 لتطبيق النمط عنوان رئيسي Heading 2، وهكذا. بإمكانك تعديل اختصارات لوحة المفاتيح وتخصيصها حسب ما يناسبك بالذهاب أدوات Tools > خصص Customize > لوحة المفاتيح Keyboard، ومن ثم تحديد مفاتيح الاختصارات المرغوبة والنقر على زر عدّل Modify: بهذا نكون قد وصلنا إلى نهاية الدرس. في الدرس القادم سنتعرّف على كيفية تعديل الأنماط المبدئية وإنشاء أنماط جديدة مخصصة. ترجمة- وبتصرّف - لدليل المستخدم الخاص بالحزمة المكتبية LibreOffice.

تعرّفنا في الدرس السابق على الأنماط في LibreOffice Writer وتطرقنا إلى كيفية تطبيق الأنماط المبدئية المتاحة بطرق عدّة. في هذا الدرس سنتعلّم كيفية تعديل الأنماط الافتراضية وتخصيصها، وسنذكر بعض الأمثلة على استخدامات الأنماط في نهاية الدرس. إذا كانت خصائص الأنماط المبدئية Default غير ملائمة لتنسيق مستندك، بإمكانك أن تعدّل تلك الأنماط لتحصل على النمط الخاص بك وبالسمات المناسبة لك. يمكن تعديل الأنماط بالطرق التالية باستخدام مربع الحوار “نمط Style”، تحديث النمط من عنصر مُحدَّد سلفا، باستخدام خاصية التحديث التلقائي AutoUpdate (لأنماط الفقرات والإطارات فقط). ملاحظة: تُطبَّق التغييرات على الأنماط نمط سيتم تطبيقها في المستند الحالي فقط. لتعديل الأنماط في أكثر من مستند، يجب أن تُعدِّل القالب أو تنسخ الأنماط إلى تلك المستندات. تعديل النمط باستخدام مربع الحوار “نمط Style” من خلال مربع الحوار “نمط” يمكنك تعديل كل أنواع الأنماط، سواء كانت أنماط الفقرات، أنماط القوائم، أنماط الإطارات، وغيرها. للقيام بذلك نفتح نافذة الأنماط والتنسيق بالنقر على الأيقونة T في الشريط الجانبي (أو عن طريق المسار عرض View > الأنماط والتنسيق Styles and Formatting). بعد ذلك ننقر على النمط الذي نريد تعديله بزر الفأرة الأيمن ونختار عدّل Modify: يختلف مربع الحوار الذي سيظهر باختلاف نوع النمط الذي قمنا بتحديده. ويحتوي على مجموعة من التبويبات التي تحتوي بدورها على مجموعة من الخيارات القابلة للتعديل والتخصيص. إن اخترنا تعديل النمط “المسمى الوظيفي” على سبيل المثال، والذي هو أحد أنماط الفقرات، سيظهر مربع الحوار التالي. نلاحظ أن مربع الحوار يحتوي على 16 تبويبًا مختلفًا، ومنها يمكن تعديل نوع الخط، المحاذاة، المسافات البادئة والتباعد، الحدود، الشفافية، وغيرها من خصائص النصوص. فمثلًا لتغيير نوع الخط، نذهب إلى تبويب “الخط“، ومن قائمة “الخط” نختار نوع الخط المرغوب لكل نوع من النصوص (الغربية، الآسيوية، المركبة). سنختار النوع Sakkal، ونبقي على بقية الخيارات كما هي (يمكن الاستفادة من المربع في الجزء السفلي من مربع الحوار لمعاينة التغييرات على النص) ولتغيير لون الخط نذهب إلى تبويب “تأثيرات الخطوط“، ونختار اللون المرغوب من قائمة “لون الخط“. كما يمكننا إضافة تأثيرات أخرى، كالظل، التخطيط، أو إضافة خطوط أسفل، أعلى، أو على النص. بعد إجراء جميع التغييرات ننقر على زر “طبّق” لتطبيقها، ثم زر “حسنًا” للخروج من مربع الحوار. بمجرد تطبيق التغيير، سيُحدَّث هذا النمط في كل أنحاء المستند ليعكس التغييرات التي أجريناها، دون الحاجة إلى إعادة تطبيق النمط من جديد. مثال آخر؛ لو عدّلنا النمط “قائمة 2“، أحد أنماط القوائم، سنلاحظ أن تبويبات مربع الحوار تختلف كثيرًا عن التبويبات التي ظهرت مع النمط السابق. يمكننا هنا اختيار شكل النقاط للتعداد الرقمي، تغيير نمط الترقيم للتعداد الرقمي، تغيير شكل المخطط التفصيلي للتعداد الرقمي أو النقطي، وغيرها. سنقوم هنا مثلًا باختيار أيقونة للتعداد النقطي بدلًا من الرمز الافتراضي. نذهب لتبويب صورة Image ثم ننقر على “طبّق” > “حسنًا“. ستُحدَّث القوائم في المستند حسب التغييرات على النمط، ويمكننا تطبيق النمط المعدّل على أيّة قائمة في المستند الحالي لأن التغييرات ستبقى محفوظة. باختصار، تأتي مع كل نمط الخيارات الخاصة به، يمكنك استكشافها من مربع الحوار “نمط” وتعديلها حسب الرغبة. تحديث النمط من عنصر محدد يمكننا أيضًا أن نعدّل الأنماط الافتراضية (المبدئية) عن طريق تحديثها لتكتسب خصائص العنصر المحدد (فقرة، قائمة، إطار…إلخ)، وهذه الطريقة عكس الطريقة السابقة، أي أننا نقوم بتنسيق العنصر أولًا ثم نحدث النمط وفقًا لذلك، بدلًا من تعديل النمط ثم تطبيقه. لتحديث النمط، نحدد العنصر ذا التنسيق الذي نريد اعتماده نمطا، ومن نافذة الأنماط والتنسيق نحدد النمط الذي نريد تحديثه، ثم ننقر على السهم بجانب أيقونة الدلو في الجزء العلوي من النافذة ونختار “حدّث النمط Update Style“. على سبيل المثال، سنقوم بتحديث النمط المبدئي ليكون بنفس خصائص إحدى فقرات المستند التي نسّقناها مسبقًا؛ نضع مؤشر الكتابة داخل الفقرة، ثم نحدد “النمط المبدئي” من نافذة الأنماط والتنسيق، وأخيرًا ننقر على زر السهم ونختار “حدّث النمط“. عند تحديث النمط سيتغير مظهر جميع فقرات المستند التي طبّقنا عليها النمط المبدئي مسبقًا ليعكس خصائص النمط المُحَدّث. يمكن أيضًا تحديث النمط عن طريق الخيار “حدّث لتطابق التحديد” من القائمة الفرعية الخاصة بالنمط ضمن قائمة الأنماط الرئيسية. لا تقتصر إمكانيّة تطبيق التحديث على أنماط الفقرات فقط، وإنما على كلّ أنواع الأنماط، مع مراعاة تحديد العناصر ذات الصلة قبل تحديد النمط وتحديثه. ملاحظة: عندما تقوم بتحديث أحد أنماط الفقرات، تأكد من أنّ الفقرة المحددة منسقة بخصائص/سمات فريدة. لأنّه إذا كانت هناك خصائص مختلطة/مشتركة بين الفقرة والنمط الذي تريد تحديثه، ستبقى هذه الخصائص كما هي في السابق ولن يحدث أي تغيير. باستخدام خاصية التحديث التلقائي AutoUpdate تُطبّق هذه الخاصية على أنماط الفقرات والإطارات فقط. وكما هو واضح من الاسم، تعمل خاصية التحديث التلقائي على تحديث النمط تلقائيًا عندما تُعدِّل مباشرةً تنسيق الفقرة أو الإطار المطبّق عليه ذلك النمط. فلنفترض مثلًا أنَك قمت بتطبيق النمط “متن النص” على فقرة معينة، وأثناء العمل على مستندك، غيّرت تنسيق هذه الفقرة يدويًا من شريط أدوات التنسيق. في هذه الحالة سيُحدَّث النمط “متن النص” تلقائيًا ليُصبح تنسيقه مطابقًا للتنسيق الذي طبّقته. لتفعيل هذه الخاصية، انقر بزر الفأرة الأيمن على نمط الفقرة أو نمط الإطار في نافذة الأنماط والتنسيق واختر “عدّل Modify“: ومن تبويب “المنظِّم Organizer” أشِّر على مربع الخيار “حدّث آليًا“. أمثلة على استخدامات الأنماط في ما يلي أمثلة على الاستخدامات الشائعة لأنماط الفقرات والصفحات في LibreOffice Writer. تحديد صفحة أولى مختلفة للمستند تتضمن المستندات عادة، خصوصا التقارير والخطابات الرسمية، صفحة أولى تختلف عن بقية صفحات المستند. على سبيل المثال، تكون ترويسة الخطابات أو الأوراق الرسمية مختلفة عن ترويسة بقية الصفحات. كما أن الصفحة الأولى من تقرير ما قد لا تحتوي على رأس وتذييل، بينما تحتوي عليهما بقية الصفحات. يتيح LibreOffice Writer تحديد نمط صفحة مخصَّص للصفحة الأولى، ونمط آخر يطبق تلقائيًا على الصفحات التي تليها. يمكننا، مثلا، تطبيق نمط باسم “الصفحة الأولى First Page” على الصفحة الأولى من المستند والنمط “المبدئي Default” على بقية صفحات المستند. والشكل التالي يوضح ما سيكون عليه تخطيط المستند. تقسيم المستند إلى فصول بطريقة مماثلة لما ذكر أعلاه، بإمكاننا تقسيم المستند إلى فصول. فيمكن أن نطبق نمط “الصفحة الأولى” على صفحة البداية لكل فصل، والنمط “المبدئي” على بقية صفحات الفصل، وبعد نهاية الفصل ندرج فاصلًا يدويًّا (بالذهاب إلى قائمة إدراج > فاصل يدوي). ثم ننتقل إلى الفصل التالي ونطبّق نمط “الصفحة الأولى” على بداية الفصل… وهكذا. يوضح الشكل التالي ما سيكون عليه تخطيط المستند. تغيير اتجاه الصفحات ضمن المستند الواحد يمكن أن تحتوي مستندات Writer على صفحات بأكثر من اتجاه. من الأمثلة الشائعة؛ مستند يحتوي على صفحة باتجاه أفقي في وسطه، في حين تكون بقية الصفحات باتجاه عمودي (يمكن تحقيق ذلك باستخدام فواصل الصفحات Page Breaks أو أنماط الصفحات). لإدراج صفحة أفقية في وسط المستند، ينبغي أولًا إدراج فاصل صفحات (إدراج > فاصل صفحات) في الموضع المرغوب، ثم اختر نمط صفحة باتجاه أفقي (بالعرض Landscape). لكن ضع في اعتبارك أن القيام بذلك قد يتطلب منك تعديل خصائص الصفحة الأخرى، كالترويسة، التذييل، وترقيم الصفحة للنمط الأفقي. بعد ذلك قم بإدراج فاصل صفحات آخر بعد الصفحة الأفقية، واختر نمط الصفحة المبدئي ليُطبق على بقية صفحات المستند. عرض ترويسات مختلفة على الصفحات اليمنى واليسرى يمكن التحكم بإعدادات أنماط الصفحات لكي تعرض الصفحة اليمنى والصفحة اليسرى التي تقابلها بشكل متعاكس، أو لعرض الصفحات باتجاه اليمين فقط، أو باتجاه اليسار فقط. فعندما تقوم بإدراج ترويسة على نمط صفحة بتخطيط منعكس mirrored، أو بتخطيط يمين ويسار right-and-left، بإمكانك أن تجعل محتوى جميع الصفحات باتجاه واحد (على اليمين فقط، أو على اليسار فقط) أو باتجاهين مختلفين على الصفحات اليمنى والصفحات اليسرى. على سبيل المثال يمكنك وضع رقم الصفحة على الحافة اليسرى للصفحات اليسرى ووضعه على الحافة اليمنى للصفحات اليمنى، ووضع عنوان المستند على الحافة اليمنى للصفحات اليمنى فقط (كما موضح في الشكل أدناه) أو تخطيط الصفحة كما يناسب مستندك. التحكم بفواصل الصفحات تلقائيًا ينتقل Writer، في الإعداد المبدئي، إلى الصفحة التالية عندما تمتلئ الصفحة الأولى بالمحتوى. لكن يمكنك تغيير هذا الإعداد إن لم يكن مناسبًا لك. على سبيل المثال، بإمكانك أن تجعل إحدى الفقرات تبدأ في صفحة جديدة أو عمود جديد (حتّى وإن لم تكن الصفحة الحالية ممتلئة)، ومن ثم تحديد نمط الصفحة الجديدة. يمكنك استخدام مثل هذه الخاصية لعناوين الفصول التي غالبًا ما تبدأ في صفحة جديدة يُسرى (للمستندات باللغة العربية). إنشاء الفهارس تلقائيًا إذا كنت ترغب في إنشاء فهرس تلقائي،فيجب عليك أولا تطبيق الأنماط المناسبة على العناوين الرئيسية والعناوين الفرعية لمستندك، ثم افتح مربع الحوار “ترقيم التخطيط” (من القائمة “أدوات Tools” > “ترقيم التخطيط Outline Numbering“) لكي تحدّد الأنماط الخاصة بكل مستوى من مستويات الفهرس.تُنشّأ الفهارس مبدئيًّا باستخدام أنماط العناوين (Heading)، لكن بالطبع بإمكانك استخدام الأنماط التي تريد. تحديد تتابع أنماط الفقرات بإمكانك التحكم بإعدادات أحد أنماط الفقرات لكي يُطبَّق نمط معيّن (تحدده بنفسك) على الفقرة التالية عند الضغط على مفتاح Enter.على سبيل المثال، بإمكانك جعل الفقرة المطبق عليها النمط “عنوان رئيسي 1” تُتبع بفقرة يُطبق عليها النمط “متن النص“. مثال آخر؛ فقرة بنمط “المسمى الوظيفي” تُتبع بفقرة بنمط “عنوان رئيسي 1” تُتبع بفقرة بنمط “اقتباس” تُتبع بفقرة بنمط “عنوان رئيسي 2” تُتبع بفقرة بنمط “متن النص“.. وهكذا حسب التخطيط العام لمستندك. عند تحديد تتابع الأنماط بهذه الصورة، لن تضطر إلى تطبيق الأنماط يدويًا. ترجمة- بتصرّف - لدليل المستخدم الخاص بالحزمة المكتبية LibreOffice.

لكتابة تنسيقات CSS يمكن قراءتها بسهولة بإمكانك إضافة مسافات فارغة وتعليقات في ورقة الأنماط لجعلها أسهل قراءة. بالإمكان أيضًا جمع المُحدّدات معًا، عندما تريد تطبيق نفس القاعدة على أكثر من هدف. هذا الدرس جزء من سلسلة تعلم CSS: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. (هذا الدرس) تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. المسافات الفارغة (Whitespace) مصطلح مسافة فارغة (whitespace) يعني المسافة المعروفة وعلامات الجدولة (Tab) ومحرف السّطر الجديد. بإمكانك استخدام هذه المحارف لتسهيل قراءة ورقة الأنماط. لاحظ أن مصطلح المسافة الفارغة قد يستخدم في سياق تخطيط الواجهات للإشارة إلى الجزء من الصفحة الّذي يُترك دون عناصر: كالحواف (margins) والحشوات (gutters) والمسافات بين الأعمدة والسّطور. الملف الّذي تتدرّب عليه يحوي قاعدة واحدة في كلّ سطر، وأقل ما يمكن من المسافات الفارغة، وعندما تصبح ورقة الأنماط أكبر، فإنّ هذا الأسلوب سيجعل قراءة الورقة (ومن ثمّ صيانتها) أصعب. لك كامل الحرّيّة في اختيار أسلوب تنسيق الورقة الّذي ترغب فيه، ولكن قد يكون لبعض المشاريع الّتي يعمل عليها أكثر من شخص أسلوب مُتّفق عليه. أمثلة يُفضّل بعض المُصمّمين أسلوبًا وجيزًا في الكتابة، بحيث لا يفصلون السّطر إلا عندما يصبح طويًلا للغاية: .carrot {color: orange; text-decoration: underline; font-style: italic;} ويُفضّل آخرون جعل كل زوج من الخواص وقيمها في سطر منفرد: .carrot { color: orange; text-decoration: underline; font-style: italic; } وبعضهم يحاذي هذه السطور بمسافتين أو أربع أو بمحرف Tab: .carrot { color: orange; text-decoration: underline; font-style: italic; } والبعض يحبّ محاذاة كلّ شيء شاقوليًّا (ولكن هذا صعب الصّيانة): .carrot { color : orange; text-decoration : underline; font-style : italic; } والبعض يفضّل استخدام عدد مختلف من المسافات في كلّ مرّة لتسهيل القراءة: .vegetable { color: green; min-height: 5px; min-width: 5px } .vegetable.carrot { color: orange; height: 90px; width: 10px } .vegetable.spinach { color: darkgreen; height: 30px; width: 30px } البعض يستخدم محارف Tab، والبعض يستخدم المسافات فقط. التعليقات (Comments) تبدأ التعليقات في CSS بـ‎/*‎ وتنتهي بـ‎*/‎. بإمكانك استخدام التعليقات للشرح أو توضيح جزء معيّن في ورقة الأنماط، وأيضًا لحجب (comment out) أجزاء من الورقة مؤقّتًا بغاية تجريب التغيّرات. لحجب جزء من الورقة، أحِط هذا الجزء بتعليق بحيث يتجاهله المتصفّح. توخَّ الحذر في موضعي بداية التّعليق ونهايته، إذ يجب أن تكون بقيّة الورقة سليمة الصّياغة: /* style for initial letter C in first paragraph */ .carrot { color: orange; text-decoration: underline; font-style: italic; } تجميع المحددات عندما تتشارك عدّة عناصر بقاعدة واحدة، يمكن تحديد مجموعة من المحدّدات مفصولة بفاصلة لاتينية ","، وعندها فإنّ القاعدة ستُطبّق على كلّ العناصر المعنيّة. لتطبيق قواعد لكلّ عنصر من العناصر السّابقة على حدة، يمكن تعريف قاعدة منفصلة في موضع آخر من ورقة الأنماط تستهدف العناصر المنفردة. مثال تجعل هذه القاعدة لون <h1> و<h2> و<h3> واحدًا. وهذا يجعل من السّهل تغيير اللون من مكان واحد لكلّ العناصر مرّة واحدة: /* color for headings */ h1, h2, h3 {color: navy;} تمرين: إضافة التعليقات وتحسين هيئة ورقة الأنماط حرّر ملف CSS الّذي تتدرّب عليه، وتأكد من احتوائه على هذه القواعد (بغضّ النظر عن الترتيب): strong {color: red;} .carrot {color: orange;} .spinach {color: green;} #first {font-style: italic;} p {color: blue;} اجعل قراءته أسهل بإعادة ترتيبه بطريقة تراها منطقيّة، وبإضافة مسافات فارغة وتعليقات في أماكن مناسبة. احفظ الملفّ وحدّث الصّفحة في المتصفّح لتتأكّد من أن تعديلاتك لم تؤثّر على النّتيجة: تمرين احجب جزءًا من ورقة أنماطك، دون تعديل أيّ شيء آخر، بحيث تجعل الحرف الأوّل من المستند أحمر اللّون: (هناك أكثر من طريقة لتحقيق هذه النّتيجة) شاهد الحل إحدى طرق فعل ذلك هي احتواء قاعدة .carrot بتعليق: /* .carrot { color: orange; } */ ما التالي؟ استخدمنا تنسيقي الخطّ المائل والمُسطّر في ورقة أنماطنا. سنتعرّف على كيفية إضافة تنسيقات أخرى للنّصوص في الدرس القادم: تنسيق نصوص صفحات الويب باستخدام CSS ترجمة -وبتصرف- للمقال Readable CSS من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

أوراق الأنماط المتتالية (Cascading Style Sheets أو CSS اختصارًا) هي لغة تُستخدم لوصف كيفيّة عرض المستندات للمستخدمين. تُكتب هذه المستندات في لغة رُماز مثل HTML. المستند هو مجموعة من المعلومات التي تهيكل باستخدام لغة رُماز (markup language). يُقصّد بعرض المستند للمستخدم تحويله إلى صيغة مُفيدة للجمهور، فالمتصفحات مثل Firefox وChrome وInternet Explorer مًصمّمة بحيث تعرض المستندات للمستخدمين مرئيًّا، مثلًا: على شاشة حاسوب أو جهاز إسقاط (projector) أو طابعة. سنتعرض خلال هذه السلسلة إلى المواضيع التالية: مدخل إلى أوراق الأنماط المتتالية (CSS) (هذا الدرس). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. أمثلة صفحة الويب هذه الّتي تقرأها هي مُستند. تُهيكل المعلومات التي تشاهدها في صفحة ويب باستخدام لغة HTML (اختصارًا لـHyperText Markup Language). مرُبعات الحوار في التطبيقات هي أيضًا مُستندات، وقد تكون مُهيكلة باستخدام لغة رماز مثل XUL (اختصارًا لـXML User Interface Language)، والتي قد تجدها في بعض برامج Mozilla. في هذه السلسلة، ستُقرأ معلومات مُدرجة تحت عنوان تفاصيل أكثر كالفقرة التالية، تحوي هذه الفقرات على معلومات وروابط لمصادر إضافية عن مفهوم أو موضوع تغطّيه هذه الأقسام. اقرأ هذه المعلومات حالما تُشاهدها وتابع الروابط، أو تجاوزها وعُد لقراءتها لاحقًا. تفاصيل أكثر كلمة المستند لا تعني ما تعنيه كلمة "ملفّ"، إلّا أنّه يمكن حفظ المستندات ضمن ملفّات. المستند الذي تقرأه الآن لم يُحفَظ في ملفّ، بل يُجلب من قاعدة بيانات على الخادم والذي بدوره يولّد المستند بجمع أجزائه من عدّة ملفّات. مهما يكن الأمر، فإنّك في هذه السّلسلة ستتعامل مع مستندات محفوظة في ملفّات. بإمكانك إيجاد معلومات أكثر عن المستندات ولغات الرُماز في مواقع أخرى من شبكة مطوّري Mozilla: اللغة الوظيفة HTML لصفحات الويب XML للصفحات المُهيكلة بشكل عامّ SVG للرسوم XUL لواجهات برامج Mozilla سنطّلع على أمثلة من هذه اللغات في الجزء الثّاني من السلسلة. تفاصيل أكثر يُدعى البرنامج الذي يعرض المستندات على المستخدم في المصطلحات الرسميّة لـCSS بوكيل المستخدم (user agent أو UA). المتصفّح ليس إلّا واحدًا من وكلاء المستخدم، فلا تقتصر CSS على المتصفّحات أو العرض المرئيّ، ولكنّنا في الجزء الأوّل من السّلسلة لن نتعامل إلّا مع CSS في المتصفّح. للاطّلاع على التعاريف الرسمية للمصطلحات في CSS، انظر Definitions في وصف CSS من قبل جمعيّة W3C المسؤولة عن تعيين المعايير القياسيّة للويب. لنبدأ العمل: إنشاء مستند أنشئ مجلّدًا جديدًا في جهازك لحفظ وتنظيم تمارين هذه السّلسلة. افتح محرّر النصوص وأنشئ ملفًّا نصيًّا جديدًا، سنقوم بكتابة المستند في هذا الملف خلال التمارين القليلة التالية. انسخ والصق HTML أدناه. احفظ الملف باسم doc1.html. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> افتح علامة تبويب أو نافذة جديدة في متصفّحك، ثم افتح الملف الذي أنشأته. من المُفترض أن ترى النّص وحروفه الأولى بخطّ عريض، كهذه الصّورة: قد يختلف ما تراه في متصفحك قليلًا عن الصّورة من حيث الخط أو الألوان أو المسافات بين الحروف، وهذا غير مهمّ الآن. المستند الآن لا يستخدم CSS، وهذا ما سنفعله في الخطوة التالية. لماذا نستخدم CSS؟ استخدم CSS لتعريف تنسيق مستنداتك، بما في ذلك التصميم والتخطيط والاختلافات في العرض بين الأجهزة المختلفة وقياسات الشاشات المختلفة. بإمكانك إضافة CSS في رأس (<head>) مستند (نُسمّي ذلك ورقة أنماط مُضمّنة) أو إرفاق ملف منفصل يحوي تعريف التنسيقات (ورقة أنماط خارجيّة)، ثمّ ربطها مع المستند برابط يُضاف إلى رأسه. لللأسلوب الأخير عدّة محاسن، ففصل التنسيقات عن الرُماز: يقلّل من التكرار يُسهل الصّيانة يسمح بإجراء تغيير على نطاق الموقع كاملًا من مكان واحد مثال يمكنك مثلًا حفظ معلومات التنسيقات في ملفات مشتركة بين كلّ الصّفحات، فعندما يُربَط مستند بورقة أنماط تُحدّد لون العناوين الثانويّة (h2)، بإمكانك استخدام هذا التنسيق في كل صفحات الموقع بالإشارة إلى هذه الورقة. عندما يعرض مستخدم صفحة ويب، يقوم المتصفح بجلب معلومات التنسيق في الوقت نفسه. عندما يطبع مستخدم صفحة ويب، بإمكانك توفير معلومات تنسيق مختلفة تُسهّل من قراءة الصّفحة المطبوعة. كيف تعمل HTML وCSS معًا؟ بشكل عامّ، استخدم HTML لوصف محتوى الموقع، وليس تنسيقه. بإمكانك استخدام CSS لتحديد تنسيق المستند، وليس محتواه. أحيانًا نضطر لإجراء بعض الاستثناءات لهذه القاعدة، كما سنرى لاحقًا. تفاصيل أكثر توفّر لُغة رُماز مثل HTML بعض الوسائل لوصف تنسيق المستند بشكل منفصل عن CSS، فيمكنك مثلًا في HTML استخدام الوسم <b> لجعل النّص عريضًا، ويمكنك تحديد لون خلفيّة المستند في وسم متن المستند <body>. عندما تستخدم CSS، يُفضّل عادةً تجنّب استخدام هذه الميزات في لغة الرُماز بحيث يبقى وصف تنسيق المستند في موضع واحد فقط. لنعمل: إنشاء ورقة أنماط أنشئ ملفًّا نصيًّا آخر بجوار الملف السابق doc1.html. احفظ الملف باسم style1.css. سيحوي هذا الملف وصف التنسيقات. في ملفّ CSS، انسخ والصق السّطر التالي ثمّ احفظ الملف: strong {color: red;} ربط المستند بورقة الأنماط لربط المستند بورقة الأنماط، عدّل ملفّ HTML، أضف السّطر التالي في موقعه: <link rel="stylesheet" href="style1.css"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> احفظ الملف وحدّث الصّفحة في متصفّحك. تجعل ورقة الأنماط الحروف الأولى بلون أحمر، كهذا: ما التالي؟ لدينا الآن مستند بسيط مرتبط بورقة أنماط خارجيّة، وسنتعلّم كيف يجمعهما المتصفح معًا لعرض الصّفحة في الجزء التالي: كيف تعمل CSS؟ ترجمة (بتصرّف) للجزأين الأوّلين What is CSS و Why use CSS من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

سنتعرف في هذا الدّرس على الأنماط Patterns، الظلال Shadows وقواعد الملء في Canvas بالإضافة لرسم النصوص وتطبيق التنسيقات عليها مثل أنواع الخطوط Fonts وخصائصها. كما سنتعرف على واحدة من السمات الأكثر إثارة في canvas وهي القدرة على استخدام الصور لعمل تركيبات صور ديناميكية، خلفيات أو حتى شخصيات الألعاب. الأنماط Patterns تتيح لك canvas إنشاء أنماط باستخدام الصور وتحديد أنواعها باستخدام الدالة ()createPattern. تأخذ الدالة ()createPtterns معاملين هما الصورة المراد استخدامها لتطبيق النمط والتي يمكن أن تكون عنصر HTML أو وسم <video> أو حتى عنصر canvas آخر. المعامل الآخر هو النوع Type وهو عبارة عن نص string يحدد كيفيّة استخدام الصورة لتطبيق النمط. createPattern(image, type) يأخذ المعامل type أحد القيم التالية والتي تحدد كيفية استخدام الصورة لإنشاء النمط Pattern: Repeat: تكرر الصورة في الاتجاهين الأفقي Horizontal والعمودي Vertical repeat-x: تكرر الصورة في الاتجاه الأفقي Horizontal repeat-y: تكرر الصورة في الاتجاه العمودي Vertical no-repeat: تظهر الصورة مرة واحد كما هي. تشبه الدالة ()createPattern دوال التدرج اللّوني gradient التي شرحتها في الدرس السّابق. عند إنشاء نمط يمكننا إسناده إلى الخاصية fillStyle أو strokeStyle كما في المثال التالي: var img = new Image(); img.src = 'someimage.png'; var ptrn = ctx.createPattern(img,'repeat'); ملاحظة: تأكّد من أنك قمت بإنشاء صورة وإعطائها المسار الصحيح قبل استدعاء الدالة ()createPattern. في هذا المثال سنقوم بإنشاء نمط وإسناده للخاصية fillStyle حيث سننشئ النمط ضمن الدالة onload للصورة وذلك للتأكد من تحميل الصورة قبل إسنادها للنمط. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; img.onload = function(){ var ptrn = ctx.createPattern(img,'repeat'); ctx.fillStyle = ptrn; ctx.fillRect(0,0,150,150); } } النتيجة: الظلال Shadows باستخدام الظلال في canvas يمكنك عمل تظليل للنصوص والصور. استخدام الظلال في canvas يتضمن 4 خصائص: shadowOffsetX = float تشير إلى أن الظل يمتد من الكائن بمسافة أفقية. لا تتأثر هذه القيمة بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. shadowOffsetY = float تشير إلى أن الظل يمتد من الكائن بمسافة عمودية. لا تتأثر هذه القيمة بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. shadowBlur = float تحدد حجم تأثير الضبابية blurring. لا تتعلق هذه القيمة بعدد الـ pixels ولا تتأثر بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. shadowColor = color هي قيمة ألوان CSS قياسية وتحدد لون الظل وقيمتها الافتراضية هي لون أسود بشفافية كاملة. الخاصيتان shadowOffsetX و shadowOffsetY تشيران إلى أي مدى ينبغي أن يمتد الظل من الكائن في الاتجاه X والاتجاه Y. تأخذ الخاصيتين قيمًا سالبة وذلك لتحديد اتجاه الظل إما لليسار X- أو للأعلى Y-. الخاصية shadowBlur تحدد حجم الضبابية للظل ولا تتعلق بعدد الـ pixels ولا تتأثر بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. المثال التالي يرسم نصًا بتأثيرات ظلال مختلفة باستخدام القيم أعلاه: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; ctx.fillText("أهلًا بك في أكاديمية حسوب", 5, 30); } قواعد الملء Fill Rules عند استخدام الخاصية ()fill يمكنك تحديد خوارزمية الملء التي تريد تطبيقها ويمكن من خلالها تحديد فيما إذا كانت النقطة داخل أو خارج المسار وبالتالي تحديد هل سيتم ملئها أم لا. ويوجد لها قيمتان: nonzero وهي القيمة الافتراضية. evenodd مثال: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.beginPath(); ctx.arc(50, 50, 30, 0, Math.PI*2, true); ctx.arc(50, 50, 15, 0, Math.PI*2, true); ctx.fill("evenodd"); } رسم النصوص كأي شكل من الأشكال التي يمكن رسمها على canvas يمكن أيضًا رسم النصوص وتطبيق خصائص مختلفة عليها. يوفّر سياق التصيير rendering context في canvas طريقتين لتصيير النصوص: 1- باستخدام الدالة fillText fillText(text, x, y [, maxWidth]) تملأ نصًا مُعيّنًا عند موضع x,y معين، المعامل maxWidth معامل اختياري يحدد أقصى عرض للرسم. 2- باستخدام الدالة strokeText strokeText(text, x, y [, maxWidth]) تملأ حواف نص معين عند موضع x,y معين، المعامل maxWidth معامل اختياري يحدد أقصى عرض للرسم. مثال: ملء نص باستخدام fillStyle function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); } مثال: ملء حواف نص باستخدام strokeStyle function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); } تصميم وتنسيق النصوص يوفر سياق التصيير Rendering Context مجموعة من الخصائص تمكّنك من تحديد المظهر الذي تريد إظهار النص به على Canvas. ستبدو هذه الخصائص مألوفة لك إن كنت قد عملت على CSS من قبل. font = value تحدد نمط النص الحالي (نوع الخط) الذي سيظهر به النص، تستخدم هذه الخاصية نفس قواعد استخدام الخاصية CSS font. القيمة الافتراضية للخط هي 10px sans-serif. textAlign = value تُحدّد إعدادات محاذاة النص. القيم التي تأخذها هذه الخاصية هي start ،end ،left ،right أو center. القيمة الافتراضية لها هي center. textBaseline = value تُحدّد إعدادات خط الأساس .Baseline القيم التي تأخذها الخاصية text Baseline هي top ،hanging ،middle ،alphabetic ،ideographic أو bottom. القيمة الافتراضية لها هي alphabetic. direction = value تُحدّد الاتجاهية. القيم التي تأخذها الخاصية textAlign هي ltr ،rtl ،inherit. القيمة الافتراضية لها هي inherit. يوضّح الرّسم البياني التالي المأخوذ من WHATWG مختلف خطوط الأساس Baseline التي تدعمها الخاصية textBaseline. مثال: ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100); قياسات النصوص المتقدمة في حال كنت بحاجة لتطبيق المزيد من التفاصيل على النصوص فإن الدالة ()measureText توفر لك إمكانية لقياس النصوص حيث تُرجع الدالة ()measureText كائن من نوع TextMetrics يحتوي على عرض النص الحالي بالبكسل. يظهر المثال التالي كيف يمكنك قياس الخط والحصول على عرضه: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText("foo"); object text.width; } الصور يعتمد استيراد الصور في Canvas على خطوتين أساسيتين: الحصول على مرجع reference لكائن HTMLImage أو لعنصر Canvas آخر لاستخدامه كمصدر. يمكن استخدام الصور أيضًا عن طريق توفير رابط URL. رسم الصورة على canvas باستخدام DrawImage. يستخدم Canvas API أي من أنواع البيانات التالية باعتبارها مصدر صورة للحصول على الصور ورسمها: HTMLImageElement: يتم إنشاء الصور باستخدام المنشئ constructor كأي عنصر <img> في HTML. HTMLVideoElement: استخدام عنصر <video> كمصدر للصورة أي استخدام الاطار الحالي للفيديو كصورة. HTMLCanvasElement: يمكن استخدام عنصر <canvas> آخر كمصدر صورة. استخدام الصور في Canvas يوجد عدة طرق لاستخدام الصور في Canvas: استخدام صور من نفس الصفحة يمكننا الحصول على مرجع للصور reference من نفس الصفحة باستخدام أحد الطرق التالية: document.images collection استخدام الدالة ()document.getElementsByTagName استخدام الدالة ()document.getElementById عن طريق معرّف ID الخاص بالصورة استخدام صور من مجالات أخرى ويتم ذلك باستخدام الخاصية crossorigin للعنصر <img> يمكنك طلب إذن لتحميل الصورة من مجال Domain آخر لاستخدامها في استدعائك للدالة ()drawImage. إذا سمح مجال الاستضافة وصول cross-domain للصورة فسيتم استخدام الصورة في Canvas دون التأثير عليها أما في حال لم يتم السماح بالوصول للصورة فسيحدث تشويه للعنصر canvas. استخدام عناصر Canvas أخرى كما هو الحال مع الصور العادية يمكن الوصول لعناصر canvas أخرى باستخدام الدالة ()document.getElementsByTagName أو ()document.getElementById. يجب التأكد قبل استخدام عنصر Canvas آخر من أن العنصر الأساسي يحوي على رسم أو مسار. واحدة من أهم استخدامات هذا الأسلوب هو استخدام عنصر canvas كمعرض صور مصغرات لعنصر Canvas أكبر منه. إنشاء صورة من الصفر خيار آخر لإنشاء HTMLImageElement هي باستخدام المنشئ() Image: var img = new Image(); img.src = 'myImage.png'; في حال استدعائك للدالة ()drawImage قبل الانتهاء من تحميل الصورة قد يظهر خطأ في المتصفحات القديمة لذا عليك التأكد من استخدام الحدث load بعد الانتهاء من تحميل الصورة: var img = new Image(); img.addEventListener("load", function() { // execute drawImage statements here }, false); img.src = 'myImage.png'; استخدام إطارات الفيديو يمكنك أيضًا استخدام إطارات الفيديو <video> لإظهاره في الـ canvas. مثال: function getMyVideo() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); return document.getElementById('myvideo'); } } سنكمل في الدّرس القادم التعامل مع الصور في canvas والتعرّف على خصائصها بالإضافة لإنشاء معرض فني. المصادر

نتوقّع أنا وزوجتي أن نُرزَق بفتاة في الأشهر القليلة المقبلة، ولذلك عملنا على تعمير منزلنا بكل ماهو ذو لون وردي ولطيف، حتَّى نرى تلك اللّمسة الرّقيقة في كلّ ما اقتنيناه للحضانة، هذا ما ألهمني لكتابة درس للمبتدئين في برنامج (Illustrator) في هذا الموضوع، الذي أفصل فيه كيف يمكننا إنشاء تصميم خاص بالأطفال، معتمدين على أشكال وأنماط بسيطة. تابع هذا الدّرس خطوة خطوة لإنشاء مجموعة من التصاميم البسيطة، مع توظيف بعض الطّرق المتقدّمة شيئا ما لتكوين مجموعة قابلة للاستعمال والتصرف في الحوصلة. سوف يكون درسنا مقسما إلى أربعة أقسام للإحاطة بعمليّة تصميم كل واحد من تلك الألعاب أو الدُمى المتحرّكة، سنبتدئ في هذا بأيسر الطّرق ثمّ بعد ذلك في كلّ مرّةٍ نضيف بعض الطّرق المتقدّمة خلال العمل. أساسا، سنعمل بأداة (Shape tool)، وكذلك (Pathfinder) ثمّ ننظر كيفيّة عمل (Swatches) والخطوط لتحقيق هذا العمل الفنّيّ. تشكيل سحابةسنبدأ عملنا هذا من أبسط الأشكال مقارنة مع بقيّة التّشكيلات، ألا وهو السّحاب، ابدأ برسم ثلاثة دوائر بأحجام مختلفة على لوحة الرّسم ولا تنس الضّغط على (shift) خلال الرّسم للحفاظ على هيئة الدّائرة الصّحيحة، ثمّ قم بالضّغط على جميعها واحدة واحدة ثمّ قم باستعمال (alignment panel) لترصيف الدّوائر أفقيّا إلى الأسفل. أضف شكل مستطيل لملء الفراغات ولتشكيل قاعدة متّصلة، ولا تجعل المستطيل يتجاوز نهايات الدّوائر وإلّا فإنّك ستجد نقاط حادّة خارج حدود السّحابة. اضغط على خاصّيّة (Unite) من (Pathfinder) وذلك من أجل لمّ الأجزاء ودمجها كلّيّة. غيّر خطّ السّحابة حتّى يكون مثل غرز الإبر وذلك عن طريق تفعيل (Dash Line) واملأ الفراغين (Dash/Gap) بعددين لتعيين المسافة بين أجزاء الخطّ المقسّم ثمّ اضغط على زرّ (Round Cap) حتَّى تجعل نهاية أجزاء الخطوط انسابيّة وجميلة لا مستطيلة حادّة. غيّر البياض الطبيعي الذي يملأ الشّكل، واضغط مرّتين على لون الخطّ ثم اختر لونا أرجوانيا فاتحا وللتّسهيل فهذا رمز اللّون الذي عملنا عليه في درسنا هذا (#C093C6). اجعل شكل السّحابة مضغوطا عليه ثم اذهب إلى: Object > Path > Offset Path ثمّ اجعله ثلاثة مليمتر (3mm). حدّد الأخير المعدّل للتو ثمّ حسّنه عبر زيادة حجمه بستّ نقاط (6pt) وعدّل (Dash/Gap) إلى صفر وخمسة نقاط (0pt , 5pt). هذا سيجعل الخطّ المتقطّع يبدو كدائرات متداخلة ممّا يجعلها تبدو جميلة من جهة أحرف الشّكل الذي نصممّه. غيّر لون الخطّ المنقّط الخارجيّ للّون الورديّ الطّفوليّ، وفي درسنا هذا اخترنا (#F7B5D3). اختر أداة رسم المستطيل (Rectangle tool) ثمّ قم بنقرة واحدة في مكان ما على لوحة الرّسم، ثمّ أدخل بيانات حجم هذا المستطيل ثلاثة على ستة مليمتر (3x6mm) ليكون لديك مستطيل مثل الذي نستعمله في درسنا هذا بالضّبط. لوّن المستطيل بنفس اللّون الورديّ ثم انسخه والصقه أمام الأوّل وذلك عبر ضغط الأزرار بالتّوالي (Ctrl+C ثم Ctrl+F). أدر المستطيل المنسوخ لتسعين درجة ليبدو كالقاطع والمقطوع (90°) ثمّ زد في الشّفافيّة عبر تخفيض (Opacity) لكلا الشّكلين بخمسين بالمائة (50%). اسحب الشّكلين نحو (Swatches palette)، فإنّ هذا سيولّد (Swatch) تمكنك من صبغِ كلّ الأجزاء بنفس اللّون وهذا ما سيمكّننا من تكوين (Pattern) منقوش. استعمل هذه (Swatch) الجديدة لصبغ حافية شكل السحابة، ثمَّ تأكّد من أنّها قد فعّلت حتى نحافظ على سلامة الخطّ المنقّط. تشكيل القلبالآن تعالوا بنا ننتقل إلى أمر أكثر تعقيدا. ارسم مستطيلا مدوّرا على لوحة الرّسم ولكن قبل نزع اصبعك من على الفأرة وسّع الزاوية قدر المستطاع بالضغط على الرز الأيمن للفأرة ثمّ حرّك الفأرة خمسا وأربعين درجة (45%). انسخ هذا الشّكل ثمّ أدره حتى يصبح على شكل قاطع ومقطوع، (Shape builder) بديل جيّد لـ (Pathfinder) استعمله لقطع الزائدين في الأسفل ضاغطا على (Alt). (Shape builder) يمكنه أيضا مزجها معا مثل (Pathfinder)، قم برسم خطّ يقطع الأجزاء الثلاثة لجعلهما شيئا واحدا. يمكننا الآن اتّباع نفس الطريقة لعمل النموذج الورديّ مبتدئين مع الخط الخارجيّ بثلاثة مليمتر (3mm) . بدلا من إعادة كلّ الخطوات السابقة بالإمكان استعمال (eyedroppper) وهي ستنسخ لك النموذج على الشّكل الجديد بلا عناء. تشكيل الشجرةارسم دائرة على لوحة الرّسم ثمّ استعمل القلم لرسم شكل قريب ممّا تراه في الصّورة ليكون جذع الشّجرة. استعمل (Pathfinder) أو (Shape builder) لدمج الشّكليْن معا. اجعل الخطّ مقطّعا متّبعا نفس الخطوات المشروحة سابقا باستخدام (Eyedroppper) من أجل تزيين الشّكل بالنّموذج الورديّ. هذه المرّة سنستعمل القلم لإضافة بعض الميزات لرسومنا، اجعل الخطّ بحجم ثلاثة نقاط (3pt)، ثمّ اضغط على (Shift) واللّون الأرجوانيّ فقط وليس كلّ النموذج كما هو الحال بالضّغط بزرّ الفأرة الأيسر مباشرة، ثمّ ارسم خطّا لرسم فرع الشجرة. سيقوم القلم بإعادة رسم ذلك الخطّ، ولذلك قم بالضغط مرّتين على القلم ثمّ عطّل خاصّيّة (keep selected) ثمّ أكمل رسم فروع الشّجرة. تذكّر أنّه يمكنك دائما تعيين الخطّ وإعادة رسمه بالقلم إذا لم يكن رسمك الأوّل سليما أو إذا أردت تعديل بعض النّقاط في رسمك فإنّه يمكنك تحريكها بـ (Direct selection tool). إضافة بعض الخطوط والرسّوم يدويّا تزيد من جمال الرّسم، والآن فتعالوا نتقدّم خطوة أخرى إلى الأمام. تشكيل الفراشةالآن باستخدام أداة (Ellipse tool) و(Pathfinder) فقط، سنرسم ثمّ ندمج مجموعة من الرّسومات حتى نكوّن الجسم الأساسيّ للفراشة الطّائرة. لتحقيق التطابق بين الطّرف الأيمن و الأيسر اذهب إلى: Object > Transform > Reflect ثمّ اختر (Vertical) ثمّ اضغط على (Copy)، ثمّ ضع الجناح الجديد في مكانه. انسخ الجسم الأساسيّ إلى ذاكرة الحاسوب (Ctrl+c) لأنّنا سنلصقه فيما بعد. ادمج كلّ الأشكال مستعملا (Pathfinder) أو (Shape Builder) ثمّ انجز النموذج الورديّ الذي أعددناه. ليس من اللّائق ترك فراشتنا مكوّنة فقط من هذا النموذج البسيط معدومة من المزيد من التفاصيل، من أجل ذلك سنقوم بلصق ما نسخناه في ذاكرة الحاسوب (Ctrl+v) داخل جسم الفراشة ثمّ غيّر التصميم إلى نموذج الخطّ المتقطع باستخدام (Eyedroppper). الآن سنرسم ابتسامة جميلة على وجه فراشتنا. يمكننا تزيين الأجنحة أيضا باستعمال القلم نستخدمه في ذلك مع خاصّيّة (Keep selected option) لأنّه من الصّعب أن نرسم دائرة أو دوائر بالقلم دون أن نعدّل آخر جزء منها والخاصّيّة (Keep selected) معطّلة في حين أنّ تفعيلها يجمع أواخر الرّسم بالقلم معا فيكون حينئذ الشّكل أفضل بكثير. الآن ارسم دوائر مركزيّة بالقلم ولا تكترث للزّلات لأنّه يمكنك بسهولة إعادة رسم الأجزاء لتنظيف الرّسم أكثر. اذهب إلى: Object > Transform > Reflect لقلب الرّسم مع التطابق للجهة الأخرى. تتمة الرسمارسم دائرة صغيرة ومستطيلا في لوحة الرّسم ثمّ قم باستعمال (Align panel) لتصفيفهما من الجهتين كما يظهر في الصّورة: أعط الدّائرة لونا أرجوانيّا وشفافيّة بـعشرين بالمائة (20% Opacity) ثمّ أزل اللّون الذي يملأ المستطيل وكذلك لون المحيط حتّى يكون غير مرئيّ، ثمّ اسحب الشكليْن نحو (Swatches panel) لصناعة نموذج جديد منهما. طبّق نموذج الّنقاط على مستطيل كبير حتى يستوعب الرّسوم التي هي أصغر منه، واضغط على (Crtl+Shit) ورمز "]" أو اضغط الزّر الأيمن للفأرة واختر: select Arrange > Send to Back استعمل القلم لرسم خطوط على الخلفيّة. أخف هذه الخطوط خلف الرسوم عن طريق إرجاعها للخلف مرّات عديدة بالضّغط على(Crtl+Shit) ورمز "]" أوبالضّغط على الزّر الأيمن للفأرة واختر: select Arrange > Send to Back الصّورة النهائيّة تمتاز بمجموعة من الأشكال التي رسمناها في هذا الدّرس، قمنا بذلك باستعمال (Pathfinder) و(Shape Builder) وكذلك عن طريق العمل على الخطوط وخصائصها و(Swatch palette) وأخيرا استعمال القلم من أجل إضافة بعض الإمتيازات لرسومنا. ترجمة -وبتصرف- للدرس Beginner Illustrator Tutorial: Cute Baby Style Artwork.