لوحة المتصدرين

تستخدم الصور الرسومية عادة كصور رمزية بسبب وقوعها في موقع وسط بين تمثيل الشخص الذي يستخدمها وبين الإبقاء على هويته مجهولة في نفس الوقت، وفي هذا الدليل سنستخدم أدوات الفكتور في برنامج إليستوريتور لإنشاء صورة رمزية بسيطة بأسلوب الفن الخطي "Line Art" وألوان بسيطة، وسنصمم الصورة الرمزية بحيث تكون قابلة للتعديل بحيث يمكن أن يُنتج أكثر من صورة رمزية لأكثر من شخص، من نفس الصورة. والتصميم الذي سنقوم به في هذا الشرح تم تبسيطه إلى أشكال أساسية من أجل إنتاج شكل عام للوجه يمكن تعديله بإضافة أو تغيير لون البشرة وشكل الشعر لتمثّل شخصيات عدة، وهذا الأسلوب مفيد لصفحات مثل مقابلة فريق العمل، حيث يمكن استخدام شخصيات كثيرة لها نفس الأساس والأسلوب، لكنها تختلف لتمثّل شخصيات مختلفة. وستكون الصور الرمزية التي سنصممها داخل دائرة، فارسم شكلًا بيضاويًا ellipse مع الضغط على زر shift، ثم احذف الملء الافتراضي ذا اللون الأبيض للدائرة، فنحن نريدها فارغة، وزد سُمك الإطار إلى 6 نقاط "6pts"، وتأكد من تنشيط خيار النهايات الدائرية "Round Cap". ارسم مستطيلًا داخل الدائرة، وحدد كلا العنصرين ثم اضغط على الدائرة مرة أخرى لتجعلها العنصر المحوري "Key Object". استخدم زر المحاذاة الأفقية إلى المنتصف "Horizontal Align Center" –كما في الصورة- لجعل المستطيل في وسط الدائرة. اختر أداة السهم الأبيض –أداة التحديد المباشر Direct Selection Tool-، وانقر على نقاط التحكم في الزوايا –Corner Widgets- واسحبها لتجعل زوايا المستطيل دائرية. إن كنت تستخدم نسخة قديمة من إلستوريتور فاستخدم أداة المستطيل المُدوَّر Rounded Rectangle، أو من قائمة Effect >‏ S**tylize > ‏Round Corners. اختر أداة الشكل البيضاوي مرة أخرى وارسم دائرة تمثّل العين، واملأها باللون الأسود من أداة fill في شريط الأدوات. اضغط على مفتاحي shift وalt بينما تسحب هذه الدائرة لتصنع نسخة منها وتجرها في نفس المستوى إلى الناحية الأخرى من الوجه، ثم اختر كلا العينين واجمعهما معًا في مجموعة واحدة من خيار group في القائمة المختصرة أو بالضغط على ctrl+g. اضغط على shift ثم على الإطار الخارجي للوجه كي تضيفه إلى التحديد السابق، ثم اترك مفتاح shift، واضغط على الوجه مرة أخرى لتجعله العنصر المحوري في التحديد. وسيبقى العنصر المحوري في التحديد في مكانه سامحًا للعينين فقط أن يتحركا حين نضغط على زر المحاذاة الأفقية إلى المنتصف، كما في الصورة أعلاه. ارسم دائرة في أي مكان في لوحة الرسم ثم استخدم السهم الأبيض لتحذف نقطتين من النقاط الأربعة التي تكوّن الدائرة، ليتبقى لديك ربع دائرة، وتأكد من أن هذا القوس له نهايات دائرية "Rounded Cap". أدر هذا القوس بزاوية 45 درجة، وانقله إلى أعلى العين ليشكًل الحاجب. انسخ هذا القوس لاستخدامه للحاجب الآخر، وكذلك للأنف والفم، وكبّر حجم النسخة التي ستجعلها للفم قليلًا. ارسم مستطيلًا صغيرًا وحدد النقطتين السفليتين باستخدام أداة السهم الأبيض، واسحب نقاط التحكم لتجعل النصف السفلي دائريًا. انقل هذا المستطيل إلى أسفل الفم مباشرة ليمثّل الرقبة، ولتسهيل عملية المحاذاة تأكد من تفعيل المرشدات الذكية "Smart Guides" في قائمة view. لحذف الجزء الزائد من الشكل، اختر مستطيل الرقبة ثم اختر أداة المقص "Scissors"، وانقر في أماكن تقاطع المسارين، واحذف الأجزاء التي لا تريدها. ارسم دائرة كبيرة لتمثل الأكتاف، وستمتد الدائرة لتكون أكبر من الإطار الدائري الخارجي لتصنع القوس المناسب للكتفين، ويمكنك حذف الأجزاء الزائدة باستخدام أداة المقص كما في الخطوة السابقة. اقطع المسار في المكان الذي يمتد فيه خارج الإطار الذي حددناه للصورة الرمزية. حدد كل المسارات والأشكال التي تشكّل الأساس للشخصية التي نرسمها، واضغط على مفتاح alt واسحب الشكل لصنع نسخة منه إلى جانبه سنستخدمها لاحقًا في هذا الشرح. وسنبدأ الآن بتخصيص هذا الوجه البسيط بإضافة الشعر: ارسم مستطيلًا كبيرًا، واجعل مركزه واحدًا مع نقطة المركز للشخصية، واسحب نقطتي التحكم للزاويتين العلويتين منه لتجعل نصفه الأعلى نصف دائرة. استخدم أداة المقص لتهذّب المسار الذي يخرج عن إطار الدائرة. ولرسم خصلة تفرق الشعر، استخدم أداة القوس Arc لرسم مسار من نقطة المنتصف العليا وانزل بها إلى محاذاة الحاجب، واضغط على زر F لتقلب القوس، ثم عدّل قُطره باستخدام مفاتيح الأسهم على لوحة المفاتيح. احذف الأجزاء الزائدة باستخدام المقص. يجب أن يبدو الشعر وكأنه يغطي جزءًا من الوجه. وهكذا يجب أن يكون لديك شكل كما بالصورة أعلاه، ورغم استخدامنا لأشكال أساسية في صنع هذه الصورة الرمزية إلا أن النتيجة تبدو ذات مظهر لطيف ومقبول. اصنع نسخة من الصورة الاحتياطية التي نسخناها قبل قليل من أجل استخدامها لشخصية أخرى، وارسم في تلك النسخة الجديدة دوائر كثيرة حول الرأس لتكون نواة لشعر مموج وقصير. حدد كل الدوائر واضغط على زر unite في لوحة pathfinder كي تدمجهم جميعًا في إطار واحد. احذف إطار الوجه الذي يقع داخل تفاصيل الشعر لترى أن الصورة الرمزية صارت تعبر عن شخص مختلف تمامًا. ولأن هذه الصورة ليس بها شعر يغطي منطقة الأذن، فسنرسم له أذنين، عبر رسم دائرة وحذف إحدى نقاطها لتكون نصف دائرة، وانسخها لتضع واحدة على كل جانب من الرأس. يمكن تخصيص الشخصية أكثر بملحقات مثل النظارات مثلًا، ولفعل ذلك: ارسم مستطيلًا صغيرًا واجعل حوافه دائرية قليلًا باستخدام أداة السهم الأبيض وأكمل رسم النظارة بنسخ الشكل إلى العين الأخرى وحذف الحاجبين، لترى أن الصورة تغيرت مرة أخرى ليكون شخصًا ثالثًا. والآن نأتي إلى مرحلة الألوان، وأسهل طريقة لإضافة لون إلى رسم هو عبر أداة Live Paint Bucket Tool، أو أداة الدلو: حدد كل المسارات والأشكال التي تريد تلوينها، ثم اضغط على أداة الدلو لتجعل الشكل مجموعة حية قابلة للتلوين. ألغ اختيار كل شيء، وحدد لونًا لملء كل جزء في الشكل، ثم طبقه على الشكل بالنقر بأداة الدلو في المكان الذي ترغب بالتلوين فيه. ورغم أننا رسمنا الشخصيات بمسارات مفتوحة في الغالب إلا أن أداة الدلو ستلون أجزاء الصورة كما لو كانت مسارات مغلقة. كما ترى في الصورة أعلاه، فإن تناسق لون الشعر والبشرة للصورة الرمزية يجعلها تعبر أكثر عن الشخصية التي تمثلها. يمكنك إضافة ظل للصورة بالذهاب إلى قائمة Object، ثم Expand، لجعل الألوان التي خصصناها للشخصية دائمة، واختر من المربع الحواري خيار Object. من القائمة المختصرة بالزر الأيمن للفأرة، اختر ungroup أكثر من مرة حتى تتأكد من فك كل المجموعات التي أنشأناها من قبل. حدد أحد جزئي الشعر ثم اضغط ctrl+c أو cmd على ماك لنسخه، ثم ctrl+f للصقها أعلى الرسم. غيّر لون الملء إلى الأسود، ثم اجعل شفافيته 10%. حرّك الشكل إلى أسفل قليلًا ليغطي جزءًا من الوجه. استخدم أداة القلم لكي تحيط الأجزاء التي لا تريدها من الشكل الأسود الذي كررناه قبل قليل لكي تشكّل أداة مؤقتة نستخدمها مع أداة pathfinder، حدد كلا الشكلين واضغط زر minus front. كرر العملية باستخدام نسخة من شكل الوجه الأساسي لتنشئ ظلًا صغيرًا على الرقبة، اذهب إلى قائمة Arrange ثم Bring To front لكي تضع الشكل فوق باقي الرسم ارسم إطارًا عامًا باستخدام القلم حول الأماكن التي تريد حذفها، ثم حدد كلا الكلين واختر Minus Front في لوحة pathfinder. ويجب أن تكون النتيجة النهائية تصميم فكتور لصورة رمزية لطيفة يمكن استخدامها كصورة رمزية على الإنترنت، ويمكنك إنشاء عدة شخصيات من هذا الشكل الأساسي كما ذكرت بالأعلى، وستظهر تلك الصور بوضوح في أماكن الصور الصغيرة المساحة بسبب تصميمها البسيط. ترجمة -بتصرف- لمقال How To Create Vector Avatar Characters with Adobe Illustrator لصاحبه Chris Spooner.

أوراق الأنماط المتتالية (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.