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

سنتعلّم مبادئ HTML و CSS لإنشاء مشاريع ويب خاصة بنا. سيتميّز هذا الدرس بتركيزه على الجانب العملي بشكل كبير، حيث سنبدأ فورًا بإنشاء مشروع خاص بنا. أمّا بالنسبة للنواحي النظرية فسنشرحها عند الحاجة أثناء تقدّمنا ببناء المشروع. بهذه الطريقة سنكتسب أساسًا متينًا وسريعًا في مجال تطوير الويب. سأوجّهك خلال هذا المشروع إلى روابط خارجية تُشير إلى مصادر أخرى للتوسُّع في نقاط معيّنة إن أحببت ذلك. المشروع سيكون المشروع عبارة عن بناء ملف شخصي portfolio على الويب. سيضم صفحة بداية Home ومدوّنة Blog وصفحة تُظهر مشاريع ويب المستقبلية التي تنوي إنشائها Projects، بالإضافة إلى صفحة للتواصل Contact. الهدف من المشروع الهدف منه هو جعلك تدخل عالم برمجة الويب ومساعدتك كي تتعلّم كيفية إيجاد المزيد من المعلومات حول أي موضوع لوحدك. ستصبح قادرًا بعد ذلك على معالجة مشاريع ويب أكثر تعقيدًا. ما هو HTML و CSS؟ لغة الرُماز المعلَّم Hypertext Markup Language والتي ندعوها اختصاراً HTML هي لغة مسؤولة عن بُنية structure صفحة الويب. فمثلًا يمكنك تعريف عناوين headings وفقرات paragraphs ونصوص texts وصور images في HTML. أمّا بالنسبة لأوراق الأنماط المتتالية Cascading Style Sheet وندعوها اختصاراً CSS فهي مسؤولة عن تنسيق (تنميط) style وتخطيط layout صفحة الويب. يمكنك تعريف تنسيقات جديدة خاصة بالألوان والخطوط وطرق المحاذاة وحتى يمكنك إنشاء بعض التحريكات animations البسيطة في CSS. تذكّر: تزوّدنا HTML بالمحتوى في حين تُنسّق CSS هذا المحتوى. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن موقع ويب أم تطبيق ويب يمكننا بناء مواقع ويب websites معقّدة جدًّا باستخدام HTML و CSS فحسب. لكن ستكون مواقع الويب هذه ساكنة static، ويعني ذلك أنّ زوّار الموقع يمكنهم استعراض الصفحات لكنّهم لا يمكنهم التفاعل مع هذه الصفحات (باستثناء النقر على الروابط الموجودة في الصفحات). لبرمجة مواقع ويب ديناميكية dynamic تكون تفاعلية مع المستخدم، سنحتاج إلى لغة برمجة إضافية مثل JavaScript أو Dart. ويمكننا باستخدامهما تطوير (هو مفهوم أوسع من البرمجة) تطبيقات ويب Web Applications كاملة مثل التطبيقات التي تهتم بإجراء الحسابات المختلفة أو تطبيقات الألعاب أو تطبيقات المحادثة وغيرها الكثير. تعمل هذه التطبيقات في الواقع ضمن متصفّح الويب. كما توجد لغات برمجة وتقنيات أخرى مثل PHP وRuby وASP.NET تسمح ببناء تطبيقات ويب ديناميكية أيضًا ولكن تعمل هذه التطبيقات ضمن مزوّد خدمة الاستضافة (على المخدّم). كما يمكن المزج بين هذين الأسلوبين لإنشاء مواقع ويب فعّالة للغاية. يمكنك بعد الانتهاء من هذه الدروس، البدء بتعلّم مثل هذه اللغات والتقنيات وإنشاء تطبيقات ويب ديناميكية. الأجهزة المحمولة يُشكّل الوصول إلى مواقع الويب عن طريق الأجهزة المحمولة كالهواتف الذكيّة أو الأجهزة اللوحية نسبة كبيرة من عمليات الوصول العامة. وهكذا فإنّه من الضروري أن يظهر موقعنا بشكل جيّد على الشاشات الصغيرة. على العموم سنولي هذا الأمر اهتمامًا خلال هذه السلسلة التعليمية. الأدوات المستخدمة نحتاج إلى تطبيقين للدخول في عالم تطوير وبرمجة الويب، محرّر نصوص لإنشاء الملفات الخاصة بموقع الويب، ومتصفّح ويب لعرض وتجربة الموقع. 1- المحرر Editor سيكون كافيًا استخدام محرّر نصوص عادي (كبرنامج المفكرة Notepad في ويندوز مثلًا). ولكن من الأفضل استخدام محرّر نصوص يسهّل عملنا إلى حدٍّ كبير. لهذا الغرض أنصح باستخدام محرّر نصوص عصري ومخصّص لتحرير HTML. محرّر النصوص الذي أنصح به حاليًا هو Brackets (مجّاني من شركة أدوبي Adobe). يمكنك أن تستخدم أي محرّر تريده، ولكنّني في هذه السلسلة سأُشير أحيانًا إلى بعض وظائف تطبيق Brackets. يوجد محرّر نصوص جيّد أيضاً ويمكنك استخدامه وهو Atom، ويوجد محرّر نصوص آخر أيضًا، قديم قليلًا لكنّه جيّد وهو ++Notepad. حمّل ونصّب المحرّر Brackets إذا أردت ذلك. 2- المتصفح Browser يتوجّب على موقعنا أن يعمل على جميع المتصفحات الرئيسية بالطبع (Internet Explorer و Firefox و Chrome و Safari). على أية حال، أنصح باستخدام المتصفح Chrome لأغراض التطوير والبرمجة. يضم Chrome أدوات مفيدة للغاية لمطوّر الويب والتي سيستخدمها على نحو متكرّر. بالإضافة إلى ذلك، يدعم المحرّر Brackets المتصفّح Chrome بشكل جيّد، بحيث أنّ التغييرات التي تحدث في النص ستظهر مباشرةً ضمن Chrome (عن طريق ميزة اسمها Live Reload). حمّل ونصّب المتصفح Chrome الآن من هنا. إنشاء مستند HTML لنبدأ الآن بإنشاء مستند HTML الأوّل لنا من أجل موقع الويب: أنشئ مجلّدًا من أجل المشروع. سمّ المجلّد بالاسم Portfolio (أو أي اسم آخر ترغبه). افتح برنامج Brackets. من القائمة File اختر الأمر …Open Folder لتحديد وفتح المجلّد الذي أنشأناه قبل قليل. انقر بزر الفأرة الأيمن أسفل اسم المجلّد واختر New File لإنشاء ملف جديد، سمّه index.html. لديك الآن ملف نصّي فارغ اسمه index.html لماذا الملف index.html؟ في الواقع للملف index.html معنى خاص، فعندما نطلب من المتصفّح عنوان موقع ويب ما، وليكن مثلًا http://code.makery.ch، فعند ذلك سيُعرَض الملف index.html أولاً بشكل تلقائي، أي كأنّنا طلبنا العنوان http://code.makery.ch/index.html. بالنسبة إلينا، سيمثّل الملف index.html الصفحة الرئيسية. عمليتا العرض والتحديث يمكننا الآن تعبئة مستند HTML (الملف index.html) بالمحتوى. اكتب الأسطر التالية ضمن مستند HTML. لعرض الصفحة ضمن المتصفّح، انقر الأيقونة التي تُشبه البرق في الطرف الأيمن من البرنامج (المعاينة الحية Live Preview). سيُفتَح المتصفّح Chrome وسيُعرض المستند ضمنه، وفي حال أجريت أي تغيير جديد على مستند HTML فسترى نتيجة ذلك على المتصفّح مباشرةً، وهي في الحقيقة ميزة هامة وفعّالة. إذا لم تظهر الصفحة، اذهب إلى المكان الذي يوجد فيه الملف index.html وافتحه مباشرةً باستخدام Chrome أو أي متصفّح آخر. أمّا لم تُحدّث الصفحة تلقائياً، فاحفظ جميع الملفات المفتوحة (سننشئ ملفات أخرى تباعاً) ثم من نافذة المتصفح اضغط F5 على لوحة المفاتيح. تهانينا، لقد أنشأت موقع ويب الأوّل الخاص بك. التحييد Indentation لكي نُبقي الشيفرة نظيفة وواضحة، من المهم أن تعمل على تحييد النص بشكل صحيح باستخدام مفتاح الجدولة Tab من لوحة المفاتيح. يأخذ مفتاح Tab في برنامج Brackets أربعة فراغات بشكل افتراضي. بالنسبة لي أجد ذلك كثيراً بعض الشيء، لذلك أنصح أن تغيّر هذا لتصبح الفراغات spaces التي يأخذها المفتاح Tab تساوي 2، وذلك من أسفل نافذة Brackets. من المهم جدًّا أن ننتبه إلى تحييد الشيفرة من البداية، لكي نكتب شيفرة نظيفة وواضحة من بداية تعلّمنا للبرمجة عموماً. تلميح 1: استخدام Shift+Tab لكي تنقل المحاذاة إلى اليسار بدلاً من اليمين. تلميح 2: يمكنك محاذاة عدة أسطر بنفس الوقت إذا اخترتهم وضغطت Tab أو حتى Shift+Tab. عناصر HTML 1- الوسوم Tags في المثال السابق رأيت رموزًا مكتوبة ضمن رمزي <> تشكل هذه الرموز كلمات نُسميها الوسوم Tags. تتألف عناصر HTML عادةً (ولكن ليس دائماً) من وسمين، وسم للفتح opening tag ووسم للإغلاق closing tag. في مثالنا السابق كان <html> هو وسم للفتح، أمّا <html/> هو وسم للإغلاق حيث نلاحظ وجود محرف slash قبل اسم الوسم. أي نص موجود بين وسمي الفتح والإغلاق يُعتبر محتوى لعنصر HTML هذا. فمثلاً بالنسبة للوسمين <html> و <html/> نُخبر متصفّح الويب عن بداية ونهاية مستند HTML لصفحة الويب الخاصة بنا. أمّا الوسم الثاني الذي صادفناه هو الوسم <body>. يُحدّد هذا الوسم أنّ جميع المحتوى الواقع بين وسم الفتح <body> والإغلاق <body/> سيظهر بشكل مرئي للمستخدم في المنطقة الرئيسية من نافذة المتصفّح. 2- السمات Attributes تُعرّف السمات معلومات إضافية لعنصر HTML. وتقع هذه السمات ضمن وسم الفتح لعنصر HTML، ويكون لها دائماً اسم name وقيمة value. كمثال على السمات، دعنا ننظر إلى عنصر HTML الخاص بالروابط. وهو ربما من أهم العناصر على الإطلاق. يضم عنصر الروابط <a> السمة href (وهي اختصار للكلمتين hypertext reference) التي تحمل القيمة في هذا المثال http://code.makery.ch.ولكن سيعرض المتصفّح هذا الرابط على شكل النص التالي: My Website. البنية الأساسية لصفحة HTML لقد رأينا قبل قليل عنصري HTML وهما <html> و <body>. ولكن بنية صفحة (مستند) HTML تتكوّن عادةً من المزيد من العناصر. استبدل محتويات الملف index.html بالشيفرة التالية، بعد ذلك سنناقش كل عنصر HTML موجود فيها. بنية ملف (مستند) HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <p>Write anything you want to tell the world.</p> </body> </html> الشرح نضع في السطر الأوّل <DOCTYPE html!> دوماً. فهي تخبر المتصفّح عن نوع المستند. يشير الوسم <html> إلى بداية المستند والوسم <html/> إلى نهايته. يحتوي العنصر <head> (بين وسمي الفتح والإغلاق له) على معلومات إضافية حول الصفحة. وبشكل مختلف عن العنصر <body>، لا تظهر هذه المعلومات في نافذة المتصفح الرئيسية. يجب أن تكون هناك إشارة ضمن العنصر <head> حول الترميز character set المستَخدَم في هذا المستند: <"meta charset="utf-8>. إذا لم تحدّد الترميز المستَخدَم فإنّ بعض الرموز قد لا تظهر بصورة صحيحة. ربما قد لاحظت أنّ العنصر <meta> لا يمتلك وسم إغلاق. توجد بعض عناصر HTML التي لا تمتلك أيضًا وسوم إغلاق، ولكنها تعتبر استثناءً. نرى بعد ذلك الوسم <title> الذي يضم عنوان المستند والذي سيظهر على شريط العنوان لنافذة المتصفّح. كل شيء ضمن الوسم <body> سيظهر ضمن نافذة المتصفّح الرئيسية. يُعرّف العنصر <h1> العنوان الرئيسي الذي سيظهر للمستخدم ضمن صفحة الويب. ويمكن إنشاء عناوين فرعية أيضاً باستخدام العناصر <h2> <h3> <h4> <h5> <h6>. النص الموجود بين الوسمين <p> و <p/> يُعتبر فقرة مستقلة، وهذا ما يُعبّر عنه العنصر <p>. بعد كل وسم فتح لعنصر ما، يجب أن نحاذي العنصر التالي (بمفتاح الجدولة Tab) لتحسين عرض الشيفرة. ورغم أنّ ذلك ليس ضرورياً ولا يؤثّر أصلاً في عرض المستند، ولكن تأكّد من امتلاكك لهذه العادة الجيّدة. تلميح 1: يمكنك استخدام بنية HTML السابقة لأي صفحة HTML جديدة. تلميح 2: استخدم الاختصار Ctrl+S من لوحة المفاتيح لحفظ الملف الحالي. تلميح 3: استخدم الاختصار Ctrl+Z من لوحة المفاتيح للتراجع عن العمليات التي أجريتها. نحن مستعدّون الآن وبعناصر HTML البسيطة هذه، أن نرتقي بموقعنا إلى مستوى أعلى. في البداية لنُضِف صورة بحيث تبدو الصفحة الرئيسية لمشروعنا أكثر جمالًا. إدراج صورة لإدراج صورة نستخدم العنصر <img>. المثال التالي سيُدرج صورة موجودة ضمن ملف اسمه marco.jpg: <img src="marco.jpg" alt="Picture of me"> للعنصر <img> وسم فتح فقط ولا يوجد له وسم إغلاق. وهو يحتوي على سمتين src و alt. السمة src تُحدّد عنوان URL الذي يُعبّر عن اسم ملف الصورة ومساره. أمّا السمة alt فتمثّل النص البديل، وهو النص الذي يصف محتويات الصورة. يُستخدم هذا النص من قِبل محرّكات البحث، وفي حال تعذّر عرض الصورة ضمن الصفحة سيُعرض هذا النص بدلاً عنها. 1- عناوين URL النسبية والمطلقة تُستخدم عناوين URL من أجل السمة src الخاصة بعنصر الصورة، وأيضاً من أجل السمة href الخاصة بعنصر الارتباط. يُحدّد عنوان URL عنوان (مسار) ملف، وبصورة عامة العنوان هو مصدر resource قد يكون صورة أو صفحة ويب من موقع آخر. بالاعتماد على موقع الملف نستخدم إمّا العنوان النسبي relative أو العنوان المطلق absolute. فإذا كان الملف موجودًا ضمن نفس موقع الويب، عندها يمكن استخدام عنوان نسبي. فكما رأينا في المثال السابق اسم الملف وحده موجود دون عنوانه الفعلي (المطلق). يكون عنوان URL من النوع النسبي، نسبيًا دومًا إلى صفحة HTML الحالية، فإذا كان الملف المستهدف وصفحة HTML التي ستستخدمه موجودان ضمن نفس المجلّد فعندها يكفي الإشارة إلى اسم الملف فقط، أمّا إذا كانا ضمن مجلّدين مختلفين فعندها يحب أن يؤخذ ذلك بعين الاعتبار. فإذا فرضنا مثلًا أنّ ملف الصورة من المثال السابق موجودة ضمن مجلّد فرعي اسمه images سيكون عنوان URL النسبي لملف الصورة images/marco.jpg. أمّا إذا كان ملف الصورة موجود ضمن المجلّد الأب، فيمكنك عندئذ الوصول إليه باستخدام البادئة ( /.. ) أي سيصبح عنوان الملف في هذه الحالة marco.jpg/.. أمّا إذا كان الملف موجوداً ضمن موقع ويب آخر، فعندها يجب استخدام عنوان URL مطلق. تحتوي عناوين URL المطلقة على الاسم والمسار الكاملين للملف. حقائق عن عناوين URL: عنوان URL الذي يبدأ بـ //:http هو عنوان URL مطلق. عنوان URL بدون //:http هو عنوان URL نسبي بالنسبة إلى صفحة ويب الحالية. تُشير النقطة ( . ) إلى المجلّد الحالي. تُشير النقطتان ( .. ) إلى المجلّد الأب. أمثلة عن عناوين ويب النسبية والمطلقة: <!-- عناوين نسبية --> <a href="image-gallery.html">Image Gallery</a> <a href="blog/first-blog-entry.html">My First Blog Entry</a> <a href="../image-gallery.html">Back to Image Gallery</a> <!-- عناوين مُطلقة --> <a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a> 2- إضافة صورة إلى موقعنا لندرج صورة ضمن الصفحة، ينبغي نسخ ملف الصورة إلى المجلّد Portfolio. من الممكن أن تستخدم نفس الصورة الموجودة مع هذا الدرس، أو أن تستخدم صورة من عندك، ولكن احرص في جميع الأحوال على أنّك ستُحدّد اسم الملف مع الامتداد بدقّة. يجب أن تحصل على شيفرة شبيهة بما يلي (لاحظ أنّني أضفت عناوين فرعية بالإضافة إلى مزيد النصوص): الملف index.html مع الشيفرة اللازمة: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html> والصورة التالية لما ستبدو عليه الصفحة في متصفّح الويب: إن أردت تعلم المزيد حول HTML و CSS وأن تصبح خبيرًا بهما وأن تطور مواقع وتطبيقات ويب عالية الجودة، فأنصحك بالاطلاع على دورة تطوير واجهات المستخدم المقدمة من أكاديمية حسوب. سنتعلّم في الدرس الثاني كيف ننشر موقعنا على الانترنت. ترجمة -وبتصرّف- للدّرس HTML & CSS Tutorial - Part 1: Your First Website لصاحبه Marco Jakob. اقرأ أيضًا المدخل الشامل لتعلم تطوير الويب دليل تعلم لغة HTML دليل تعلم البرمجة

الهوية البصرية هي جميع الصور والمعلومات الرسومية التي تعبّر عن هوية العلامة التجارية وتميزها عن غيرها. بمعنى آخر، تصف كل شيء يمكن للعملاء رؤيته فعليًا ، من الشعار إلى التصميم الداخلي للمتجر إلى أغلفة المنتجات وغيرها. فكل شيء تصممه يدل على هوية تلك العلامة، ستعرف على الفور أين توجد عبوات كوكاكولا في قسم المشروبات في أي متجر بمجرد رؤيتك للون الأحمر فيه، وفي متجر الهواتف المحمولة ستتعرّف على أجهزة الآيفون بمجرد رؤيتك لشكل التفاحة، وهكذا. تصميم هوية بصرية بعنوان Plantamed Visual Identity للمصمم Ville Oké تحت ترخيص المشاع CC BY-ND 3.0 ما هي عناصر الهوية البصرية الرئيسية؟ صحيح أن الشعار والألوان من عناصر الهوية البصرية ولكنهما لا يمثلان وحدهما الهوية البصرية كلها، فعند العمل على تصميم الهوية البصرية عليك أن تخطط لإنشاء تصاميم متكاملة ومتناسقة لمختلف المواد بدءًا من موقع الويب وصولًا إلى التغليف. ولا يجب الخلط بين عناصر الهوية البصرية ومواد العلامة التجارية المطلوب إنشاء تصاميم لها والتي تختلف من حيث التعدد والنمط من علامة تجارية لأخرى، وتشمل العناصر الأساسية للهوية البصرية مايلي: الشعار. الألوان. النصوص وأسلوب الطباعة. دليل استخدام الهوية البصرية. الأيقونات. الرسوم البيانية والرسوم التوضيحية (الإنفوجرافيك). أسلوب الصورة أو التصوير. ومع ذلك، لا يكفي أن نصمم هذه العناصر لتكون الهوية البصرية ذات فاعلية، بل . يجب الحرص على أن تكون عناصر الهوية متميزة عن بقية المنافسين وتجذب انتباه الناس، ويجب أن ترسخ في الأذهان بسهولة، فشركة آبل على سبيل المثال لم تكتب اسمها على منتجاتها ومع ذلك فهي راسخة في أذهان الناس ويعلم الجميع منتجاتها وأي شيء يتعلق بعلامتها التجارية بمجرد رؤية أي إعلان أو صورة لها. ويجب أن تكون الهوية البصرية مرنة وقابلة للتطوير حيث يجب أن تنمو وتتطور مع العلامة التجارية نفسها، ويجب أن تكون متماسكة ومتناسقة ومتكاملة بحيث تكمّل عناصر الهوية بضعها بعضًا. كيف تبدأ التخطيط لبناء الهوية البصرية؟ قبل البدء بتصميم عنصر الهوية البصرية يجب أن تكون لدى الشركة أو العميل أو العلامة التجارية هوية تجارية حقيقية لتستطيع البناء على أساسها عناصر الهوية البصرية. وتتضمن الهوية التجارية كلًا من: الغرض من العلامة التجارية. الرؤية. المهمة. الرسالة. الأهداف. القيم. من خلال هذه المعطيات يمكنك فهم طبيعة العلامة التجارية وتوجهاتها، وبذلك تُصمِّم الهوية البصرية بما يتناسب معها، وفي حال كنت ستبني هوية بصرية لعلامة تجارية ليست حديثة النشأة وإنما لهذه العلامة التجارية هوية بصرية سابقة وهي تسعى لتطويرها، فيجب أن تأخذ هويتها البصرية القديمة في الحسبان، وتطوّر هذه الهوية البصرية. من المهم المحافظة على تراث وأساس العلامة التجارية، إذ أن الغالبية العظمى من العلامات التجارية الكبرى في العالم طورّت هويتها البصرية بناء على النسخة القديمة ولكن برؤية جديدة وأساليب تصميمة مبتكرة تتماشى مع التطور في الأساليب التسويقية ومزاجية الناس. على سبيل المثال عمدت شركة آبل إلى تطبيق البساطة في تصاميم هويتها البصرية حيث تجد الأسلوب البسيط في تصميم الشعار والمنتجات وحتى أنظمة التشغيل وكذلك عبوات وعلب المنتجات وحتى موقعها الإلكتروني ومختلف برامجها وتطبيقاتها، ما يدل بوضوح على تطبيق عناصر هويتها البصرية على كافة منتجاتها وحتى إعلاناتها وهو ما يحقق التكامل والوحدة والذي ساهم بدوره في إيصال شعار الشركة وهو البساطة في الاستخدام والعمل وكل ذلك عبر تصميم هويتها البصرية. وليس بالضرورة أن تسعى لتصميم هوية بصرية بحيث تجبر الجمهور المستهدف على تقبّل ما تقدمه هذه العلامة التجارية بل على العكس تمامًا، يجب الأخذ بالحسبان احتياجات وتطلعات الجمهور المستهدف وما يتوقعه من هذه العلامة التجارية وبذلك يتحقق التقارب والتجاذب الحقيقي بين الطرفين وتتحقق الأهداف وتصل الرسائل. ترغب في الحصول على تصميم هوية تجارية مميزة؟ وظّف مصمم هوية تجارية محترف لنشاطك التجاري من مستقل أضف مشروعك الآن تصميم عناصر الهوية البصرية بعد الحصول على كافة المعلومات التي تحدثنا عنها سابقًا وكتابة رؤوس أقلام الأفكار لصورة وشكل الهوية البصرية والتفكير مليًا في الطريقة الأفضل للتوجه في التصميم، سنبدأ بالعمل على تصميم عناصر الهوية البصرية واحدًا تلو الآخر، ودائمًا ما يكون الشعار هو أول هذه العناصر. الشعار هو أول هذه العناصر لأنه يمثّل شكل وهوية العلامة التجارية وأكثر ما يراه ويتفاعل معه الجمهور، ولتصميم الشعار قواعد ناظمة تساعد على إنتاج شعار متماسك ومتوازن تبدأ من رسم المخططات والنماذج الأولية باستخدام القلم والورقة، ثم يتم نقل الأفكار المرسومة إلى برامج التصميم على الحاسوب عبر استخدام الرسومات الشعاعية Vector ابتداءً من رسم النقاط والخطوط الرئيسية، ومن ثم تطوير الأشكال الأساسية للشعار، وأخيرًا تلوين الشعار بالألوان المناسبة لطبيعة الهوية البصرية وللعلامة التجارية، ويجب أن يكون واضحًا وبسيطًا ومتميزًا. للمزيد حول قواعد تصميم الشعارات يمكنك متابعة مقال قواعد تصميم الشعارات والأيقونات ضمن مقالات هذه السلسلة. الألوان بمجرد الانتهاء من تصميم شعار ممتاز يلبي احتياجات العلامة التجارية وجمهورها، يمكنك استكشاف لوحة الألوان الخاصة بالهوية البصرية، ويعد اللون أحد أهم ما يميز العلامة التجارية عن منافسيها كما أنه ما يثير المشاعر لدى الجمهور المستهدف ويؤدي إلى ترسيخ العلامة التجارية في الأذهان. تتميز لوحة الألوان الجيدة بأنها منظمة ومتناسقة وتتبع مخططات الألوان القياسية وتوفر للمصممين خيارات كافية ليكونوا مبدعين ولكن ليس كافيًا للتغلب عليها وتجاوزها، وهذا يشمل اللون الرئيسي ولونان أساسيان مساعدان للون الرئيسي وكخيار إضافي يمكن إضافة من ثلاثة إلى خمسة ألوان تكميلية وذلك لمنح المصممين مساحة من الحرية في الإبداع والابتكار ضمن هذه الشريحة من الألوان. كما يجب تحديد لوحة ألوان لنموذج ألوان RGB إذا استخدم التصميم للشاشات ولوحة ألوان لنموذج ألوان CMYK في حالة التصميم للطباعة، ولمزيد من التفاصيل حول الألوان ونظرية الألوان وكل ما يتعلق بها يمكنك قراءة مقال الألوان ضمن مقالات هذه السلسلة الخاصة بأساسيات تصميم الرسوميات. تصميم هوية بصرية بعنوان Facilita - Identidade Visual للمصمم DBIZ Design Studio تحت ترخيص المشاع CC BY-ND 3.0 النصوص يجب أن يساهم كل عنصر من عناصر الهوية البصرية في تكوين شخصية العلامة التجارية وأن تتكامل مع بعضها. وهذا بالتأكيد ينطبق بشدة على عنصر النص وأسلوب الطباعة والذي يجب أن تستوحيها من الشعار الذي صممته مسبقًا. يجب اختيار مجموعتان أو ثلاث مجموعات من الخطوط على الأكثر للهوية البصرية لتستخدم في العناصر الأخرى، بحيث نحدد مجموعات الخطوط التي ستستخدم للعناوين وأخرى للفقرات ويجب تحديد المجموعات المستخدمة في التصاميم الإعلانية والكتيبات وكذلك المستخدمة في المنشورات الإعلانية لوسائل التواصل الاجتماعي. يمكنك متابعة المزيد حول النصوص وأسلوب الطباعة من خلال مقال النص وأسلوب الطباعة في تصميم الرسوميات. أسلوب التصوير عادة ما يهمل المصممون عنصر التصوير وذلك لأنهم في الغالب يبحثون عن الطريقة الأسهل في توفير هذا العنصر وهو من خلال مواقع تخزين الصور في الإنترنت سواء أكانت مجانية أم لا. بينما تهتم كبريات العلامات التجارية في العالم بهذا العنصر وتوظف لأجله المصورين والمختصين لالتقاط الصور الخاصة بها والتي ستميّزها بالتأكيد عن سواها حول العالم. وفي حالة كانت العلامة التجارية تقدّم منتجات واقعية غير رقمية فيجب في هذه الحالة توفير المصورين الذين سيصوّرون المنتجات بطريقة احترافية لتستخدم من قبل المصممين في تصميم منشورات إعلانية ومطبوعات وصفحات الويب التي ستسوق هذه المنتجات بأفضل طريقة. لذلك يعد عنصر أسلوب الصورة أو التصوير مهمًا لإبراز هوية خاصة بصور العلامة التجارية تميّزها عن سواها، فعندما تعبّر الصور تمامًا عن العلامة التجارية وما تمثله هذه العلامة التجارية، فإنها تتمتع بالقدرة على إثارة المشاعر أكثر من أي عنصر تصميم آخر، وسيساعد نمط الصور المحدد والمتسق والفريد للعلامة التجارية في إنشاء انطباعات وعلاقات تدوم لصالح هذه العلامة التجارية. فعلى سبيل المثال تسعى شركة مرسيدس بنز للسيارات لرسم انطباع يتضمن الأناقة والفخامة على منتجاتها حتى وإن أنتجت سيارات قوية، بينما تسعى علامة دودج التجارية للسيارات إلى خلق انطباع يوحي بالقوة والجدارة أكثر من الأناقة والفخامة حتى وإن أنتجت سيارات فاخرة، وهذا ما يظهر جليًا من خلال أسلوب التصوير المتّبع من قبل كلا العلامتين التجاريتين. وبالتأكيد تبرز بقية عناصر الهوية البصرية لكلا العلامتين التجاريتين من خلال الشعار والخطوط والألوان ومواضع النصوص ووزنها البصري بحيث حققت التكامل بين جميع عناصر الهوية البصرية ضمن هذين التصميمين. للمزيد حول هذا العنصر يمكنك قراءة مقال قواعد التعامل مع الصور والرسوميات. الأيقونات الأيقونات هي التي تستخدم في مواقع الويب وتطبيقات الهاتف المحمول وحتى في المنشورات والمطبوعات الإعلانية، حيث تستخدم للدلالة على الخدمات المقدمة أو على فئات المنتجات أو الخدمات أو للمزايا المتوفرة في العلامة التجارية، ويجب أن تتبع هذه الأيقونات نظم الألوان المستخدمة في الهوية البصرية، ويمكن أن تشتق من الشعار نفسه، ولتصميم الأيقونات قواعد تتشابه مع تصميم الشعارات ولمتابعة المزيد حول قواعد تصميمها يمكنك قراءة مقال قواعد تصميم الشعارات والأيقونات من ضمن مقالات هذه السلسلة. عملت شركة DHL العالمية للشحن إلى تصميم هوية بصرية فريدة طبّقت عناصرها على كافة المواد المستخدمة في تنفيذ خدماتها كالشعار وألوان السيارة واللباس الموحد لموظفي الشركة. كتيب إرشادات الهوية البصرية يجب أن يتّبع تصميم كل عنصر نهج أسلوب تصميم الهوية البصرية ككل، ولكن لتطبيق ذلك بطريقة صحيحة واحترافية ودون أخطاء يجب إنتاج كتيب إرشادات الهوية البصرية، حيث يتضمن شروحات تفصيلية دقيقة لكيفية استخدام عناصر الهوية البصرية وكيفية تطبيق الأسلوب التصميمي للهوية البصرية على أية مواد مستخدمة من قبل العلامة التجارية، وبذلك تحافظ العلامة التجارية على نمط موحد لكافة موادها ومنتجاتها وإعلاناتها وهو ما تفعله العلامات التجارية الكبرى حول العالم. تصميم كتيب إرشادات الهوية البصرية Manual identidade Visual للمصمم Isabela Gondim تحت ترخيص المشاع CC BY-ND 3.0 تأكد من تضمين إرشادات واضحة وسهلة المتابعة لكل عنصر من الهوية البصرية للعلامة التجارية، بما في ذلك الأمثلة وحالات الاستخدام، مع الإشارة إلى أكبر قدر من المعلومات حسب الحاجة لمساعدة المصممين على تطبيق الهوية البصرية للعلامة التجارية بنجاح. على سبيل المثال يجب توضيح متى نستخدم الشعار وحده وأين ومتى نستخدمه مع نص اسم العلامة التجارية، وأيضًا متى نستخدم هذا التنسيق بوضع النص يمين الشعار ومتى نستخدمه بتنسيق وضع النص يسار الشعار وأسفل وأعلى الشعار وغير ذلك من التعليمات. التكامل في تطبيق عناصر الهوية البصرية على مواد العلامة التجارية تختلف مواد العالمة التجارية المستخدمة من شركة لأخرى، فبعض الشركات تعمل على تطبيق عناصر الهوية البصرية على مواد مختلفة مثل أدوات القرطاسية والمواد المكتبية كالمغلفات وترويسة الأوراق الرسمية والتصاميم على سيارات الشركة واللباس الموحد لموظفي الشركة، إضافة إلى مواقع الويب وتطبيقات الهاتف المحمول والرسومات البيانية التوضيحية (إنفوجرافيك) وحتى تصاميم وإعلانات مواقع التواصل الاجتماعي ومقدمة فيديوهات الشركة، وكذلك العلب الكرتونية والعبوات التي تتضمن منتجات الشركة وغيرها الكثير من المواد. فمن المهم جدًا تطبيق عناصر الهوية البصرية من الألوان والخطوط والأشكال وغيرها على جميع المواد المستخدمة من قبل العلامة التجارية لتحقيق التكامل فيما بينها ولتعزيز وترسيخ هذه العلامة التجارية في أذهان الناس، ما يسهم في انتشار هذه العلامة التجارية ونجاحها. خاتمة تصميم الهوية البصرية يعني تصميم الخطوط العريضة الأساسية التي ستستخدم لتصميم مختلف المواد التي ستظهر للعلن أمام الجمهور مما يبرز هذه العلامة التجارية ويميزها عن منافسيها ويرسخ ظهورها وظهور منتجاتها في أذهان الناس والذي يساعد بدوره على تحقيق الانتشار والتسويق. ويعد كل ذلك من أهم متطلبات هذا العصر لتحقيق النجاح للعلامات التجارية. حوّل فكرتك إلى مشروع تجاري حقيقي ابدأ رحلتك الريادية وابن علامة تجارية مميزة تبقى في الأذهان أطلق مشروعك التجاري الآن

لا يكاد يخلو أي موقع ويب من وجود خرائط Google فمن خلال وضع خريطة على الموقع الخاص بك فإنك تعطي تأثيرًا غنيًا ومستوى أعلى للتفاعل بين المستخدمين. سأقوم في هذا المقال بشرح كيفيّة استخدام خرائط غوغل وإضافتها إلى صفحة الويب بالإضافة إلى كيفيّة تحديد أكثر من موقع بنفس الوقت على نفس الخريطة، وشرح بعض المزايا الـتي يمكنك إضافتها إلى خريطتك. يمكنك تحميل الملف المصدري للمثال الموضح في هذا الدرس. إستخدام مكتبة Google APIمكتبة Google Maps API هي عبارة عن مكتبة جافاسكربت ولنتمكن من إستخدام مكتبة Google API قم بإضافة الـسكربت الـخاص بذلك. <script src ="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> إنشاء الخريطةقم الآن بإنشاء div بالأبعاد الـتي تريد أن تظهر بها الـخريطة وقم بإعطاءه "id="map. <div id="map" style="width: 600px; height: 400px;" ></div>الآن لنقم بإنشاء السكربت لإظهار الخريطة، يجب عليك عند وضع أي خريطة أن تقوم بتحديد الإحداثيات: خط الطول longitude وخط العرض latitude ضمن الخاصية center. يمكنك معرفة الإحداثيات لمنطقة ما بالدخول لموقع LatLong وكتابة اسم المدينة أو المنطقة. في هذا المثال ستعرض الخريطة موقع تركيا Turkey. لنقم الآن ضمن الدالة {} ()function initialize، بتحديد خصائص الـخريطة ضمن الـمتغير mapProp، مثل: الموقع الذي سيظهر عند تحميلها، نوعها، وحجم الـتكبير الذي نريده zoom. كما هو موضح في الـكود الـتالـي: <script type="text/javascript"> function initialize() { var mapProp = { center: new google.maps.LatLng(38.963745, 35.243322), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; } </script> نستخدم الخاصية zoom لتحديد البعد الذي نريده للمكان (قريب – بعيد).الخاصية mapTypeId تحدد نوع الخريطة الذي سيظهر:ROADMAP ( الخريطة العادية 2D map)SATELLITE (خريطة مصورة)HYBRID (خريطة مصورة بالإضافة الى أسماء الطرق والمدن)TERRAIN (خريطة تتضمن الجبال والأنهار…الـخ)لنقم الآن بتعريف متغير map وإعطاءه id الخاصة بالـ div: var map = new google.maps.Map(document.getElementById("map"), mapProp);ثم إضافة الحدث DOM listener الذي يقوم بتنفيذ الدالة ()initialize عند تحميل صفحة الويب: google.maps.event.addDomListener(window, 'load', initialize);ليصبح الكود على هذا الشكل: <script type="text/javascript"> function initialize() { var mapProp = { center: new google.maps.LatLng(38.963745, 35.243322), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script>ستظهر لك الخريطة بهذا الشكل: وضع محددات Markersإضافة محدد واحدلنقم الآن بتحديد موقع معين ووضع محدد (marker). أولًا قم بتعريف مصفوفة تحتوي على الإحداثيات (خط الـطول وخط الـعرض) للمدينة أو البلد أو الموقع المعين الذي تريد تحديده. مثلًا مدينة اسطنبول Istanbul: var myLatLng = {lat: 41.008238, lng: 28.978359 };هنا سأقوم بإضافة محدد واحد ثم سأشرح كيف يمكننا إضافة أكثر من محدد. الآن نعطي للخاصية center الـمتغير myLatLng: var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: myLatLng });ثم نقوم بتعريف الـمحدد وإعطاء للخاصية position الـمتغير myLatLng: var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' });سيظهر بهذا الشكل: إضافة أكثر من محدد على نفس الـخريطةقم بتعريف مصفوفة تحتوي على إحداثيات المواقع الـتي تود تحديدها، سأقوم بتحديد 6 مدن: Istanbul, Antalya, Ankara, Trabzon, Bursa, Adana كما هو موضح أدناه: var myLocations = [ ['Istanbul', 41.008238, 28.978359, 1], ['Antalya', 36.896891, 30.713323, 2], ['Ankara', 39.933363, 32.859742, 3], ['Trabzon', 41.002697, 39.716763, 4], ['Bursa', 40.188528, 29.060964, 5], ['Adana', 36.991419, 35.330829, 6] ];الآن عند تعريف المحدد قم بعمل for loop حلقة تكرار وتعريف متغير i ومن ثم إعطاء الـمصفوفة myLocations للخاصية position: var marker, i; for (i = 0; i < myLocations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(myLocations[i][1], myLocations[i][2]), map: map }); }وهذه هي المواقع التي قمنا بتحديدها: وضع محدد مع لصيقة (label) عند الـنقر على مكان معينسأقوم هنا بشرح فكرة عن الـevents في Google map ثم سأتطرق فيما بعد لشرح الـevents بالتفصيل في مقال مقبل إن شاء الله. الآن لنرى كيف يمكننا عند الضغط على مكان معين على الخريطة إظهار محدد مع لصيقة. مثال: marker A, marker B. أولاً يجب تعريف متغير Labels نضع فيه القيم الـتي نريد إظهارها في اللصيقة. مثال: الأحرف من A-Z. ونحتاج أيضًا إلى تعريف متغير labelIndex لتحديد الـقيمة الـتي نريد إظهارها. var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var labelIndex = 0;الآن قم بتحديد المكان الـذي ستفتح عنده الخريطة. مثال: تركيا. var Turkey = { lat: 38.963745 , lng: 35.243322 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: Turkey });الدالة ()addMarkerيقوم الحدث event.addListener باستدعاء التابع ()addMarker عند الضغط على الخريطة. كما في المثال التالي: google.maps.event.addListener(map, ‘click’, function(event) { addMarker(event.latLng, map); });وليكون هناك marker محدد عند فتح الخريطة قم بإضافة محدد إلى Turkey: addMarker(Turkey, map);لنكتب الآن الدالة ()addMarker: نحتاج لتعريف 2 parameters (معاملين) هما الـخريطة والـموقع map & location ثم نقوم بتعريف marker وإعطاء المعامل location للخاصية position. ولإظهار label نقوم بإعطاء الـمتغير labels الـذي يحتوي على الأحرف من A-Z للخاصية label مع تحديد ++index لكي ينتقل عند كل نقرة جديدة لحرف جديد وإظهاره على الـ marker كما هو موضح في الكود الـتالي: function addMarker(location, map) { var marker = new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], map: map }); }ستظهر لك الخريطة بهذا الشكل: وعند النقر على الخريطة: إضافة تأثير Marker Animationيمكنك إضافة تأثير حركي على المحدد ليبدو وكأنه يقفز ، فقط باستخدام خاصية animation:google.maps.Animation.BOUNCE كما هو موضح في الكود الـتالـي: var marker = new google.maps.Marker({ position: myCenter, animation: google.maps.Animation.BOUNCE });إضافة أيقونة للمحدد يمكنك تغيير الأيقونة الخاصة بالمحدد ووضع أيقونة من اختيارك عن طريق الخاصية icon، حيث تقوم بإعطاء مسار الصورة للخاصية icon. كما هو موضح في الكود التالي: var marker = new google.maps.Marker({ position: myCenter, icon:'pin.png' });ستظهر لك الخريطة بهذا الشكل: إضافة شكل متعدد الخطوط Polyline تتيح لك ميزة polyline رسم خط يصل بين سلسلة إحداثيات على الخريطة بشكل متسلسل، على سبيل المثال يمكنك رسم مسار رحلة عبر مجموعة من المدن ويمكنك التحكم بخصائص عديدة للخط مثل اللون والشفافية والحجم. خصائص الميزة Polyline: path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا. لنقم الآن بتحديد مجموعة إحداثيات لمدن ونصل فيما بينها عن طريق polyline، سأستخدم نفس الإحداثيات التي استخدمتها في تحديد المدن عندما وضعت أكثر من محدد، سأقوم برسم خط بين ثلاث مدن: اسطنبول، انطالـيا، طرابزون. أولاً: تحديد إحداثيات الـمدن: var istanbul = new google.maps.LatLng(41.008238, 28.978359); var antalya = new google.maps.LatLng(36.896891, 30.713323); var trabzon = new google.maps.LatLng(41.002697, 39.716763);ثانيًا: نقوم بتعريف مصفوفة myTrip وتعبئتها بأسماء المتغيرات (المدن الـتي نريد تحديد المسار عليها ): var myTrip = [ istanbul, antalya, trabzon];وثم نعطي المصفوفة للخاصية path: path: myTrip,ثالثًا: نقوم بتعريف متغير flightPath لاختيار الـخاصية polyline: كما هو موضح في الكود الـتالي: var map = new google.maps.Map(document.getElementById(“map”),mapProp); var myTrip = [ istanbul, antalya, trabzon]; var flightPath = new google.maps.Polyline({ path:myTrip, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2 }); flightPath.setMap(map); }ستظهر لك الخريطة بهذا الشكل: إضافة مضلع Polygonتتيح لك هذه الـميزة إنشاء مضلع تكون زواياه عبارة عن سلسلة الإحداثيات التي تريد الوصل بينها. لا تختلف ميزة polygon كثيراً عن polyline من حيث كتابة الـتعليمات فقط نقم باستبدالـ polyline بـpolygon. خصائص الـميزة polygon: path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.fillColor - يحدد لون المضلع بالـHex كود.fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا. كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”),mapProp); var myTrip = [istanbul, antalya, trabzon]; var flightPath = new google.maps.Polygon({ path: myTrip, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2 }); flightPath.setMap(map); }ستظهر لك الـخريطة بهذا الـشكل: إضافة دائرة Circleتتيح لك هذه الميزة إحاطة منطقة معينة على الخريطة بدائرة، يمكنك التحكم بقطر الدائرة ولونها وشفافيتها. خصائص الميزة Circle: center - تحديد إحداثيات مركز الدائرة. radius - تحديد قطر الدائرة بالمتر المربع. strokeColor - يحدد لون الخط بالـHex كود.strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.strokeWeight - يحدد عرض الخط بالبكسل.fillColor - يحدد لون المضلع بالـHex كود.fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا.كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”), mapProp); var flightPath = new google.maps.Circle({ center: istanbul, radius: 20000, strokeColor: "#0000FF", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#0000FF", fillOpacity: 0.4 }); flightPath.setMap(map); ستظهر لك الخريطة بهذا الشكل: إضافة نافذة نصية InfoWindowتتيح لك ميزة infoWindow إظهار نافذة على موقع معين محدد باسم بحيث يمكنك كتابة اسم الموقع المحدد بداخلها. كما هو موضح في الكود التالي: var map = new google.maps.Map(document.getElementById(“map”), mapProp); var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.963745, 35.243322), }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:”Hello World!” }); infowindow.open(map, marker); }ستظهر لك الخريطة بهذا الشكل: هكذا نكون قد استعرضنا أهم النقاط والميزات التي تتيح لك استخدام خرائط Google Maps بسهولة في موقعك الخاص. هل أنت جاهز الآن لإضافة Google Maps إلى موقعك والإستفادة من مزاياها؟ الـمصدر: Google Developers.حقوق الصورة البارزة: Designed by Freepik.

تأتيني عادةً أسئلةٌ عمّا إذا كانت شبكةٌ متعددة المواقع تعمل على ووردبريس هي خيارٌ مناسبٌ لمواقع الشركات التي لديها أقسامٌ متنوعةٌ ذات طابعٍ مختلف. ويكون جوابي عادةً هو «نعم»، يمكن لشبكةٍ متعددة المواقع فعل ذلك. لكن ليس من الضروري إنشاء موقعٍ منفصلٍ لكل قسمٍ من أقسام شركتك (حتى لو استعملتَ شبكةً متعددة المواقع تعتمد على ووردبريس)؛ فإذا أردتَ مشاركة المحتوى غير الخاص بقسمٍ معيّن، أو كانت «هوية» (identity) أقسام شركتك تتشابه كثيرًا، أو إذا كان عندك موقعٌ مستقل ولا ترغب بتحويله إلى شبكةٍ متعددة المواقع، فهنالك دومًا طريقةٌ للالتفاف على هذه الإشكالية دون تفعيل الشبكة متعددة المواقع. سأريك في هذا المنشور طريقة فعل ذلك باستخدام «التصنيفات المخصصة» (custom taxonomies). حيث سنُنشِئ تصنيفًا باسم «division» الذي يمكن إسناد المنشورات والصفحات إليه، لذا ستتمكن من تحديد ما هي الأقسام التي يجب وضع كل منشور أو صفحة فيها. ثم سنُنشِئ ملف قالب لذاك التصنيف، مما يعني إمكانية عرض المحتوى الموجود في كل قسم بالشكل الذي تريده. سنحتاج إلى كتابة بعض الشيفرات لإنشاء إضافة (plugin) وإنشاء ملف في قالبك، لكن الشيفرة لن تكون صعبةً، وسنستخدم «قالب ابن» تابع للقالب الافتراضي Twenty Sixteen لكن يمكنك استخدام هذه الطريقة على أيّ قالب تشاء. سنُنشِئ أيضًا ملفًا لتسجيل (register) التصنيف المخصص، ومن الأفضل فعل ذلك عبر إضافة، لكيلا تخسر الشيفرة التي تُنشِئ التصنيف المخصص في حال تغيّر قالب مستقبلًا. لنبدأ بالعمل. تجهيز القالب الابن قبل أن نبدأ، يجب أن نملك: موقعًا تطويريًا أو مخصصًا للتجريب يعمل على ووردبريس، والذي يُمثِّل نسخةً من موقع الشركة الذي لديك. لكن أحذِّرك أن تفعل ذلك على موقعٍ إنتاجي، وإنما ارفع الملفات إلى الموقع الإنتاجي بعد أن تتأكد أنَّها تعمل دون مشاكل. محرِّر شيفرات. أحد القوالب، الذي يمكن أن يكون قالبًا خاصًا بشركتك، أو قالب ابن للقالب Twenty Sixteen (كالذي أستعمله)، إذا كنتَ ستستخدم قالب ابن فتأكَّد أنَّ قالب Twenty Sixteen مثبّتٌ لديك. ابدأ بإنشاء قالب ابن وتفعيله، إلا أنّي لن أشرح هذا بالتفصيل، وإنما سأحيلك إلى درسٍ آخر. هذه هي الشيفرة التي سأستخدمها في ملف style.css في القالب الابن: /* Theme Name: WPMU DEV Taxonomy for Company Website Divisions Theme URI: https://github.com/rachelmccollin/wpmu-taxonomy-company-divisions Description: Theme to support WPMU DEV post on custom menu items Author: Rachel McCollin Author URI: http://rachelmccollin.co.uk/ Template: twentysixteen Version: 1.0 */ @import url("../twentysixteen/style.css"); ربما تلاحظ من الشيفرة السابقة أنني رفعتُ الملفات الخاصة بهذا الدرس على GitHub، يمكنك أن تنزلها من هناك وتستعملها بدلًا من إنشائها يدويًا. أنشَأتُ أيضًا موقعًا تجريبيًا. بعد أن تفعِّل القالب الابن، فستلاحظ أنَّه يبدو كقالب Twenty Sixteen الافتراضي: تسجيل التصنيف المخصص في ووردبريس الخطوة التالية هي تسجيل التصنيف المخصص عبر إنشاء إضافة. إلا أنَّك تستطيع إضافة الشيفرة إلى ملف functions.php في قالبك، لكن المشكلة هي أنَّ هذه الشيفرة ستُحذف (وسيختفي التصنيف المخصص الجديد) في حال حدَّثتَ قالبك في المستقبل. أنشِئ ملفًا جديدًا في مجلد الإضافات plugins (الموجود في مجلد wp-content) وأعطهِ اسمًا مناسبًا، وافتحه وأضف إليه التعليقات الآتية: <?php /** * Plugin Name: WPMU DEV Register Division Taxonomy * Plugin URI: https://github.com/rachelmccollin/wpmu-taxonomy-company-divisions * Description: Registers a 'division' taxomy for use in your copmany website. * Version: 1.0 * Author: Rachel McCollin * Author URI: http://rachelmccollin.co.uk */ أضف الآن هذه الدالة لتسجيل التصنيف المخصص: function wpmudev_register_taxonomy() { $labels = array( 'name' => __( 'Divisions' ), 'singular_name' => __( 'Division' ), 'search_items' => __( 'Search Divisions' ), 'all_items' => __( 'All Divisions' ), 'edit_item' => __( 'Edit Divisions' ), 'update_item' => __( 'Update Divisions' ), 'add_new_item' => __( 'Add New Division' ), 'new_item_name' => __( 'New Division Name' ), 'menu_name' => __( 'Divisions' ), ); $args = array( 'labels' => $labels, 'hierarchical' => true, 'sort' => true, 'args' => array( 'orderby' => 'term_order' ), 'show_admin_column' => true ); register_taxonomy( 'division', array( 'post', 'page' ), $args); } add_action( 'init', 'wpmudev_register_taxonomy' ); الشيفرة السابقة ستُسجِّل تصنيفًا باسم division وتعطي لافتاتٍ مناسبةً له وتضبط عنوانًا سيظهر في القائمة… وتحدِّد الشيفرة السابقة أيضًا أنَّنا نستطيع إضافة هذا التصنيف إلى المنشورات والمقالات وذلك عبر تمرير الوسيط array( 'post', 'page' ) إلى دالة register_taxonomy()‎. فعِّل الإضافة في موقعك، ويجب أن تملك الآن وصولًا إلى تصنيفٍ جديد عندما تحاول تحرير الصفحات والمنشورات: يمكنك الآن إنشاء عناصر ضمن التصنيف الجديد تُمثِّل أقسام شركتك، ثم تُسنِد إليها المنشورات والصفحات. عرض أقسام شركتك في الموقع لقد أنشأتُ بعض المحتوى من منشوراتٍ وصفحاتٍ وأسندته إلى أقسامٍ مختلفة. هذه بضعة منشوراتٍ من التي أضفتُها: أنشأتُ أيضًا بعض الصفحات للأقسام، وأنشأتُ أيضًا صفحاتٍ عامةً: يمكنك الآن إضافة جميع صفحاتك وأقسامك إلى قائمة التنقل الأساسية في موقعك، لكن لا تُضف المنشورات، لأنها ستُعرضَ في صفحات الأرشيف. لقد فعلتُ ما سبق في صفحة «Menus» (القوائم) في لوحة التحكم: ستُنشِئ ووردبريس صفحة أرشيف تلقائيًا لكل قسم من أقسام شركتك، وستعرض تلك الصفحات باستعمال أكثر صفحات القالب تحديدًا والموجودة في قالبك (وفقًا لهيكلية ملفات القوالب). هذه هي صفحة الأرشيف لتصنيف «Research and Development»: قامت ووردبريس بعملها على أتم وجه، فوضعت المنشورات والصفحات المُسنَدَة إلى التصنيف. لكنها تعرضها بترتيبٍ زمني كما قد تتوقع، لكنني أفضِّل عرض جميع الصفحات أولًا متبوعةً بالمنشورات، ولفعل ذلك سأُنشِئ صفحة أرشيف للتصنيف المُخصص وأستعمل فيها نسخةً مخصصةً من حلقة الدوران في ووردبريس (يسمونها the loop). إنشاء صفحة أرشيف للتصنيفات المخصصة لعرض صفحة أرشيف التصنيفات المخصصة كما نشاء، فعلينا إنشاء ملف قالب باسم taxonomy-divsion.php ولنفعل ذلك بنسخ ملف قالب موجود مسبقًا ثم تعديله. إذا كان في قالب ملفٌ باسم archive.php فأنشِئ نسخةً منه وسمِّها taxonomy-divsion.php، أما إذا لم يكن في قالبك الملف السابق، فانسخ الملف index.php. ولأنني أعمل مع قالب Twenty Sixteen فأُنشِئ نسخةً من ملف archive.php وأضعه في مجلد القالب الابن باسم taxonomy-divsion.php. علينا أولّا تعديل التعليقات في بداية الملف لكي تصف بدقة محتويات هذا الملف: <?php /** * The template for displaying division archive pages */ اعثر الآن على الشيفرة المسؤولة عن حلقة التكرار، وهي تبدو كالآتي في حال نسختَها من قالب Twenty Sixteen: <?php // Start the Loop. while ( have_posts() ) : the_post(); /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/content', get_post_format() ); // End the loop. Endwhile; الشيفرة السابقة تستدعي ملفًا من Twenty Sixteen باسم content.php، سنبقي على الشيفرة السابقة، لكننا سنُشغِّلها مرتين: مرة للمنشورات ومرة للصفحات. عدِّل حلقة التكرار في ملف القالب لتصبح كما يلي: <?php // Start the first Loop - pages. while ( have_posts() ) : the_post(); $posttype = get_post_type( get_the_ID() ); if ( $posttype == 'page' ) { get_template_part( 'template-parts/content', get_post_format() ); } // End the loop. endwhile; rewind_posts(); // Start the second Loop - posts. while ( have_posts() ) : the_post(); $posttype = get_post_type( get_the_ID() ); if ( $posttype == 'post' ) { get_template_part( 'template-parts/content', get_post_format() ); } // End the loop. Endwhile; الشيفرة السابقة ستؤدي إلى استدعاء حلقة التكرار مرتين، لكنها ستطلب الصفحات والمنشورات من قاعدة البيانات مرةً واحدةً فقط، وهذا أفضل من استخدام WP-Query لإنشاء طلبية جديدة. سنتحقق في بداية الحلقة فيما إذا كان «نوع المنشور» (post type) مساوٍ للقيمة page وفي حال تحقق الشرط فسنعرض الصفحة، ثم سنُعيد الكرّة مرةً أخرى للمنشورات العادية ذات النوع post. احفظ الملف السابق وستجد أنَّ صفحة الأرشيف أصبحت تعرض الصفحات أولًا ثم المنشورات: هذه هي شيفرة ملف القالب كاملةً: <?php /** * The template for displaying division archive pages */ get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php if ( have_posts() ) : ?> <header class="page-header"> <?php the_archive_title( '<h1 class="page-title">', '</h1>' ); the_archive_description( '<div class="taxonomy-description">', '</div>' ); ?> </header><!-- .page-header --> <?php // Start the first Loop - pages. while ( have_posts() ) : the_post(); $posttype = get_post_type( get_the_ID() ); if ( $posttype == 'page' ) { get_template_part( 'template-parts/content', get_post_format() ); } // End the loop. endwhile; rewind_posts(); // Start the second Loop - posts. while ( have_posts() ) : the_post(); $posttype = get_post_type( get_the_ID() ); if ( $posttype == 'post' ) { get_template_part( 'template-parts/content', get_post_format() ); } // End the loop. endwhile; // Previous/next page navigation. the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'twentysixteen' ), 'next_text' => __( 'Next page', 'twentysixteen' ), 'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>', ) ); // If no content, include the "No posts found" template. else : get_template_part( 'template-parts/content', 'none' ); endif; ?> </main><!-- .site-main --> </div><!-- .content-area --> <?php get_sidebar(); ?> <?php get_footer(); ?> تنسيق أقسام الشركة بشكلٍ مختلف أصبح لدينا الآن ملف قالب يعرض صفحات ومنشورات أقسم الشركة بالطريقة التي نرغب بها، وحان الوقت الآن لجعل صفحات الأقسام تختلف بصريًا عن بعضها بإضافة بعض التنسيق إليها. يمكنك أن تُنسِّق أقسام موقعك كما تشاء، وربما ستُنسِّقها أكثر مما سأريك إياه في هذا الدرس، إلا أنني سأريك كيف تغيّر ألوان بعض أجزاء الصفحات والمنشورات وصفحات الأرشيف لكل قسم، لجعلها تتميز عن بعضها. يمكنك أن تفعل ذلك في صفحة الأنماط التابعة للقالب الابن (أو في صفحة الأنماط في القالب الأساسي إن لم تكن تستعمل قالب ابن). افتح ملف style.css وأضف القواعد الآتية إليه: .term-research-development .page-header { border-top: 4px solid #d8a518; } .term-research-development .page-title { color: #d8a518; } .term-operations .page-header { border-top: 4px solid #5674A0; } .term-operations .page-title { color: #5674A0; } .term-sales .page-header { border-top: 4px solid #FE6763; } .term-sales .page-title { color: #FE6763; } .term-sales .page-header { border-top: 4px solid #78D400; } .term-sales .page-title { color: #78D400; } هذا سيُضيف تنسيقًا لترويسات صفحات الأرشيف باستهداف الأنماط (classes) المُطبَّقة على العنصر body وذلك اعتمادًا على التصنيفات التي استخدمتها. ستحتاج إلى تعديل القيم السابقة بما يتوافق مع أسماء أقسام شركتك، يمكنك أن ترى أسماء الأصناف المولّدة تلقائيًا عبر تفحص شيفرة HTML في صفحة أرشيف القسم في موقعك، وستكون مرتبطةً بالعنصر body. استعملتُ اللون الأصفر في صفحة تصنيف «Research and Development» لتمييزها: يمكنك إضافة المزيد إلى صفحة الأنماط، فربما تريد تنسيق المنشورات التابعة لمدونتك العامة بشكلٍ يختلف عن تنسيق منشورات بقية الأقسام الأخرى، ويمكنك أيضًا تنسيق الصفحات والمنشورات التابعة لمختلف الأقسام بأشكالٍ متنوعة. يمكنك أيضًا تنسيق قائمة التنقل الرئيسية لكي تُطابِق تنسيق بقية الصفحة. أي أنَّ خياراتك ليست محدودة، ومن الممكن أن تجعل مظهر صفحات أقسام شركتك مختلفةً عن بعضها تمامًا. الخلاصة باستخدام التقنيات التي شرحناها في هذا الدرس، يمكننا إنشاء موقع لشركة فيه أقسامٌ مختلفة، وتعرض تلك الأقسام المحتوى المتعلق بها فقط، ونستطيع استخدام فئات CSS التي تُضيفها ووردبريس إلى عنصر body لتنسيق تلك الأقسام بشكلٍ مختلف. يمكنك أن تكمل المشوار في تنسيق الصفحات، وذلك بإضافة صور أو خلفيات أو يمكنك تغيير الخطوط وذلك عبر صفحة الأنماط. وتستطيع أيضًا إنشاء ملف قالب مختلف لكل قسم، وذلك باستعمال هيكلية ملفات القوالب استعمالًا صحيحًا لتعرف طريقة تسمية الملفات. كل ما سبق يعني أنَّك إذا كنتَ تعمل على موقعٍ موجودٍ مسبقًا ولم تشأ إنشاء مواقع مخصصة لكل قسم من أقسام شركتك، فيمكن لموقع ووردبريس وحيد أن يضفي طابعًا خاصًا لكل قسم من أقسام الشركة. ترجمة -وبتصرّف- للمقال How to Create a Custom Taxonomy for Departments or Divisions on a Company WordPress Siteلصاحبته Rachel McCollin.

يُدرك كل مصمّم جرافيك أنّ مهمّة اختيار تركيب ومزج الألوان وتناسقها هي واحدة من أهم أجزاء عمليّة التّصميم، سواء أكان ذلك التّصميم موجّه للطّباعة أم للعرض على شبكة الويب. لا يوجد أي تركيبة ألوان عالميّة وموحّدة بإمكانها أن ترضي جميع العملاء. بالنّسبة لبعض المصمّمين فإنّ عمليّة تركيب الألوان هي مسألة التّجربة وتحديد الأخطاء ثم التجربة مجدّدًا وهكذا، إلى غاية الحصول على التّركيبة المناسبة، ولكن اعتماد هذه الطّريقة يعني إهدار الكثير من الوقت الثمين. الوقت الذي يُعتبر سلعةً هامة في عالم تصميم الجرافيك والذي يسير بخطوات متسارعة. إلاّ أنّه يُمكن التّقليل من ذلك الوقت عن طريق الاعتماد على بحوث ودراسات متخصّصة ومناسبة، وكذلك من خلال استخدام الذّوق الذي تتمتّع به كمصمّم أو حدسك السّليم تجاه الأنماط. كيف تفهم أساسيات عجلة الألوان Color Wheel قبل كلّ شيء، من المهم أن تعرف أساسيّات عجلة الألوان، ويجب على كلّ مصمّم أن يطّلع عليها عن ظهر قلب. الضّوء الأبيض هو مزيج من كل ألوان الطّيف، والتي تنقسم إلى ثلاث مجموعات أساسيّة هي: الأحمر، الأزرق والأصفر، ومن خلال المزج بين تلك الألوان الثلاثة بإمكانك أن تركّب أي لون تتخيّله ويمكن للعين البشرية أن تراه. وحتّى تكون قادرا على خلق تركيبات ألوان جميلة وجذّابة يجب عليك أوّلا أن تعرف عجلة الألوان Color Wheel، حيث سأحاول شرحها لك بطريقة سهلة خالية من التّعقيدات. الألوان الأحادية monochromatic colors تجعلك تستخدم لون واحد من مجموعة ألوان مختلفة، على سبيل المثال: بإمكانك استخدام تركيبة هذه الألوان لتصميم موقع معيّن : الّلون الأساسي الذي قمنا باستخدامه في الصورة السابقة هو الّلون الأخضر، الأخضر الفاتح (50% أبيض) والأخضر الغامق (50% أسود). واستخدام الألوان الأحادية monochromatic colors في التصاميم يضيف لها رونقًا واحترافية، فيكون التصميم بسيطًا لا تعقيد فيه (خاصة إذا كان التصميم يستخدم قليلا من الإضافات والتأثيرات إلا أن ذلك قد يجعل منه تصميما مملًا ومنفرًا. الألوان المكملة Complementary colors من أكثر تركيبات الألوان جاذبيّة هي تلك التي تُظهر التّناقض وتلفت الانتباه. وتنتج تلك النّوعية من خلال المزج بين الألوان التي تكون متقابلة في الدّائرة اللّونيّة، حيث تتميز بكونها ألوانا جريئة، مثيرة للاهتمام وجذّابة بصريا. تأكّد خلال تركيبك للألوان الخاصة بتصاميم عملائك أن تختار تلك التي تظهر بشكل جميل حين تقوم بمزجها، بعض التّركيبات سينتج عنها ألوانا جدّ صارخة، حاول أن تتجنّبها. الألوان التماثلية Analogous colors الألوان التّماثلية Analogous colors هي الألوان التي تصطف بجانب بعضها البعض علي عجلة الألوان الأساسية، وهي شبيهة بالألوان الأحادية monochromatic colors في كونها مناسبة جدا للتّصاميم المهنية والتّجارية، كما أنّها ملفتة للانتباه باعتبارها تضيف نوعا من التباين والجاذبية على التّصميم. الألوان التّماثلية سهلة الاستخدام ودائما تظهر بشكل جميل. الألوان المثلثية Triadic colors الألوان المثلّثية Triadic colorsهي ألوان مستقلة موجودة على العجلة والتي تشكل مثلّثا بمجرد الربط فيما بينها، ويتميز هذا النمط من الألوان في كونه يخلق نوعا من الجماليّة والتوازن. إرضاء العملاء باستخدام تركيبات لونية صحيحة ومناسبة كما ذكرنا سابقا فإنّه لا يمكننا إقناع جميع العملاء باستخدام نموذج ألوان معيّن، يجب أن تعرف أولا مؤسّسة عميلك (إذا كان التصميم مثلا خاص بمؤسّسته)، وقبل أي شيء آخر يجب أن تعرف ما تقوم به الشركة والمنتجات أو الخدمات التي تقدّمها، ذلك سيعطيك فكرة أولية حول نوعيّة الألوان التي ستختارها، وأيضا لا تنسى أن تطلع على مجموعة من تصاميم لشعارات ناجحة. المطاعم، الوجبات السريعة والمنتجات الغذائية بالنّسبة للشّركات التي تركّز على الغذاء والطعام، حاول أن تستخدم اللّونين الأحمر والأصفر بكثرة، لأنها تعتبر ألوانًا جذّابة وسهلة الالتصاق بذهن المتلقي (الشخص الذي يراه)، بالإضافة إلى أنه يُنصح باستخدام الألوان الحارة والصّلبة، لأن اللونين الأصفر والأحمر يحفزان على الشعور بالجوع من خلال تسريع عمليّة الأيض، الأمر الذي يؤدّي إلى فتح الشهية ورفع من نسبة الطلب على الأكل أكثر مما ينبغي، تجنب استخدام اللون الأزرق والأرجواني للمطاعم نهائيا، لأنها تعمل على التخفيف من شهية الأكل لا شعوريا. أجسامنا تتفاعل سلبيا مع اللون الأزرق والأرجواني، أما الأخضر والبني فهما لونين مناسبين للاسترخاء و الأطعمة غير الرسمية (casual) كالمقاهي مثلا، كذلك جرّب أن تستخدم الألوان المكمّلة والألوان المثلثية. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمطاعم، الوجبات السريعة والمنتجات الغذائية: مساحيق التجميل ومواد التنظيف هنا نختار الألوان التي تعبر عن الأنوثة، النعومة والنّظافة. ألوان الباستيل مثل الأبيض، الأرجواني، الأزرق الفاتح، والزهري الفاتح هي اختيار رائع يمكنك استخدامه. تجنّب الألوان الحارّة وغير الناعمة، كما بإمكانك استخدام الألوان الأحادية والألوان الحيادية لأنها تدل على النظافة والبساطة. هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها لمساحيق التّجميل ومواد التّنظيف: المؤسسات الحكومية، المؤسسات العامة، المنظمات الحكومية وغير الحكومية عند قيامك بتصميم لإحدى المؤسّسات الحكومية، أو المؤسسات العامة أو لإحدى المنظمات، عليك أن تأخذ بعين الاعتبار أنها يجب أن تظهر كمؤسسات محترمة، جديرة بالثقة وذات كرامة. لذا اختر ألوانا تكون إيجابية وجميلة في نفس الوقت، كاللون الأخضر والأزرق. تمنح هذه الألوان الجميلة نوعا من الإيجابية وتعطي صورة عن المؤسسة أنها صلبة، قوية وجديرة بالثقة. المنظّمات الحكومية وغير الحكومية تفضل أن تستخدم الأحمر، الأبيض والأزرق في تصاميم شعاراتها مثل ما هو مستخدم في العلم الأمريكي وهي أيضا علامة على القومية والنزاهة. حاول استخدام الألوان الأحادية والتماثلية وقلل من استخدام الألوان المتباينة (الألوان المكملة). هذه مجموعة من لوحات الألوان الجذابة والتي يمكن استخدامها للمؤسّسات الحكومية، المؤسسات العامّة، المنظّمات الحكومية وغير الحكومية: الشّعارات أو التّصاميم الجرافيكية الخاصّة بالمؤسّسات التّعليمية، شركات التّأمين والمستشفيات أيضا تتبنّى ذات القاعدة. الفنادق، المنتجعات ومنشآت الضيافة الأخرى عند قيّامك بتصاميم تخص الفنادق والمنتجعات ركز على الشعور بالراحة، الاسترخاء والضيافة واختر الألوان الترابية والطبيعية. اللون البني، الأخضر والأزرق هي من أكثر الألوان التي توحي بالاسترخاء والهدوء، تجنب الألوان الصّارخة كما بإمكانك استخدام الألوان الأحادية monochromatic colors. لكن حاول أن تستخدم الألوان بحد أدنى. الأسود، الأبيض، الفضي والذهبي هي الأخرى اختيارات رائعة لتصاميم الفنادق والمنتجعات، خاصة إذا كانت من تصنيف خمس نجوم وكانوا يرغبون في الاستفادة من الترف والرقي. الخلاصة تعتبر الألوان طريقة جيدة لجذب انتباه المشاهدين، إلا أن استخدام الكثير منها سيصرف القرّاء، لذلك حاول التقليل قدر الإمكان من استخدامها واكتف فقط باستخدام من 2-4 ألوان. عمليّة مزج وتركيب الألوان ليست مجرّد عملية تتم حسب مزاج المصمم، وإنما تتم من خلال البحث والدراسة المتأنية، وكذلك من خلال معرفة أساسيات عجلة الألوان والتركيب، كلّ ذلك سيمكنك من إنشاء الآلاف من تركيبات الألوان الرّائعة والمبهرة. ترجمة -وبتصرّف- للدّرس Guide to Choosing Color Combinations When Building Sites For Clients لصاحبه James Richman. حقوق الصورة البارزة: Designed by Freepik.

ليس هناك من اتجاه واحد يجب اتباعه لمواقع الويب، فتلك المواقع تعبر عن العلاقة الأولى المتبادلة بين البائعين والعملاء، أي القصة البصرية لإحدى الشركات والمصدر الأساسي للمعلومات. إن كل بائع يرغب في أن يكون بائعًا ناجحًا يحتاج إلى موقع على شبكة الإنترنت وأن يتم تصميم ذلك الموقع بشكل جيد بحيث ليساعده في عمله، وتحرير المستخدمين من كل الارتباك أو المخاوف التي ممكن أن يعانوا منها. إن المواقع الجذابة والمريحة تختصر عملية التواصل الناجح. ومن المؤكد أن المواقع البارزة بينها تعلمنا كيف نصبح مميزين، مثيرين للاهتمام، وكيف نقوم بتوفير تجربة بصرية غنية لكل من المتسوقين والمستخدمين على الإنترنت. يستمتع الناس بالمناظر الجميلة. وهي القاعدة التي تنطبق على كل شيء سواء في العالم الحقيقي أو الافتراضي. جميعهم قد يعجبون بالطريقة التي تقدم فيها مجموعة جديدة من الملابس في متجرك بنفس القدر من الإعجاب، أو حتى الخدمة الجديدة التي تقدمها في تطبيقات الجوال. وإذا كان تصميم السلعة جذابًا وتم لفّه بشكل جيد، فمن المرجح أن تصبح تلك السلعة رائجة وتحقق لك الربح. إن اتخاذ قرار بشأن كيفية تصميم المتجر على الإنترنت يعتبر أمرًا ضروريًا لخلق المبيعات. وغالبًا قد يؤدي الخيار أو القرار الجيد إلى زيادة قيمة المنتج المتوقعة لدى العملاء وزيادة ثقتهم به. وبناء على ذلك، عليك أن تفكر في تصميم متجرك على أنه التحدي الجديد الذي ستواجهه! تصميم موقع للتجارة الإلكترونية إن الخطوة الأولى اللازمة لجذب الانتباه وخلق المبيعات هي إنشاء موقع جميل للتجارة الإلكترونية، ولكنه في الوقت ذاته عملي وسهل الاستخدام - سواء كنت تستخدم أحد منصات التجارة الإلكترونية المعروفة أو أنك ستقوم بإنشاء منصة خاصة ومختلفة. ومع ذلك، فإن التجارة الإلكترونية ليست مجالاً للإمكانيات غير المحدودة. ففي الحقيقة، تعتبر التجارة الإلكترونية منطقة تنافسية للغاية لأن تغيير العميل للبائع لا يتطلب تقريبًا وقت أو جهد. عليك أن تقدم للعملاء ما يتوقعونه، وذلك كي لا يفكروا مرة ثانية بشراء المنتجات من شخص آخر. في مجال المبيعات عبر الإنترنت، فإن السعر والأولوية ليس أمرًا مهمًا حقًا. فما يهم بالفعل هو مدى بساطة عملية التصفح وعدم إرباك المستخدمين. يمكنك تقديم أرخص / أفضل منتج في السوق – ولكن إذا كان المستخدمون غير قادرين على تحديد موقعه، تكون قد فشلت بالفعل بخلق المبيعات. إن توفير إمكانية الاستخدام يعني أنك تقوم بتسهيل عملية الشراء. ولن يتطلب الأمر أكثر من عدد قليل من النقرات بالنسبة للمستخدمين ليقوموا بشراء منتجك. لقد قمنا بجمع قائمة من النصائح والحيل التي يمكن أن تشرح لك كيفية تصميم موقع تجارة إلكترونية بحيث يكون صالحًا للاستخدام ضمن الحد الذي يمكن فيه توفير معدلات تحويل كبيرة. إن التجارة الإلكترونية هي مستقبل الأعمال. وقد ارتبطت عند ظهورها بالبداية بمفهوم التجارة المشبوهة، لكنها أصبحت الآن جزءًا من وجودنا على الإنترنت، تمامًا مثل تحققنا من رسائل البريد الإلكتروني. من الواضح بأن التسوق عبر الإنترنت لا يقوم به الجميع، ولكن معظم الأشخاص يجدونه مريحًا وذو أسعار معقولة أكثر. وقريبًا جدًا، لن يكون هناك شخص واحد لم يقم بعملية شراء واحدة على الأقل من الإنترنت. لمحة عامة عن تصميم موقع تجارة إلكترونية يبدو الأمر بمثابة تحدي، ولكن في الواقع فإن تصميم موقع تجارة إلكترونية لا يختلف كثيرًا عن أي تصميم ويب آخر. ومع ذلك، هناك بعض المبادئ التي يجب أن تأخذها بعين الاعتبار قبل “القفز” إلى عملية التصميم. يجب التعامل مع مواقع التجارة الإلكترونية بعناية خاصة لأنها تتطلب معلومات حساسة من المستخدمين (بيانات بطاقات الائتمان والمعلومات الشخصية المرافقة لها). ولذلك فإن مصممي هذه المواقع يواجهون تحديًا حقيقيًا في تصميم موقع جميل يستحق ثقة العملاء به. تعتبر عملية التصميم بطريقة أو بأخرى أسهل بالنسبة للعلامات التجارية التي تم تأسيسها في وقت سابق، والتي تكون منتجاتها / خدماتها معروفة لدى الجمهور. وفي الوقت نفسه، يقع عليها عبء إعادة تأكيد سمعتها من خلال التصميم المتوقع. ومع ذلك، فإن الأمر يعود للمصمم ليقرر هو فيما إذا كان يرغب بالتمسك بالتصور ذاته، أم أنه سيحاول الوصول لتصميم جديد كليًا (شعارات جديدة، صور، وما إلى ذلك). ومن المرجح أن يعتمد ذلك القرار على الميزانية. الأمر الآخر الذي يتمتع بأهمية كبيرة أيضًا هو طول إجراءات الدفع. يجب أن يكون لديك عدد قليل من الصفحات بين الصفحة الرئيسية وصفحة الدفع، ويجب أن تسلط الضوء على هذه الميزة منذ البداية. هل تحاول تصميم موقع تجارة إلكترونية مثالي؟ تأكد من أن تمتلك الإجابات عن الأسئلة التالية: هل يمكن التعرف على أنواع المنتجات التي أعرضها للزائرين خلال الثواني الخمس الأولى؟ هل أثق بهذا الموقع بما يكفي لأقوم بإدخال معلومات بطاقة الائتمان؟ هل موقعي سهل الاستخدام؟ هل تعتبر مدة 30 ثانية كافية للعملاء للعثور على المعلومات التي يحتاجونها؟ هل أقدم اقتراحات / خيارات كافية للزوار العشوائيين؟ هل المحتوى أصلي وجذّاب بالنسبة للزوار؟ إجابة سلبية واحدة على أحد تلك الأسئلة كافية للتعبير عن وجود مشكلة خطيرة في التصميم يمكن أن تدفع المتسوقين بعيدًا وتؤثر سلبًا على معدلات التحويل. لذلك، يجب عليك التعامل مع هذه الأسئلة بأفضل طريقة ممكنة لتضمن بأن المستخدمين سيعودون إلى موقعك. العناصر الثلاثة الأساسية لكل متجر على الإنترنت 1. الثقة: لا يمكن أن تكون مواقع التجارة الإلكترونية ناجحة، إلا إذا نالت ثقة المستخدمين. المسألة حساسة فعنصر واحد ممكن أن يزعزع ثقة المستخدمين ويحثهم على الانتقال للتسوق من موقع آخر. ولهذا السبب فإن كل عنصر من عناصر متجر التجارة الإلكترونية لديك يجب أن يحاول نيل ثقة المستخدم. 2. البساطة وسهولة الاستخدام: إن البساطة لا تعبر دائمًا عن التصميم، كما تفعل العمليات التقنية. حيث يجب أن تكون عملية الشراء بسيطة ويجب ألا يلتبس على العميل أي شيء. مرة أخرى، أي عنصر سلبي يمكن أن يجعل عربة التسوق فارغة والمبيعات منخفضة. 3. الشفافية: تذكّر بأن الاتصال عبر الإنترنت هو طريق ذو اتجاهين. يجب أن تكون دائمًا في خدمة عملائك وتقنعهم بألا يترددوا بالتواصل معك في أي لحظة. بعض الطرق الأكثر شعبية للقيام بذلك هي الدردشة عبر الإنترنت، وضع رقم الهاتف بمنطقة واضحة في الزاوية اليمنى العليا أو وضع زر “اتصل بنا” بشكل واضح. كما يجب أن تقوم أيضًا بتوفير معلومات عن متجرك / عملك بحيث يدرك المتسوقون عبر الإنترنت بأن موقعك يعمل بشكل حقيقي ولا ينطوي على عمليات احتيال. عليك أن تقوم بتقديم بياناتك بطريقة واضحة وموجزة وأن تقوم أيضًا بتسليط الضوء على خيارات الشحن وإعادة السلعة. إن لم يكن هناك أي ميزات أخرى، فإن مثل هذا السلوك يمكن أن يحقق لك توصيات وردود فعل إيجابية، كما يمكن أن يزيد من مدى شعبية موقعك ورواجه. اقتراحات وممارسات يوصى بها لمواقع التجارة الإلكترونية كما هو الحال دائمًا، فإن تصميم موقع للتجارة الإلكترونية يمكن أن يتحول إلى الجزء الأكثر تعقيدًا من جدول أعمال التسويق الخاصة بك. ومع ذلك، فإن هناك العديد من العادات الجيدة والتي تنطبق على كل مواقع التجارة الإلكترونية وتقريبًا كافة المنتجات المتاحة للشراء عبر الإنترنت. دعونا نتحقق من بعض منها: لا تترك أي مساحة لالتباس الأفكار فيما يتعلق بتوفير المعلومات الشخصية ضع نفسك قليلًا مكان العميل. هل تثق بتقديم معلومات سرية في موقع جديد نسبيًا، غير معروف ومشكوك بأمره، حيث ليس هناك سوى كاتب على الجانب الآخر يقبع في مكتب ويقدم لك كلمات فقط مقابل نقودك؟ هل ستقوم بالتسجيل والدفع؟ في الواقع، إنه إجراء غامض. فمن الطبيعي تمامًا أن يشعر الزائر بالخوف وأن ينظر لأصغر التناقضات ليقوم بتبرير شكواه. كما أنه من الطبيعي بالنسبة للزائر أن يقوم بتصفح معلومات الاتصال وقضاء بعض الوقت في معاينة الصور لمعرفة فيما إذا كانت متوفرة على بعض المواقع الأخرى. إننا نوصي المصممين بأن يضعوا مقدمة واضحة ومفصّلة قدر الإمكان، بحيث لا يكون لدى المستخدمين أي مشكلة للانتقال مباشرة للقيام بعملية الشراء. ركّز اهتمامك على الصور الكبيرة نعم، إنك بحاجة لأكوام من الصور الكبيرة وذات الجودة العالية لتقوم بتقديمها للعملاء المحتملين. ضع في اعتبارك بأنه العميل ليس لديه فرصة مشاهدة المنتج الذي يشتريه، كما تعتبر الصور استراتيجية رائعة لجذب العميل إلى المنتج. أما بالنسبة لجميع الأمور الأخرى، فنادرًا ما يقوم الناس بمقاومة المناظر الجميلة والجذابة، لذلك تأكد من تقديم أفضل الصور الممكنة. قم بمراعاة التفاصيل. قم تصوير المنتج من كافة الزوايا وتأكد من أن الصور قابلة للتكبير. قم أيضًا بإنشاء معرض كامل واجعله متوفرًا في كل صفحة خلال عملية الشراء. حافظ على وقت المستخدمين كما تعلمون وحسب تجربة شخصية، فإن 90٪ من المستخدمين تقريبًا يقومون بالتصفح دون وجود هدف معين لديهم. وما يهمك حقًا كمنتِج هو أولئك الأشخاص الذين يمثلون نسبة 10٪ والذين يقومون بزيارة صفحتك الرئيسية ويمتلكون فكرة واضحة لما يريدونه. أقل ما يمكنك القيام به هو أن تقوم بتسهيل عملية التصفح ومساعدتهم في تحديد معلوماتهم خلال أقل من 30 ثانية. كما يجب أن يكون الجزء العلوي لموقعك الإلكتروني واضحًا ويجيب على كافة الأسئلة التي قد يسألها الزائرون عند وصولهم إلى موقعك: ماذا يبيع هذا الموقع؟ من هؤلاء؟ لماذا يجب أن أثق بهم؟ بالطبع، قد يكون هناك الكثير من الأسئلة وذلك اعتمادًا على جمهورك. يعتبر الالتزام عنصر رئيسي لا يجب المساس به وذلك بهدف الحفاظ على التفرد وجمال المظهر. حيث يمكن التخلي حتى عن تلك المواقع الرائعة والأكثر تطورًا في حال فشلت في تقديم المعلومات اللازمة. تسليط الضوء على المنتجات ذات الصلة ما لم تكن متخصصًا بمنتج / خدمة واحدة، فعليك أن تقوم بربط صفحات المنتج بصفحات المنتجات ذات الصلة (الأحذية مع حقائب اليد، الأقراط مع القلائد، الخ). وعليك أن تكون واعيًا إلى أن العلاقة يجب أن تبدو طبيعية وافتراضية، وذلك عوضًا عن وضع رابط بأسفل الصفحة. التفرد يأتي مع الارتباط بالمتوسط فإن معدل الارتداد للزوار الذين يقومون بزيارة المواقع التي تم إضافتها مؤخرًا لا يزيد عن 40٪. وبمصطلحات المصممين، فإنه من المرجح أن يغادر 40٪ من الأشخاص موقعك في نفس اللحظة التي يقومون فيها بزيارته. لكن السؤال الحاسم هو: كيف يمكنني أن أحافظ عليهم في الموقع؟ كن مميزًا في وصف منتجاتك. قد يبدو الوصف عبارة عن عبارات جاهزة ومكررة، لكن ذلك لا يعني بأنها فقدت قوتها. وعوضًا عن كتابة الوصف الذي يرفقه المصنعون، كن مبدعًا وقم بكتابة الوصف الذي يقوم بترسيخ العلاقة مع علامتك التجارية. إن هذا التكتيك من شأنه أن يساعدك بالتأكيد لأن تكون بارزًا بين كل تلك المواقع، وسيساعد المستخدمين في الاستمتاع بعملية الشراء. أخيرًا وليس آخرًا - الدفع إن قاعدة البساطة تنطبق أيضًا على عملية الدفع. في الحالة المثالية، يجب ألا تستغرق عملية الدفع أكثر من صفحة واحدة مليئة بالمراجعات، سلة التسوق، معلومات الفواتير أو تفاصيل الشحن. ومن المهم أيضًا أن يكون هناك زر تأكيد إضافي، بحيث لا يشعر العميل بأن عملية الشراء تمت بسرعة كبيرة. تعتبر مسارات الدفع الطويلة من أكثر الأخطاء شيوعًا في مواقع التجارة الإلكترونية. حيث تتكون عادةً من الكثير من الصفحات، أو تقوم بإعادة توجيه المستخدمين إلى الفواتير، الشحن، معلومات سلة التسوق قبل أن يصلوا لأوامرهم النهائية. وفي الحقيقة فإن هذه الإجراءات تخيف المستخدمين. إن تلك العملية تقودهم من تعقيد إلى لآخر، ولذلك فمن المحتمل أن يتخلوا عن عملية شرائهم. مهما نويت أن تكون عملية الدفع قصيرة، لا تنسى أن تضع قسم المراجعة خلالها، بحيث يمكن للعميل التحقق من طلبه قبل شرائه. وحسب التجربة فإن عدم وجود خيارات للمراجعة يمكن أن يخفف من حماس المستخدمين. اختبر موقعك أولًا فيما يلي بعض الاختبارات السهلة والمهمة التي يمكنك استخدامها قبل إطلاق موقعك: قم باختبار زر ‘إضافة إلى السلة’، وخاصة من حيث الحجم واللون أو المكان. قم باختبار فئات المنتجات التي تظهر أثناء انتقال المستخدم في الموقع، وحاول أن تضيف فئة جديدة لترى كيف ستبدو. قم باختيار المنتجات الأكثر مبيعًا لتدعم الصفحة الرئيسية قم بتقديم عرض خاص: قم بعرض الاشتراك واعمل على دعوة الأشخاص ليقوموا بتجربته. حاول استخدام القسائم وقم بتقدير تأثيرها على معدلات التحويل لديك. العبارات التي تشجع المستخدم على اتخاذ إجراء تعتبر العبارات التي تشجع المستخدم على اتخاذ إجراء معين عنصرًا أساسيًا لنجاح أي موقع تجارة إلكترونية. ولكن إن لم تكن تلك العبارات فعّالة، فمن المرجح أن يؤثر ذلك سلبًا على المبيعات والتحويلات. وبشكل عام، يستخدم تصميم موقع التجارة الإلكترونية نوعين أساسيين من العبارات: عبارات محددة لكل منتج (عندما يبيع الموقع أكثر من منتج)، أو عبارة موحدة لجميع المنتجات، وتكون متاحة في كل صفحة سواء عند التصفح أو عرض النتائج. يبدو كلا النوعين متشابهين وكلاهما يحوي عبارات مثل “إضافة إلى السلة”. وتستخدم المواقع التي تسعى للأصالة عادةً صياغة معينة، مثل “اشترِ الآن”، “اطلب الآن”، وما إلى ذلك. أفكار أخيرة أهم تفاعل للمستخدمين هو انطباعهم الأول عن موقعك. إنه يستهلك حوالي ثانيتين من وقتهم فقط، لكنه يدوم إلى الأبد. نعم ليس أمرًا عادلًا. لكن كمصمم لموقع تجارة إلكترونية، ليس لديك أكثر من ثانيتين لجذب الانتباه وزيادة التحويلات. تلك الثانيتين هي أداتك الوحيدة لتظهر الجمال، الفاعلية، وبأسعار معقولة. إن هذه المهمة الصعبة لا تترك مجالًا للأخطاء في تقديم متجرك على الإنترنت وتجعل من الانطباع الأول أمرًا عظيمًا. مرة ثانية – إنه أمر قاسٍ، ولكن نجاح التصميم وقرارات المستخدمين تعتمد بشكل كامل تقريبًا على المظهر والعناصر المرئية. من أجل قيامك بإبهار عملائك، فإنك بحاجة إلى التعرف على العناصر الأساسية للتصميم والتوصل إلى الأفكار الأصلية في الوقت نفسه. إن القواعد والمبادئ الأساسية المبالغ بها قد لا تؤدي إلى نتائج مرضية، ولكنها قد تخيب ظن العملاء وتجعلهم يسارعون في العثور على بديل مناسب. ترجمة -وبتصرّف- للمقال Guide on How to Design an eCommerce Website and Online Store لصاحبه Iggy

قد يزور عميلك المُحتمل موقعك الشّخصي الآن بينما تقرأ هذا المقال، سمع عنك ذلك العميل واعتقد بأنّه من العظيم أن يتعامل معك، ولحسن حظّك فإن له ميزانيّةٍ عالية. لكن ما إن تصفّح ذلك العميل موقعك حتّى غيّر رأيه، لم يتصل بك، وبدلًا من ذلك تراجع وذهب ليبحث عن شخصٍ آخر. هل تريد ذلك أن يحدث ؟ بالتأكيد لا. لكنّه يحدث أكثر مما تعتقد، لذلك دعنا نصلح الأمورَ الآن. موقعك الشّخصي الذي تعرض خدماتك من خلاله قد يشوّه صورتك ويجعلك تبدو ضيّق الأفق، ساذجًا، غير كفءٍ، عديمَ الخبرة، أو قد يُعطي الانطباع بأنّك تُعاني من جميع هذه العُيوب. يؤسفني قولُ ذلك، لكنّ هذا الأمر صحيحٌ في 80% من الأوقات ولهذا أرغب في التّحذير من الأمر. عندما تقوم بأحد هذه الأخطاء التّالية في موقعك، فإنه لن يخدمك أو يلمِّع اسمك: الإفراط في الرسميّة، فالطريقة المتكلّفة تصنع فجوةً بينك وبين العملاء.أن تكون ودودًا بشكلٍ مفرط ومبتعدًا عن الرسميّة، من المفترض ألا تستخدم الاختصارات أو الوجوه التعبيرية وألا تنشر معلوماتٍ عن حياتك الخاصة على موقعك الإلكتروني.الإلحاح واللهث وراء زيادة المبيعات، أساليب المبالغة والضغط غالبًا ما تصدُ العملاء المحتملين.اختلاف لهجتك على مختلف صفحات الموقع بشكلٍ كبير لسعيك لكسب رضا الجميع.الكتابة عن نفسك بضمير الغائب، كأن تقول: "ندى أشرف كاتبة ومدوِّنة مستقلة".الكتابة عن نفسك بصيغة الجمع، كأن تقول: "راسلنا وسنرد عليك في أقرب وقت".ألا تكتب مُحتوى موقعك الإلكترونيّ بنفسك.بالتأكيد هناك استثناءات لهذه القواعد العامّة فلربّما تحتاج أن تستخدم اللغة الرسميّة بشكلٍ أكبر في موقعك ليناسب سوقك المستهدف مثلًا. أنت الأكثر درايةً بنوع العملاء الذين تستهدفهم وتريد أن تجذبهم لموقعك. لكن إن كنت لا تملك أسبابًا منطقيّة لاختيارك الطريقة التي تكتب بها في موقعك، فقد حان الوقت لأن تفكّر في الأمر بمزيدٍ من العمق. الكتابة بصوت يُعبّر فعليّا عنك هي رهانك الرابح عندما تكتب عن نفسك وخدماتك، سواءً كنت مدوّنًا على الإنترنت أو كاتبًا على أرض الواقع. لماذا الكتابة بصوت يعبر بصدق عنك هي أفضل ما يمكنك القيام بهيزور عميلك المحتمل موقعك ليعرف المزيد عنك وعن شخصيّتك، وبناءً على ذلك يقرّر إن كان يناسبه التعامل معك أم لا. كتابة رسالةٍ مناسبةٍ للقارئ، رسالةٌ واضحة وحقيقيّة، تجعلك تقطع شوطًا طويلًا، سواءً في مجال صياغة موقعك أو الربح من خدماتك. الرسالة الرئيسية التي تريد إيصالها من الموقع الذي تعرض خدماتك من خلاله هي: "وظّفني فأنا أهلٌ لذلك" لا يتوجّب عليك ذكر ذلك صراحةً -رغم أنّ القيام بذلك قد يكون السّبب الذي قد يدفع بأصحاب بعض المشاريع إلى توظيفك- بيانُ أهليّتك وكفاءتك أولويّة، وتستطيع أيضًا إضافة أسبابٍ إضافيّة تغري العملاء المحتملين بالتعامل معك. تستطيع التغلُّب على قلّة الخبرة بالحماسة وامتلاك مهارات التعلم، وبإمكانك أن تتغلب على قلّة معرفتك بالبحث. ارتكابُ هذه الأخطاء –التي ذُكِرت في المقال- في موقعك قد يجعل العميل يتوجّس منك خيفة ويخشى التعامل معك. كيف تستعيد صوتك المتفردلا تقلق، لكلّ مشكلةٍ حل، إذا كانت صياغة موقعك لا تعبّر عنك بشكل جيّد، فأمامك 4 خطوات بسيطة لتعالج هذا الأمر: اطلب من أحد أصدقائك أن يجري مقابلةً معك عن عملك، خبراتك وخلفيّتك الثقافيّة، والخدمات التي تقدمها. استعمل هذه المقابلة كمرجعٍ لصياغة مُحتوى موقعك الشّخصي، حاول أن تحافظ على طريقتك الطبيعية غير المتكلّفة عندما تكيّف نصّ المقابلة ليتناسب مع موقعك.اقرأ الصيغة الحاليّة من موقعك بصوتٍ مرتفع لشخصٍ يعرفك جيّدًا. اطلب منه أن يرفع يده كلّ مرّةٍ لا يشعر فيها أنّ الكلام يصفك فعليّا، وسيسلط ذلك الضوء على النواحي التي يجب عليك تعديلها.حدّد سوقك المستهدف لتستطيع تكييف صياغة موقعك لجذب العملاء المثاليين، تخيّل أنّك تُجري محادثةً معهم على انفراد.اطّلع على مواقع المستقلين الذين تنظر لهم بعين الإعجاب، حلّل كيف أشبعوا مواقعهم من شخصيّاتهم المتفرّدة، ولاحظ العناصر الناجحة التي تستطيع محاكاتها.عندما تستخدم صوتك الخاص للتعبير عن نفسك، سيفهم العملاء أكثر من تكون. ستجذب المشاريع التي تناسبك، وستتجنب إضاعة وقتك في تلك التي لا تناسبك. كل ما عليك فعله -ببساطةٍ- هو أن تكون "أنت"، وأنت تسمح لموقعك أن يُظهر جانبًا من شخصيتك. ترجمة -وبتصرف- للمقال Why Your Freelance Writer Website Makes You Sound Like an Idiot لصاحبته Sophie Lizard. حقوق الصورة البارزة: Designed by Freepik.

أنشأنا في الدرس السابق موقع الويب الأوّل لنا، سنتعلّم الآن كيف سننشر موقع الويب هذا بشكل فعليّ على الانترنت. ملاحظة: لن يكون هناك الكثير من الزوار لموقعك في البداية، مالم تعط الناس عنوان الموقع على الانترنت. الاستضافة لكي يستطيع الجميع الوصول إلى موقعنا على الانترنت، نحتاج إلى مُخدّم Server يُخزّن موقعنا عليه، بالإضافة إلى عنوان URL يُشير إلى الموقع. هناك عدد هائل من الشركات التي يمكن أن تقدّم لك خدمة تأجير مساحة على المُخدّم لهذا الغرض. تُسمّى هذه الخدمة عادةً باستضافة ويب Webhosting. نستعرض بعض الاستضافات المجّانية المُتاحة. أنصح أن تبدأ بخدمة BitBalloon إذا كانت هذه هي التجربة الأولى لك. 1- الاستضافة على BitBallon خدمة BitBallon بسيطة ورائعة وأنصح بها. إليك الخطوات اللازمة للتسجيل: 1. اشترك ضمن موقع BitBalloon. وذلك بالنقر على زر التسجيل Sign Up ثم اختر Sign in Using Persona. بعد ذلك أدخل بريدك الإلكتروني وكلمة المرور. 2. عندما تسجّل الدخول، يمكنك ببساطة سحب كامل مجلّد موقع الويب (المجلّد Portfolio) إلى المكان المخصّص في صفحة الخدمة. 3. ربما تستغرب هذه البساطة، ولكن بمجرّد تحميل الموقع سيُولّد عنوان URL يُشير إلى موقعك الذي حمّلته قبل قليل. انقر هذا العنوان واختبر ظهور الموقع بشكل صحيح. 4. لتبسيط عنوان URL المولّد بشكل آلي، يمكننا النقر على Edit name وإدخال اسم مناسب. 5. من أجل التحديثات التي من الممكن أن تجريها على الموقع، اسحب مجلّد الموقع من جديد إلى الصندوق المسمّى Drag & Drop to Update your Site. 2- الاستضافة على Google Drive يمكن استخدام خدمة Google Drive كخدمة استضافة. الأمر السلبي الوحيد هنا، هو أنّك ستحصل على عنوان URL طويل جدًّا. لنجري الخطوات التالية للاستضافة: حمّل مجلّد الموقع إلى Google Drive. حدّد المجلّد المُحمّل ثم اختر مشاركة Share. انقر فوق خيارات متقدّمة Advanced وغيّر مستوى الوصول إلى Public on the web أي متاح للعموم على الانترنت. افتح المجلّد في Google Drive وتأكّد من أنّ جميع ملفّات الموقع قد حمّلت (index.html والصور …الخ). انسخ الرموز التي تأتي بعد الكلمة ( /folders#) ضمن شريط العنوان للمتصفّح. ستكون هذه الرموز هي المُعرّف الخاص بالمجلّد المُحمّل. أدخل في شريط العنوان للمتصفّح العنوان التالي http://googledrive.com/host متبوعًا بالرموز التي نسختها من الخطوة السابقة. يمكن الآن لأي شخص لديه هذا العنوان الوصول إلى موقعنا. 3- الاستضافة على Dropbox يمكن استخدام Dropbox كخدمة استضافة. ولكي نتمكّن من ذلك نحتاج إلى خدمة إضافية لتوجيه الطلبات إلى الموقع المُستضاف. توجد خدمتان يمكن استخدامهما وهما Pancake و DropPages. 4- الاستضافة على GitHub إذا كان لديك بعض الخبرة البرمجية فعندها يُعتبر GitHub طريقةً رائعة لاستضافة مواقع الويب. تُعتبر GitHub منصّة لتسهيل التشاركية بين المبرمجين، كما تُتيح هذه المنصة استضافة مجّانيّة لصفحات الويب وذلك على صفحات GitHub. تؤمّن صفحات GitHub المزيد من الخيارات (فمثلاً تستطيع استخدام النطاق domain الخاص بك)، لكنها تتطلّب بعض المهارات في التعامل مع نظام التحكم بالإصدارات البرمجية Git. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن تصغير عناوين URL يمكن أن يكون عنوان موقعك طويلًا جدًّا وذلك بحسب الاستضافة التي اخترتها. توجد بعض الخدمات البسيطة لتصغير عنوان URL الخاص بموقعك. لتصغير العناوين فائدة كبيرة، حيث يمكن إدخالها يدويًا بسهولة ضمن متصفح الويب في هاتفك الذكي مثلًا، كما توجد بعض الخدمات التي تزوّدك بكود QR للوصول السريع من هاتفك الذكي إلى الموقع مباشرة باستخدام كاميرا الهاتف فحسب. إليك قائمة من بعض خدمات تصغير العناوين: خدمة Goo.gl (تتضمن توليد كود QR). خدمة bit.ly. خدمة Tiny.cc. النطاق الخاص بنا ربما يأتي يوم نرغب فيه بأن نحصل على اسم نطاق خاص بنا مثل http://www.my-super-website.com. يمكنك في بعض الحالات تسجيل اسم نطاق ضمن مزوّد خدمة الاستضافة نفسه (كما هو الحال مع خدمة الاستضافة BitBallon). أو يمكنك الوصول إلى عدد كبير جدًّا من خدمات تسجيل النطاقات الخاصة، تقدّم بعضها عروضًا مختلفةً عن بعضها الآخر، يمكنك البحث في Google لتصل إلى عدد كبير منها. سنُضفي على الموقع في الدرس الثالث بعض تأثيرات التنسيق المختلفة عن طريق CSS. ترجمة -وبتصرف- للمقال HTML & CSS Tutorial - Part 2: Publishing Your Website لصاحبه Marco Jakob.

تعرّض موقعك للاختراق هو أحد أكثر التجارب إحباطًا والتي ستواجهك أثناء عملك كمدير أحد المواقع؛ ولسوء الحظ، لن تغني عنك تعزيزاتك الأمنية شيئًا، إذ يُختَرَق يوميًا حوالي 30000 موقع إلكتروني، ومن المرجح أن يقع موقعك فرسيةً عاجلًا أم آجلًا، لذا من المهم أن تعلم ما الذي يتوجب عليك فعله عند حدوث ذلك. لكن لحسن الحظ، من الممكن أن تتعرَّف على الآلية التي أُختِرَق موقعك بواسطتها وذلك عبر القيام ببعض أعمال «التنقيب» في سجلات الموقع؛ وبعد أن تُحدِّد كيف وصل المخترق إلى موقعك تمامًا، فيمكنك ترقيع الثغرة الأمنية لتنجب استغلالها مجددًا مستقبلًا. يتوافر في WPMU DEV فريق دعم فني خبير يستطيع مساعدتك في تشخيص مشاكل موقعك أو يمكنك استخدام إضافة مثل Defender لترقيع الثغرات الأمنية قبل وقوع الهجوم (سنستفيض بالشرح عن هذا الموضوع لاحقًا). لكن إن كنتَ عازمًا على حلِّ المشكلة بنفسك، فسأذكر في هذا الدرس أكثر الطرائق التي يمكن اختراق موقعك عبرها شيوعًا وكيف تتحقق من السجلات بحثًا عن أدلة. كيف تُختَرَق المواقع «الجيدة» يتسلل المخترقون إلى موقعك بإحدى الطريقتين الآتيتين: إما يدويًا وإما عبر استعمال برنامج يُنشئونه لهذا الغرض يسمى «bot» أو «hackbot»؛ ولمّا كانت أغلبية الهجمات تستهلك وقت المخترقين فلذا تستعمل برمجيات hackbot لمهاجمة مئات أو حتى آلاف المواقع ساعيًّا بشكلٍ ممنهج. هذه هي الطرائق الرئيسية التي يستطيع المخترقون الوصول عبرها إلى موقعك: هجمات تخمين اسم المستخدم وكلمة المرور: وهذا النمط من الهجمات يُطلَق عليه اسم «Brute force attacks». فلو كنتَ تستخدم اسم المستخدم الافتراضي (مثل «admin» أو «administrator») مع كلمة مرور ضعيفة، فأنت «تهدي» المخترقين نصف المعلومات التي يحتاجون لها للدخول إلى موقعك. ثغرات في البرمجيات: عندما يجد المخترقون ثغرةً أمنيةً في برمجية ووردبريس أو في إحدى إضافاتها أو قوالبها أو السكربتات المستعملة فيها، فسيحاولون استغلالها للوصول إلى موقعك، بمحاولة «حقن» السكربتات الخاصة بهم على سبيل المثال. الأبواب الخلفية: يوضع ملفٌ خبيثٌ بين ملفات موقعك، والذي يحتوي على سكربت الذي يسمح للمخترق بالوصول المتكرر إلى موقعك دون أن يخلِّف وراءه أثرًا. البرمجيات الخبيثة والفيروسات: إذا كان حاسوبك يعاني من الفيروسات والبرمجيات الخبيثة، فيمكن أن يستعملها المخترقون للوصول إلى موقعك. خادوم غير مؤمن: يجب أن يكون الخادوم الذي تستضيف عليه موقعك آمنًا؛ فلو لم يكن كذلك، فيستطيع المخترقون استغلال الثغرات الأمنية فيه لاختراق موقعك. أذونات غير صحيحة للملفات: عليك ضبط الأذونات (permissions) على جميع ملفاتك وهذا يعني أنَّك تستطيع أن تُحدِّد مَن يستطيع قراءة السكربتات والكتابة إليها وتنفيذها. فإذا سمحتَ بكل ذلك فيمكن للمخترق أن يُعدِّل ملفاتك بسهولة، ويضيف سكربت خبيث مثل الأبواب الخلفية، وبالتالي سيُختَرَق موقعك. استخدام موقع احتيالي: يمكن للمخترقين إنشاء مواقع تتنكر بصفة الشركة الأصلية أو المدونة المعنية، ويُنشِئون نماذج تسجيل مصممة خصيصًا لجمع المعلومات لاستخدامها لاحقًا، وفي حال كان الموقع مبينًا على ووردبريس فيُحتَمل أن يسرقوا بيانات الدخول. ثغرات XML-RPC: يُستخدَم بروتوكول XML-RPC لميزة pingbacks و trackbacks في ووردبريس، حيث يسمح لووردبريس بإنشاء عدد من الاستدعاءات عبر طلبية HTTP والذي يعني أنَّ موقعك يمكن أن يُرسِل pingback لموقعٍ آخر بالكامل ويستلم الرد. والمشكلة هي أنَّ المخترقين يستخدمون هذه الميزة لتنفيذ هجمات brute force عن بعد. هجمات XSS‏ (Cross-site Scripting): ثغرة XSS هي أنَّ الشيفرة مكتوبة بطريقة تجعل من الممكن للمخترق أن يكتب وينفذ شيفرة JavaScript خبيثة والتي تحاول الوصول إلى بيانات المتصفح الخاص بالمستخدم؛ ويتم ذك عادةً عبر وضع رابط لإرسال المستخدمين إلى أحد المواقع لسرقة أيّة بيانات يدخلونها أثناء تصفحهم للموقع الهدف. حيث يستطيعون مثلًا سرقة بيانات دخول مدير الموقع للوصول إلى لوحة التحكم. تزوير الطلب عبر المواقع (Cross-site request forgery اختصارًا CSRF): يحدث هذا النوع من الهجمات عندما يزوِّر المخترق طلبيةً من المستخدم عبر استخدام الشيفرات. وهذا يعني أنَّ المخترق قد يُعدِّل على الطلبية العادية لأغراضه الخبيثة. ولعدم امتلاك المخترقين على وصولٍ كمسؤول (admin) فإنهم يخدعون المستخدم لجعله ينفذ شيئًا لإعطاء ترخيص بتنفيذ الطلبية الخبيثة. وهذا النوع من الهجوم يمكن أن يستخدم لخداع المستخدم لفعل العديد من الأشياء مثل إرسال تفاصيل الدخول للمخترق مما يعطيه وصولًا إلى الموقع. المشكلة أنَّ القائمة السابقة ليست شاملةً وهنالك الكثير من الطرائق المتاحة أمام المخترقين، ومن المستحيل التخمين ما هي الآلية التي ستُتبَع لاختراق موقعك، وماذا عليك أن تفعل لحل المشكلة. إذا بدأت بالتخمين، فمن المرجح أنَّك لن تكتشف الخلل، وستضيع وقتك في حلقة مفرغة؛ فما يزال المخترق متمكنًا من الوصول إلى موقعك، في حين أنَّك حَلَلتَ إحدى المشكلات ظانًا أنَّك أغلقتَ الثغرة التي دخل منها؛ إلى أن يتعرض موقعك للاختراق مجددًا، وهكذا… الطريقة الوحيدة التي يمكنك أن تتأكد فيها من أمان موقعك بعد اختراقه هي أن تَعلَم تمام العلم ما هو الجزء الذي تعرض إلى الهجوم من موقعك، وبعد معرفتك لذلك فيمكنك أن تصلح المشكلة وتنهي الحلقة المفرغة. التعامل مع السجلات يمكن أن توفِّر لك سجلات موقعك دلائل مهمة تبيّن كيف اُخترِقَ موقعك؛ ولا ضير من تفقد سجل أخطاء موقعك. مكان هذه السجلات يختلف من موقعٍ لآخر وذلك اعتمادًا على الاستضافة، لذا أنصحك بالتواصل مع مزود الاستضافة إذا لم تعرف أين تجد السجلات. في لوحة cPanel، يمكنك أن تجد هذه السجلات في قسم Metrics بعد تسجيل الدخول. ويكون سجل الأخطاء قصيرًا عادةً، لذا يمكنك الضغط على زر Errors لتنظر إلى سجل الأخطاء أو يمكنك الضغط على زر Raw Access للوصول إلى سجل الوصول (access log) أولًا. يجب أن يعطيك سجل الوصول فكرةً عن كيفية اُخترِق موقعك. يمكن أن يعطيك سجل الأخطاء فكرةً سريعةً عمّا حدث، لكن لعدم عرض محاولات الوصول الناجحة إلى موقعك، فلن تستفيد منه كثيرًا. لكن مع ذلك أرى أنَّ من المناسب البدء به فلربما يعطيك فكرة عمّا عليك البحث في سجلات الوصول. للحصول على نسخة من سجل الوصول، فاضغط على رز Raw Access، ثم اختر أحد المواقع الموجودة في القائمة لتنزيل نسخة من السجلات. بعد التنزيل، يمكنك استخراج المحتويات وعرضها في برنامجك المفضَّل مثل المحرر Brackets المفتوح المصدر. أبقِ في بالك أنَّ cPanel تحتفظ بسجلات آخر 24 ساعة فقط، لكن يمكنك تشغيل ميزة الأرشفة لحفظ بيانات الوصول لشهرٍ أو أكثر. أما لسجلات الأخطاء، فيُسجَّل عادةً آخر 300 خطأ فيها. لتفعيل الأرشفة، عليك تفعيل الحقل الموجود في القسم العلوي من الصفحة المُعَنوَن «Archive logs in your home directory at the end of each stats run every 24 hours»، يمكنك أيضًا تفعيل الحقل الذي يدنوه لحذف السجلات القديمة من الأشهر الماضية، وهذا يساعد في تقليل المساحة التخزينية والموارد التي يحتاج لها موقعك للاستمرار في أرشفة السجلات. لا تنسَ الضغط على زر Save لحفظ تغييراتك؛ يجدر بالذكر أنَّ هذين الخيارين مفعلان افتراضيًا، لكن قد يعطلها مزود الاستضافة لبعض خطط الاستضافة. من المهم ملاحظة أنَّك لا تملك وقتًا طويلًا لتفحص السجلات القديمة، فعند اختراق موقعك، فيجب عليك فورًا الحصول على السجلات وتحليلها لأن لديك فرصة زمنية قصيرة قبل حذف سجلاتك حذفًا دائمًا. لذا احفظ منها ما استطعت لمنع فقدان البيانات المهمة. فهم بنية السجلات ستبدو سجلات الأخطاء والوصول متشابهة وكأنها كتل كبيرة من النص غير المفهوم، لكن بعد أن تتعلم طريقة عرض المعلومات في السجلات، فلن يصعب عليك فهمها كما قد تتوقع. عندما ننظر إلى سجل الأخطاء، فمن المهم أن نعلم بنيته: الوقت والتاريخ نوع الخطأ عنوان IP للمستخدم وصف الخطأ مسار الصفحة التي تمت محاولة عرضها رابط URL للموقع الذي أتى المستخدم منه إلى الصفحة المعنية تنطبق المعلومات السابقة على عدد كبير من أنواع السجلات، لكن لاحظ أنَّ سجلك قد يكون مختلفًا لذا أنصحك بالرجوع إلى التوثيق الذي تقدمه لك شركة الاستضافة (أو الذي يوفره خادومك). والمِثل ينطبق على سجلات الوصول. هذه هي بنية أغلبية سجلات الوصول: عنوان IP للمستخدم الوقت والتاريخ طريقة الوصول إلى الصفحة عبر برتوكول HTTP (مثلًا: GET أو POST …إلخ.) والإصدار رمز حالة HTTP (مثلًا: 200 أو 404). عدد البايتات المُستقبَلة البرمجيات المستخدمة (المتصفح أو نظام تشغيل الجهاز) من الذي وصل إلى موقعك (ستُعرَض عبارة User Agent للمتصفح عادةً) البيانات التي يجدر بنا البحث عنها عندما تحدِّق بالبيانات الموجودة في السجل فستبدو وكأنها كلام ليس ذا معنى ما لم تكن تعلم ما الذي عليك التركيز عليه. أنصحك بالبدء بإلقاء نظرة سريعة على سجل الأخطاء فقد يعطيك تلميحةً عمّا عليك البحث عنه في سجل الوصول. إذا لاحظتَ أنَّ أحدهم حاول الوصول إلى ملفاتٍ لن يحاول المستخدم العادي زيارتها –لكن المخترقين سيفعلون ذلك– فلاحظ عنوان IP. إذ إنَّ المخترقين يحاولون الوصول إلى ملفات وصفحات مثل ملف ‎.htaccess و install.php و wp-config.php والأجزاء الأخرى المشابهة من موقعك. هذا مثال عن سطرٍ موجودٍ في سجل الأخطاء الذي ولَّدتهُ برمجية cPanel: [Fri May 06 23:14:24.856758 2016] [core:error] [pid 27290] (13)Permission denied: [client 12.345.68.90:33106] AH00132: file permissions deny server access: /path/to/your-site/.htaccess في رسالة الخطأ السابقة: منع الخادوم وصول المستخدم إلى أحد الملفات لعدم امتلاكه صلاحيات لعرض الملف (الذي هو ‎.htaccess)، إذا لم تتعرَّف على عنوان IP ولم يكن تابعًا لك، فيجب أن تأخذ حذرك وتسجِّل ملاحظة عن هذا السطر. إذا لم تكن تعرف عنوان IP الخاص بك، فسيخبرك Google ما هو بالبحث باستخدام العبارة «what is my IP address». عندما ترى أخطاءً مشابهةً، فيمكنك الانتقال الآن إلى سجل الوصول، وحاول أن تبحث عن أسطر مشابهة، لكن عند تمكُّن المستخدم من الوصول إلى الصفحة بنجاح، ويكون ذلك عندما تُعاد القيمة 200 كرمز لحالة HTTP في سجل الوصول. وهذا يشير إلى نجاح تنفيذ طلب المستخدم. ابحث أيضًا عن مستخدمين يحاولون الوصول إلى صفحات يفترض أنَّ الزائر سيزورها مرةً أو مرتين فقط وخصوصًا أنَّ الفاصل بين الزيارات معدود بالثواني. لكن أبقِ في ذهنك أنَّ هنالك الكثير من المكونات التي يجب تحميلها لعرض صفحة واحدة، ومن الطبيعي أن تلاحظ أنَّ أحد عناوين IP يحاول الوصول إلى نفس الصفحة مراتٍ عدّة كما في المثال الآتي: 12.345.678.910 - - [15/May/2016:15:15:03 -0700] "GET /wp-admin/network/ HTTP/1.1" 302 - "-" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:04 -0700] "GET /wp-login.php?redirect_to=http%3A%2F%2Fyour-site.com%2Fwp-admin%2Fnetwork%2F&reauth=1 HTTP/1.1" 200 2564 "-" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:06 -0700] "GET /wp-admin/load-styles.php?c=1&dir=ltr&load%5B%5D=dashicons,buttons,forms,l10n,login&ver=29ef489256bcba8815b5864843de10bb HTTP/1.1" 200 38435 "http://your-site.com/wp-login.php?redirect_to=http%3A%2F%2Fwpwringer.com%2Fwp-admin%2Fnetwork%2F&reauth=1" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:07 -0700] "GET /wp-admin/images/wordpress-logo.svg?ver=20131107 HTTP/1.1" 200 1521 "http://your-site.com/wp-admin/load-styles.php?c=1&dir=ltr&load%5B%5D=dashicons,buttons,forms,l10n,login&ver=29ef489256bcba8815b5864843de10bb" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:09 -0700] "GET /favicon.ico HTTP/1.1" 200 - "http://your-site.com/wp-login.php?redirect_to=http%3A%2F%2Fwpwringer.com%2Fwp-admin%2Fnetwork%2F&reauth=1" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:16 -0700] "GET /wp-includes/js/thickbox/loadingAnimation.gif HTTP/1.1" 200 15238 "http://your-site.com/wp-admin/network/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:16 -0700] "GET /wp-admin/admin-ajax.php?action=dashboard-widgets&widget=dashboard_primary&pagenow=dashboard-network HTTP/1.1" 200 1744 "http://your-site.com/wp-admin/network/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:14 -0700] "GET /wp-admin/load-styles.php?c=1&dir=ltr&load%5B%5D=dashicons,admin-bar,wp-pointer,common,forms,admin-menu,dashboard,list-tables,edit,revisions,media,themes,about,nav-menus,widgets&load%5B%5D=,site-icon,l10n,buttons,wp-auth-check&ver=29ef489256bcba8815b5864843de10bb HTTP/1.1" 200 90768 "http://your-site.com/wp-admin/network/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:15 -0700] "GET /wp-admin/load-scripts.php?c=1&load%5B%5D=hoverIntent,common,admin-bar,jquery-ui-widget,jquery-ui-position,wp-pointer,wp-ajax-response,jquery-color,wp-lists,quicktags,jqu&load%5B%5D=ery-query,admin-comments,jquery-ui-core,jquery-ui-mouse,jquery-ui-sortable,postbox,dashboard,thickbox,plugin-install,svg-painter&load%5B%5D=,heartbeat,wp-auth-check&ver=29ef489256bcba8815b5864843de10bb HTTP/1.1" 200 51768 "http://your-site.com/wp-admin/network/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:30 -0700] "GET /wp-admin/network/plugin-editor.php HTTP/1.1" 200 38208 "http://your-site.com/wp-admin/network/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:32 -0700] "GET /wp-admin/load-scripts.php?c=1&load%5B%5D=hoverIntent,common,admin-bar,jquery-ui-widget,jquery-ui-position,wp-pointer,svg-painter,heartbeat,wp-auth-check&ver=29ef489256bcba8815b5864843de10bb HTTP/1.1" 200 17875 "http://your-site.com/wp-admin/network/plugin-editor.php" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" 12.345.678.910 - - [15/May/2016:15:15:33 -0700] "GET /favicon.ico HTTP/1.1" 200 - "http://your-site.com/wp-admin/network/plugin-editor.php" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36" أبقِ في بالك أنَّ هذه النوع من الزيارات يحدث يوميًا، وكل سطر في سجل الوصول يشير عادةً إلى جزءٍ من أجزاء الصفحة التي يجري تحميلها، مثل ملفات JavaScript والصور. والفرق بين المخترق الذي يحاول الوصول إلى نفس الصفحة التي يحاول الزائر الاعتيادي الوصول إليها هو أنَّ المخترق قد يحاول استخدام برمجية للوصول إلى نفس الصفحة مرارًا وتكرارًا، لذا ستجد تكرارًا لنفس الأسطر في السجل. السجل الموجود أعلاه يُظهِر زائرًا حاول إدخال عنوان الموقع في متصفحه ويتبعه ‎/wp-admin/network كما هو ظاهر في أول سطر. ونجحت هذه الطلبية، وثم أعيد توجيه المستخدم تلقائيًا إلى صفحة تسجيل الدخول. بعد عدِّة أسطر (التي تمثِّل تحميل مختلف أنواع الوسائط)، سنرى أنَّ المستخدم قد نجح بتسجيل دخوله وأعيد توجيهه إلى لوحة التحكم في السطرين السادس والسابع. ومن ثم انتقل مباشرةً إلى محرر الإضافات (Plugin Editor) في السطر العاشر. وصحيحٌ أنَّ هذه نسخة مختصرة مما ستشاهده في سجلك، لكنها تعطيك فكرة عن سلسلة الأحداث التي تشتبه بها. فلن يحاول الكثير من المستخدمين الوصول إلى محرر الملفات في لوحة التحكم بعد تسجيل دخولهم مباشرةً، لكن سيفعل المخترقون ذلك. وفي هذه الحالة، يبدو أنَّ المخترق قد حصل على اسم المستخدم وكلمة المرور بطريقةٍ ما. إذا رأيتَ في سجلات الأخطاء أو الوصول أنَّ هنالك محاولاتٌ كثيرةٌ للوصول إلى صفحة التسجيل أو صفحة «نسيت كلمة المرور»، فلقد اكتشفتَ مَن اخترق موقعك وكيف استطاع الدخول إلى موقعك عبر هجوم التخمين (brute force attack). قد تستدل على وجود عدد كبير من المحاولات الفاشلة التي تراها قبل نجاح إحداها عبر النظر إلى رمز حالة HTTP؛ فسيشر إلى أخطاءٍ من طرف العميل إذ كان يبدأ بالرقم 400، وهذه بعض دلالات هذه الأرقام: 400 Bad Request: هذا يعني أنَّ المستخدم ارتكب خطأً في صياغة الطلبية. 401 Unauthorized: يحدث هذا الخطأ عندما يُطلَب من المستخدم الاستيثاق للوصول إلى الصفحة، لكن المعلومات التي أدخلها غير صحيحة. 403 Forbidden: هذا الخطأ شبيهٌ بالخطأ 401، فهذا الرقم يشير إلى أنَّ المستخدم غير مرخَّص له برؤية الصفحة التي حاول الوصول إليها، وهذا يعني أنَّ الطلبية صحيحةٌ تقنيًا، لكن الخادوم قرر ألّا يعطي المستخدم وصولًا إلى الصفحة (وهذا هو الاختلاف بينهما). 429 Too Many Requests: إذا ثبَّتتَ إضافةً تحصي عدد مرات وصول أحد المستخدمين إلى الصفحة وتضع حدًا أقصى لها، فسيرى المستخدم هذا الخطأ عندما يجري طلبيات أكثر من الحد الأقصى خلال فترة زمنية محددة. وهذا لن يشكِّل مشكلةً للمستخدمين العاديين لكن ربما يشير إلى استخدام أحد المخترقين لبرمجية اختراق. صحيحٌ أنَّ القائمة السابقة لا تحتوي جميع رموز الأخطاء التي قد تصادفها، لكن يجب أن تعطيك فكرةً عمّا عليك البحث عنه في سجلات الوصول. أصعب جزء من عملية البحث في سجلاتك هي أنَّك ستصادف الكثير من الصفحات التي يطلبها الزوار العاديون حتى لو كان موقعك صغيرًا. فلو سجَّل مدير الموقع دخوله إلى لوحة التحكم فسينتج ذلك حوالي 10 أسطر في سجل الوصول قبل أن يضغطوا على أيّ شيءٍ بعد تسجيل دخولهم، لذا يمكنك أن تتخيل الحجم الكبير للسجل الذي عليك تفحصه حتى لو كان زوار موقع قلّة. ترشيح واستبعاد الزوار العاديين إذا رشَّحتَ الطلبيات العادية فيمكنك أن تضيّق مجال بحثك كثيرًا، شارك موقع Sucuri Security بعض النصائح حول كيفية تفسير سجلاتك باستخدام الأداة grep بعد الاتصال عبر SSH. افتح عميل SSH المفضَّل لديك مثل Terminal لأجهزة Mac OS X أو PuTTY للأجهزة العاملة بنظام ويندوز وأدخل أحد الأوامر المذكورة أدناه والتي تناسب احتياجاتك. يمكنك أن تقلل كمية السجلات التي عليك تفحصها إلى أكثر من النصف عبر استبعاد جميع الأسطر التي تتضمن طلبيات لصفحات وملفات معينة مثل ملفات CSS و JavaScript والصور، والزيارات إلى الصفحة الرئيسية وصفحة ‎/contact و ‎/singup. $ cat access-log |grep -Ev "\.(js|css|png|jpg|jpeg) HTTP/1" |grep -Ev " GET (/|/contact|/signup) HTTP/1"| more أشرنا إلى الصفحة الرئيسية في المثال السابق بأوّل علامة / في العبارة GET (/|/contact|/signup)، يمكنك أيضًا تغيير contact و singup إلى صفحات أخرى إذا ارتأيتَ أنها تتعلق بموقعك ولن يهتم بها أحد المخترقين. إذا وجدتَ أنَّ الأمر السابق لم يُرشِّح أغلبية سجلك، وما يزال عليك تفحص آلاف الطلبيات، فيمكنك تجربة الأمر الآتي للبحث عن الطلبيات التي تحاول الوصول إلى صفحة تسجيل الدخول وإلى لوحة التحكم: $ cat access-log |grep -E "wp-admin|wp-login|POST /" | more ولمّا كان هذه الصفحات هدفًا للهجمات، فيمن المفيد تفحص هذا النوع من الطلبيات، خصوصًا لو أشار سجل الأخطاء إلى وجود عدد كبير من المحاولات الفاشلة للوصول إلى إحدى الصفحتين السابقتين. إذا كنتَ تعرف عناوين IP لجميع مدراء الموقع، فيمكنك أن تستبعد الطلبيات التي يجرونها عبر الأمر الآتي: $ cat access-log |grep -E "wp-admin|wp-login|POST /" |grep -v "^1.2.3.4|1.2.3.5" | more لاحظ أنَّ عليك أن تضع عناوين IP الحقيقية للمدراء بدلًا من 1.2.3.4 و 1.2.3.5 في الأمر السابق. يجب أن تساعدك الأوامر السابقة بتضييق مجال بحثك في السجلات لتجعل الطلبيات التي يجريها المخترقون واضحةً لك، لكن لا تظن أنَّ هذه الطريقة بالدقة التي كنتَ تتوقعها، فلا تُغفِل أنَّ لديك وقت قليل جدًا لتفحص السجلات في أغلبية الحالات، وقد لا تخرج بأيّة نتائج من هذه العملية، حتى لو استعنتَ بالأداة grep، فمعرفة كيف استطاع المخترق الوصول إلى موقعك كالبحث عن أبرة في كومة قش. هذا هو السبب وراء أتمتة هذه العملية، فهي أكثر دقةً وكفاءة مقارنةً بالبحث اليدوي في السجلات. أتمتة عملية استكشاف الأخطاء هنالك الكثير من الإضافات التي يمكن أن تراقب موقعك وتُخطِرُكَ إن حاول أحد المخترقين اختراق موقعك، حتى لو كنتَ نائمًا :-) . هذه الإضافات مثل Wordfence و Sucuri Security تملك خيارات رائعة لتأمين موقعك، وتوفر قائمةً مذهلةً من الخيارات لحجب المخترقين، الأمر الذي قد يصعب على بعض المستخدمين فعله. يمكنك –بشكلٍ بديل– استخدام Defender الذي يحجب المخترقين، ويسمح لك بتقوية أمن موقعك ببضع نقرات، ويحاول إصلاح الأجزاء التي قد تكون عرضةً للاختراق، ولا تُغفِل سهولةَ استخدامه وتبسيطه للمعلومات الأمنية. إضافة Defender موجودة أيضًا إذا كنتَ مشتركًا في WPMU DEV لكن يمكنك تجربته مجانًا؛ سأذكر في الأقسام الآتية كيف تعرف إذا تعرضَت للاختراق، وكيف «تنظِّف» موقعك بعد تعرضه لهجوم وكيف تؤمنه منعًا لحدوث مثل هكذا هجمات مستقبلًا، وبهذا ستمنع المخترقين مستقبلًا من مهاجمة موقعك. يمكنك فعل كل ذلك بإصلاح المشاكل الأمنية وتقوية حماية موقعك عبر ضبط إضافة Defender. البدء باستخدام إضافة Defender قبل أن تنظِّف موقعك وتحميه، عليك تنزيل إضافة Defender ثم تثبيتها وتفعيلها على موقعك. إضافة Defender متوافقة مع موقع ووردبريس مستقل، أو مع شبكة متعددة المواقع، أو مع شبكة BuddyPress؛ حيث تُفعَّل إضافة Defender على عموم الشبكة لذا ستتمكن من إدارة حماية جميع موقعك من لوحة تحكم إدارة الشبكة. ولمّا كنت تنوي إجراء تغييرات كبيرة في موقعك، فمن المهم أخذ نسخة احتياطية كاملة لموقعك قبل إجراء أيّة تعديلات، راجع درس الحماية وإضافات النسخ الاحتياطي في ووردبريس تَفحُّص موقعك بعد أن تنتهي من تنزيل الإضافة وتفعيلها، فيمكنك تفحص موقعك بحثًا عن ثغرات مباشرةً. إذا كنتَ تريد التحقق من الإعدادات فاذهب إلى Defender > Settings؛ وإلا، فاذهب مباشرةً إلى Defender > Scan ثم اضغط على زر Scan My Website. قد يأخذ التفحص بضع دقائق في المواقع أو الشبكات الكبيرة، لكن يمكنك أن تنتقل إلى صفحةٍ أخرى في موقعك أو حتى تستطيع أن تغلق متصفحك. وبعد انتهاء عملية التفحص يمكنك العودة ورؤية النتائج. إذا عُثِرَ على ثغرات أو ملفات خبيثة، فستُعرَض قائمةٌ بها، فيمكنك أن تضغط على أيقونة «المفك» بجانب العنصر الموجود في القائمة لعرض المزيد من التفاصيل عن المشكلة ويمكنك حينئذٍ أن تحذف الملف أو تتجاهل هذه الثغرة إذا لم تكن مشكلةً أمنيةً، ويمكنك أيضًا مقارنة الملف مع نسخة حديثة من ووردبريس أو يمكنك استعادة الملف المكتشف من نسخة حديثة من ووردبريس. يمكنك أن تضغط على زر التجاهل لتجاهل الملف مباشرةً، يمكنك استعادة هذه النتيجة في أي وقت لحلها لاحقًا. هنالك أيضًا أيقونة لحذف الملف مباشرةً. ستُضمَّن في الإصدارات القادمة ميزة التسجيل الحي تلقائيًا وعلى مدار الساعة، لكن لمّا كانت إضافة Defender تكتشف التغيرات التي أُجريَت على ملفاتك، فيمكنك –نظريًا– أن تعرف كيف وصل المخترق إلى موقعك دون الحاجة إلى النظر في السجلات، فلطالما أبقيتَ على إضافة Defender مثبتةً فلا يصيبنّك القلق حول أمن موقعك، لأن المخترقين سيوقَفون قبل أن تَسنَح لهم فرصة الدخول غير المصرَّح به إلى موقعك. يمكنك أيضًا أن تتأكد أن المخترقين لن يتلفوا على أمن موقعك وذلك بتقوية الحماية، ويمكنك فعل ذلك ببضع نقرات وذلك في صفحة Defender > Hardener. الثغرات التي لم تُحَل بعد ستعلَّم باللون الأصفر، ويمكنك الضغط على زر + لعرض تفاصيل حول الثغرة. ويمكنك –بنقرة واحدة– أن تحل المشكلة أو أن تتجاهلها؛ ويمكنك العودة إلى المشاكل التي تجاهلتها لاحقًا. يمكنك –إضافةً إلى تعطيل محرر الملفات وتحديث المفاتيح الأمنية– أن تُغيّر بادئة جداول قاعدة البيانات، وأن تُغيّر اسم المستخدم للحساب الافتراضي admin، وأن تخفي التبليغ عن الأخطاء في الواجهة الأمامية، وأن تمنع تنفيذ شيفرات PHP غير المصرَّح بها، والكثير غير ذلك. يمكنك أيضًا أتمتة إجراء التفحص بالذهاب إلى صفحة Defender > Automated Scans كي تنام قرير العين عالمًا أنَّ موقعك مؤمن حتى لو كنتَ مشغولًا عنه. يمكنك أن تضبط اليوم والوقت الذي سيُجرى فيه الفحص، ويمكنك أن تحدِّد إذا كنتَ تريد فعل ذلك يوميًا أو أسبوعيًا أو شهريًا. الخلاصة بعد أن تعرف كيف اُخترِق موقعك عبر تفحص سجلات الوصول يدويًا أو عبر إضافة Defender تلقائيًا، فيمكنك أن ترقِّع الثغرة الأمنية التي استعملها المخترق للوصول إلى موقعك، بدلًا من أن تحس أنَّك لا تعرف ما الذي حدث وتحاول تخمين ذلك. لكن بعد أن تنظِّف موقعك وتؤمنه، فلا تحسبنَّ أنَّ المعركة قد انتهت، فمن المهم أن تثبِّت إحدى الإضافات الأمنية مثل Defender لحماية موقعك على مدار الساعة. تثبيت إضافة Defender يعني أنَّ محاولات الاختراق المستقبلية ستُصدَّ قبل أن تصبح مشكلةً تعطِّل موقعك وتأخذ من وقتك. يمكن لإضافة Defender أن تساعدك في تحديث موقع ووردبريس مع قوالبك وإضافاتك لتحصل على آخر التحديثات الأمنية. ترجمة –وبتصرّف– للمقال Help, I’ve Been Hacked! How to Troubleshoot and Fix a WordPress Siteلصاحبته Jenni McKinnon حقوق الصورة البارزة محفوظة لـ Vecteezy

دروبال هو نظام برمجي لإدارة المحتوى مكتوب بلغة PHP مجاني ومفتوح المصدر وتم نشره تحت شروط رخصة GPL والتي تعني أنه يمكن لأي شخص تحميله واستخدامه ومشاركته مع الآخرين من دون أن يتم اقتطاع أي رسوم أو أجر عليه. كلمة دروبال هي تعريب لفظي للاسم الإنجليزي للمشروع Drupal التي أتت بدورها من اللغة الهولندية والتي تكتب بالشكل druppel وتعني قطرة الماء. نبذة تاريخية ظهرت فكرة دروبال في إحدى النقاشات التي كانت تحدث على منتديات البرمجة من قبل Dries Buytaert ومن ثم طُوّرت هذه الفكرة لتصبح مشروع برمجي مفتوح المصدر في عام 2001. بدأ الاهتمام بالدروبال كنظام إدارة محتوى لتطبيقات الويب عام 2003 عندما ساهم في بناء موقع المرشح الديمقراطي للانتخابات الأميركية هاورد ديين حيث استطاع الموقع من خلال استخدام دروبال دعم الشكبة اللامركزية وبالتالي استطاعت مواقع المرشح غير الرسمية التواصل مع بعضها مباشرة ضمن الحملة. وبعد انتهاء الحملة قام شخص من داخل الحملة بمتابعة بناء منصة ويب تساعد في النشاط السياسي وتم إطلاقها في مختبرات CivicSpace في يوليو 2004 وبذلك تكون هذه المنصة أول شركة بموظفيين ذو دوام كامل تعتمد في تطويرها على تقنية دروبال. طريقة تثبيت دروبال سأتحدّث هنا عن عملية تثبيت دروبال ضمن بيئة نظام ويندوز. لتثبيت منصة دروبال وبدء العمل فيها يتوجب علينا أولًا تثبيت خادوم محلي للعمل معه. أكثر الخاوديم المحلية شيوعًاهي XAMP أو WAMP. سنقوم بتثبيت دروبال مع WAMP Server بالخطوات التالية: أولًا: سنقوم بتحميل WAMP Server وتثبيته في الجهاز وذلك حسب الترتيب التالي: 1- نفتح المتصفح على الموقع الرسمي لـ WAMP ثم نتّجه إلى مكان تحميل البرنامج (Download) 2- بعد انتهاء تحميل WAMP نقوم بتثبيته على الحاسوب 3- بعد الانتهاء من عملية تنصيب الخادوم نحتاج للتأكد من أنه يعمل بالشكل الصحيح وذلك من خلال فتح الصفحة الرئيسية على الرابط التالي http://localhost وستظهر لدينا صفحة الخادوم كما في الصورة التالية وستلاحظ أيقونة الخادوم قد أصبحت باللون الأخضر في شريط المهام ثانيًا: سنقوم بتثبيت Drupal 8 على ويندوز ويتم بذلك بالخطوات التالية: 1- نفتح المتصفح على موقع دروبال الرسمي ثم ننقر على قسم التحميل download & Extend كما يشير السهم 2- نختار نسخة drupal8.4.3 وبعد تحميل ملف ZIP نقوم بنقله إلى المسار التالي على حاسوبك وهو C:\wamp64\www ثم يمكنك تغيير اسم الملف الناتج إلى drupal8 فقط 3- نقوم بزيارة صفحة drupal التي قمنا بتثبيتها من خلال الرابط التالي http://localhost/drupal8 فتظهر لدينا الصفحة الرئيسية لدروبال 4- نقوم باختيار اللغة English ونضغط على save and continue للمتابعة في عملية التنصيب 5- سينتقل إلى صفحة choose profile نختار الخيار الأول standard ونتابع 6- ستظهر لك قائمة بالمتطلبات التي يجب تصحيحها في حال كان هناك متطلبات في حال لم يكن هناك أي خطأ يمكنك الضغط في نهاية الصفحة على continue anyway 7- ستظهر لدينا الآن لوحة بناء قاعدة البيانات الخاصة بالموقع 8- نفتح إعدادات الخادوم من خلال الضغط على أيقونة WAMP الموجودة في شريط المهام ونختار الخيار phpMyAdmin اسم المستخدم هو root وكلمة المرور تترك فارغة لتُفتح لدينا إعدادات الخادوم 9- لبناء قاعدة البيانات علينا النقر أولًا على زر New ثم ندخل اسم قاعدة البيانات drupal8 على سبيل المثال ثم ننقر على زر create وبذلك نكون قد أنشأنا قاعدة البيانات 10- نعود لصفحة إعداد دروبال التي في الخطوة رقم 7 وندخل اسم قاعدة البيانات التي أنشأناها سابقًا drupal8 واسم المستخدم root ونترك خانة كلمة المرور فارغة (لم نقم بوضع كلمة مرور على قاعدة البيانات عند بنائها) ثم نضغط على save and continue حيث سيبدأ بعملية تنصيب الموقع installing site التي قد تأخذ بعض الوقت 11- ستظهر لدينا لاحقًا صفحة إعدادات الموقع والتي تطلب اسم الموقع واسم المستخدم لإدارة الموقع وكلمة المرور 12- في النهاية ستظهر لدي صفحة إدارة موقع الانترنت وبالتالي أكون قد أنشأت موقعي الخاص والآن يمكنني من خلال دروبال إضافة الصفحات والمحتوى من خلال الصفحة الأخيرة. بناء موقع باستخدام دروبال تتميز دروبال بالقوة والسرعة والكفاءة في العمل بالإضافة إلى الواجهة الجذابة. ومن الأفضل للمستخدم أن يكون ملمًّا بلغة PHP ليتمكن من تخصيص الموقع وتصحيح الأخطاء رغم أنه أمر غير مطلوب عند بناء الموقع. سنبدأ ببناء الموقع الجديد خطوة بخطوة: أولًا: تغيير لغة الدروبال إلى العربية بعد بناء الموقع نلاحظ أن واجهته والقوائم فيه باللغة الإنجليزية ولتحويله إلى اللغة العربية نقوم بما يلي: 1- من شريط المهام في رأس الصفحة نختار extend ونقوم باختيار Modules الخاصة باللغة وهي language, interface translation, content translation, configuration translation وبعدها install 2- بعدها ننتقل من configuration إلى languages ونضغط على زر Add language ثم نختار اللغة العربية Arabic بعدها Add language لتبدأ عملية تحميل اللغة العربية إلى الموقع. 3- نختار اللغة العربية كـ default ونضغط save configuration ليتحوّل بعدها اتجاه الصفحة من اليمين إلى اليسار. 4- لتعريب الواجهة كاملة نذهب إلى موقع دروبال الرسمي الذي يقدم ملفات تحوي ترجمة لأغلب لغات العالم ونختار اللغة العربية نلاحظ أن المعلومات المتوفرة عن اللغة العربية هي أن عدد المساهمين 60 شخصًا وقد تم الانتهاء من 1.04% فقط من دروبال 5- نقوم بعدها بتحميل نسخة اللغة drupal 8.4.3 وهي النسخة المطابقة لنسخة النواة التي لدينا 6- نعود إلى صفحة موقعنا ونذهب إلى configuration ثم user interface translation ثم import بعدها نختار ملف اللغة العربية drupal-8.4.3.ar.po الذي قمنا بتحميله في الخطوة السابقة وفي النهاية نضغط import بعد الانتهاء من عملية استيراد الملف نلاحظ تغير واجهة الموقع بشكل كامل إلى اللغة العربية ثانيًا: اختيار القوالب يقدم دروبال العديد من القوالب حيث يمكنك اختيار إحداها. لإضافة قالب theme نقوم باختيار “المظهر” من القائمة الرئيسية فتظهر لدينا صفحة من القوالب الموجودة مسبقًا كما نلاحظ يوجد “الحلة الافتراضية” أي المظهر الحالي ولتغييره نقوم بالضغط على install new theme حيث ستظهر صفحة لإدخال رابط theme الذي نستطيع اختياره من الموقع الرسمي للدروبال والذي يقدم 2564 قالب مختلف كما يقدم لنا دروبال خاصية تحميل قالب خاص بنا. بعد اختيار القالب نقوم بفتح الصفحة الخاصة به وفي نهايتها سنجد downloads والتي تحتوي على نوعين من الملفات بالضغط على الزر اليميني على نوع الملف tar.gz ونختار copy link address ننسخ هذا العنوان إلى صفحة install new theme في دروبال ونختار تثبيت بعد ذلك نضغط على home ثم “المظهر” فتظهر لدينا قائمة بالقوالب الموجودة لدينا عندها يمكن اختيار أي منها لتكون theme الخاص بالموقع من خلال الضغط على set as defualt. من المهم عند اختيارك لتصميم شكل موقعك أن تراعي الأمور التالية: سهولة التعديل. أن يظهر التصميم بشكل جيد على جميع الأجهزة (حاسب، جهاز لوحي، موبايل). البساطة والتي تساعد الزائر على التنقل بسهولة بين كافة محتويات الموقع. ثالثًا: بناء صفحة ضمن الموقع سنقوم معًا ببناء صفحة “نبذة عنّا” وذلك من خلال اتباع الخطوات التالية 1- من الصفحة الرئيسية نختار "الأدوات -> إضافة محتوى" بعدها تظهر لنا صفحة فيها خيارين لشكل المحتوى الذي نريد إضافته إما Article أو Basic Page، نختار الخيار الثاني Basic Page. 2- تظهر لدينا صفحة "أنشئ Basic Page" نضيف عنوان للصفحة على سبيل المثال "نبذة عنّا" وضمن قسم المتن نضيف محتوى الصفحة. من أجل أن يظهر رابط الصفحة في القائمة الرئيسية يجب اختيار المربع "يوفّر رابط القائمة" من القائمة “إعدادات القائمة” ونضغط في أخيرًا على “حفظ” 3- لتغيير ترتيب عناصر القائمة الرئيسية نقوم باختيار "الهيكلية -> القوائم -> main navigation" ثم نختار تحرير القائمة ونقوم بترتيب العناصر الموجودة في رابط القائمة حيث يمكن أن نضع الرئيسية ونبذة عن على نفس المستوى أو نرتبها كقائمة داخل بعضها بالإضافة إلى تغيير الترتيب. وبهذه الخطوات البسيطة يمكننا إضافة محتوى للموقع الالكتروني والتحكم بطريقة عرضه وترتيبه. ميزات استخدام منصة دروبال تتجه العديد من الشركات والمنظمات لإنشاء مواقعها باستخدام دروبال وذلك بسبب الكثير من الميزات التي يقدمها ولعل أهمها: 1- الأداء الفعال والسريع: صفحات دروبال تتحمل أسرع ولديها استجابة أسرع من المواقع المصممة من خلال منصات أخرى وذلك لعدم احتوائه على الكثير من الموارد الكثيفة وبالتالي يحتاج إلى سيرفرات أقل كلفة. 2- عالي التكيّف: بمعنى أنه يمكنك تغيير شكل وتصميم موقعك الخاص حسب رؤيتك الخاصة حيث يقدم لك دروبال مجموعة واسعة من القوالب والإضافات التي تحوي على الكثير من الخيارات. 3- الأهم من ذلك كله أنه مجاني مدى الحياة حيث يمكنك تحميله وتنصيبه على سيرفر الاستضافة دون أي تكاليف. من أهم الشركات والمنظمات التي قامت باختيار دروبال لتصميم مواقعها عربيًا وعالميًا نذكر: من أهم الجامعات التي تستخدم دروبال لموقعها الرسمي جامعة هارفرد جامعة كولورادو جامعة أكسفورد بالإضافة إلى مواقع عالمية أخرى وكمثال سنذكر بعضها: موقع نادي إشبيلية الإسباني موقع أولمبياد ريو في البرازيل 2016 موقع شبكة NBC الموقع الرسمي لحكومة استراليا الموقع الرسمي لحكومة جنوب أفريقيا الموقع الرسمي لحكومة فرنسا صحيفة الموجز المصرية صحيفة لوفيجارو الفرنسية وغيرها العديد من المواقع…

يحتوي مشروع الملف الشخصي الخاص بنا على صفحة واحدة حتى الآن. من الواضح أنّ معظم مواقع الويب تمتلك أكثر من صفحة. سنُضيف في هذا الدرس صفحات إضافيّة. إنشاء صفحة جديدة سننشئ ثلاث صفحات جديدة، صفحة من أجل مدوّنة الموقع Blog، وصفحة من أجل المشاريع Projects وأخرى من أجل معلومات التواصل Contact. ستكون هذه الصفحات الرئيسيّة في الموقع. يجب أن نتذكّر دائمًا أنّه يمكن أن نضيف صفحات فرعيّة أخرى لاحقًا. فمثلًا سيكون هناك صفحة فرعيّة لكل تدوينة ضمن المدوّنة. لامتلاك بنية جيّدة ضمن الموقع من الأفضل إنشاء مجلّدات فرعيّة من أجل كلّ صفحة. سيكون لكل مجلّد فرعي ملف index.html خاص به يُعرَض افتراضيًّا عندما يفتح المتصفّح هذا المجلّد. يُعتبر إنشاء صفحة جديدة أمر سهلًا للغاية. من الأفضل نسخ ملف index.html الذي أنشأناه مسبقًا بحيث يكون لدينا البنية الأساسية جاهزة. بعد ذلك نُجري بالطبع بعض التعديلات المناسبة لكلّ صفحة جديدة. ملاحظة: يجب أن نتأكّد بأنّنا لا نستخدم أيّ رمز خاص أو فراغات عند تسمية أي مجلّد فرعي أو ملف. يجب أن نستخدم الأحرف القياسيّة ويُفضّل أن تكون بحالة صغيرة lower case، ومن الجيّد أيضًا فصل الكلمات عن بعضها باستخدام إشارة الناقص (-). صفحة المدونة أنشئ مجلّدًا فرعيًّا ضمن مجلّد portfolio وسمّه blog. انسخ الملف index.html إلى هذا المجلّد الفرعي الجديد. يجب الآن أن تبدو بنية الملفات لديك على الشكل التالي: افتح الملف المنسوخ blog/index.html في المتصفّح (إذا كنت تستخدم Brackets انقر زر Live Preview). ستلاحظ وجود أمرين لا يعملان بشكل صحيح: صور الصفحة لا تظهر. الألوان المعرّفة ضمن ملف css غير مُطبّقة في هذه الصفحة. يعود السبب في ذلك هو أنّنا ضمن مجلّد فرعي، فالمسار الخاص بملفات الصور لم يعد صحيحًا. لكي نسمح للصور بالظهور يجل أن نستخدم المسار marco.jpg/.. بدلًا من marco.jpg ضمن السمة src لعنصر الصورة img. ولكن من المؤكّد أنّنا لن نريد استخدام نفس الصور ضمن صفحة المدوّنة. لذلك يمكن إزالة العنصر img بشكل كامل. جرت العادة أن نعرّف قواعد css بحيث تكون شاملة لكل صفحات موقع الويب. وهكذا فإنّه من الضروري أن نشير إلى نفس ملف css الذي يحوي هذه القواعد وذلك ضمن ملف المدوّنة. يمكننا ذلك بتغيير عنوان URL من main.css إلى main.css/.. ضمن عنصر link. يوضّح السطر التالي شكل عنصر link بعد تعديل الملف blog/index.html: <link rel="stylesheet" href="../main.css"> سيؤدي تعديل عنوان ملف css ضمن عنصر link إلى تطبيق تنسيقات css الموجودة ضمن الملف main.css على صفحة المدوّنة. سنغيّر الآن عنوان ومحتوى صفحة المدوّنة. blog/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../main.css"> <title>Blog - Web Portfolio of Marco</title> </head> <body> <h1 class="title">Blog</h1> <p>I write about things I encounter while learning web programming.</p> <h2>Blog Entries</h2> <!-- Here will be a list of all the blog entries. --> </body> </html> يمكننا رؤية بعض الوسوم الجديدة في الشيفرة السابقة وهي <-- و --!> حيث يمكننا أن نكتب تعليق comment بين الرمزين السابقين. الهدف من التعليقات هو كتابة بعض الملاحظات التوضيحيّة لنا فقط، فهي لا تظهر لمستخدم الصفحة. التدوينة كصفحة فرعية تحتاج مدوّنتنا بالطبع إلى بعض المُدخلات (التدوينات). سننشئ صفحة HTML مستقلّة من أجل كل تدوينة. أنشئ مجلّدًا فرعيًّا ضمن المجلّد blog وسمّه first-entry ثمّ انسخ الملف blog/index.html إلى المجلّد الفرعي first-entry: افتح ملف التدوينة وغيّر محتوياته كما يلي: blog/first-entry/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../../main.css"> <title>First Entry - Web Portfolio of Marco</title> </head> <body> <h1 class="title">First Entry</h1> <p>April 7, 2015</p> <hr> <p>This is my very first blog entry.</p> </body> </html> لقد وضعت في الشيفرة السابقة عنصر HTML جديد وهو <hr> حاول أن تعرف وظيفته بمفردك، حاول مثلًا إزالته ومن ثمّ انظر إلى تأثير ذلك على الصفحة. أو يمكنك البحث عن معلومات عنه في الانترنت. لنبدأ بكتابة التدوينات أنصح دائمًا أن تبدأ فورًا بكتابة تدويناتك. يمكنك كتابة تدوينة قصيرة في كل مرّة تتعلّم شيئًا جديدًا حول البرمجة. يمكنك الاطلاع على بعض الأفكار التالية التي قد تساعدك في البدء بالتدوين: ماذا تعلّمت اليوم؟ أضف صور توضيحية. أضف روابط إلى مواقع مفيدة. ما هي المشاكل التي واجهتها؟ كيف حللت تلك المشاكل؟ ما العمل الذي يتوجّب عليّ إنجازه في المرّة القادمة؟ بمثل هذه التدوينات السابقة ستتقدّم سريعًا في احتراف البرمجة، وأسباب ذلك: ستكون ملّمًا بما تعلّمته بالتدريج. يمكنك أن تبحث عن المعلومات ضمن وثائقك الشخصيّة. ستتدرّب على HTML وCSS بينما تكتب هذه التدوينات. إذا نشرت موقعك على الانترنت يمكنك أن تجعل تدويناتك متاحة للآخرين. وهذا يساعد على مشاركة المعرفة التي اكتسبتها أو حتى أن تطلب من أحد الأشخاص أن يساعدك على حل مشكلة ما. إذا نشرت ملفّك الشخصي سيكون من الرائع مشاركته مع الآخرين للاطّلاع على إمكانيّاتك وأعمالك. التدوينة الثانية تلميح: أنشئ مجلّدًا فرعيًّا من أجل كل ملف تدوينة جديد. سيسمح لك هذا التنظيم بوضع الصور والملفات الأخرى لكل تدوينة بشكل منفصل عن ملفات التدوينات الأخرى. صفحة المشاريع من المفيد الاحتفاظ بصفحة خاصّة للمشاريع والمهام التي ننجزها. سنحضّر صفحة خاصّة لمثل هذه المشاريع على الرغم من عدم وجود أي محتوى بعد. لنكمل كما فعلنا من أجل صفحة المدوّنة ولننشئ مجلّدً فرعيً اسمه projects ضمن المجلّد الرئيسي portfolio ولننسخ الملف index.html إليه. projects/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../main.css"> <title>Projects - Web Portfolio of Marco</title> </head> <body> <h1 class="title">Projects</h1> <p>Here you will soon find my web projects.</p> </body> </html> صفحة التواصل سننشئ الآن الصفحة الأخيرة من الصفحات الرئيسيّة في الموقع وهي صفحة التواصل Contact. أنشئ مجلّدًا اسمه contact ضمن المجلّد الرئيسي portfolio وانسخ الصفحة index.html إليه. ملاحظة مهمّة: كُن حذرًا فيما يتعلّق بالمعلومات التي ترغب بنشرها للعموم. فمثلًا لا تنشر بريدك الإلكتروني الرئيسي، لأنّه من الممكن أن تستقبل بريدًا مزعجًا. contact/index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="../main.css"> <title>Contact - Web Portfolio of Marco</title> </head> <body> <h1 class="title">Contact</h1> <p> You can contact me by email: <a href="mailto:spammails@gmx.ch">spammails@gmx.ch</a> </p> <p> Marco Jakob<br> Switzerland </p> </body> </html> يمكننا أن نلاحظ وجود عنصر HTML جديد بجوار اسم Marco Jakob وهو العنصر <br>. يعمل هذا العنصر على الانتقال إلى سطر جديد ضمن الصفحة. نلاحظ أيضًا الرّابط الخاص mailto الذي يوجد على يسار البريد الإلكتروني (ضمن السمة href). سيعمل هذا الرّابط في حال نقره على فتح برنامج البريد الإلكتروني الافتراضي المثبّت على حاسوبك، مع فتح رسالة جديدة بعنوان البريد الإلكتروني المطلوب. لدينا الآن خمس صفحات HTML: سنزوّد موقعنا في الدرس السادس بوسيلة للتنقّل بين صفحاته. ترجمة -وبتصرّف- للمقال HTML & CSS Tutorial - Part 5: Blog and Other Pages لصاحبه Marco Jakob.

حسنًا، لقد تعرفتَ على ووردبريس حديثًا وأصبحتَ جاهزًا لنقل موقعك الساكن (static) القديم المبني باستخدام HTML فقط إلى نظام إدارة محتوى حديث ومتطور. لكن انتظر برهةً، كيف ستفعل ذلك دون أن تفقد موقعك القديم أثناء بنائك للموقع الجديد؟ وكيف تضمن أنَّ الزوار لن يكتشفوا موقعك الجديد ببحثهم في Google قبل أن تنتهي من ضبطه كاملًا؟ سأريك في هذا الدرس طريقةً حلّ هذه الإشكالية، وسننظر إلى كيفية العمل على الموقع الجديد خلف الستار، مبقيًا موقعك القديم مكانه كي يبقى متاحًا للزوار أثناء تطوير موقعك الجديد. الأمر أبسط بكثير مما تتخيل، لذا لنبدأ! ما الذي ستحتاج إليه لكي تُكمِل معنا في هذا الدرس، فستحتاج إلى: موقعٍ ساكن (static) موجود مسبقًا في نفس المكان الذي تريد وضع موقعك الجديد فيه. المقدرة على تثبيت ووردبريس على خادومك، إما يدويًا أو تلقائيًا عبر سكربت. وصول عبر FTP أو لوحة تحكم cPanel إلى الخادوم. إذا لم تكن متأكدًا من أحد البنود السابقة، فاسأل مزود الاستضافة، وأخبرهم أنَّك ستحتاج إلى تعديل ونقل بضعة ملفات، ويجب أن يعطوك طريقةً للوصول إلى تلك الملفات، وإن لم يعطوك ذلك فأنصحك بالبحث عن مزود استضافة آخر! أين يجب تطوير الموقع الجديد؟ إذا كنتَ مطوِّر ووردبريس خبير، فلا أظن أنَّه توجد مشكلة في نقل مواقع ووردبريس، إذ أنَّ من المرجح أنَّك ستطوِّر الموقع على حاسوبك المحلي أو على خادوم تخزين صغير خاص بك، ثم ستنقل الموقع النهائي إلى الخادوم الإنتاجي. أما لو كنتَ جديدًا على ووردبريس، فقد تَحسَبُ أنَّ المهمة شاقة، فكيف ستُثبِّت ووردبريس محليًا؟ ناهيك عن الرعب الناجم عن التفكير بطريقة نقل موقعك إلى الخادوم الإنتاجي بعد انتهاء العمل عليه! لا حاجة لكي تقلق من الأمور السابقة، إذ يمكنك تثبيت ووردبريس على خادومك الإنتاجي وتعمل عليها دون معرفة الزوار؛ وفي نفس الوقت يكون موقعك الثابت القديم في مكانه. وبعد أن ينتهي ضبط ونقل المحتوى إلى الموقع الجديد، فليس عليك نقل الملفات أو تصدير قاعدة البيانات، وإنما كل ما عليك فعله هو نسخ وتعديل ملف أو ملفين، وتغيير بعض إعدادات الضبط. يبدو أنَّ ذلك سهلٌ جدًا ويمكنك –حتى لو كنتَ مبتدئًا باستعمال ووردبريس– أن تفعله. رائع! الخطوة الأولى: تثبيت ووردبريس في مجلدٍ فرعي أوّل خطوة هي تثبيت ووردبريس، لكن بدلًا من تثبيتها في المجلد الجذر لموقعك، فعليك تثبيتها في مجلدٍ فرعي، فلو كان موقعك موجودًا على الرابط http://mysite.com فعليك تثبيتها في مجلد باسم http://mysite.com/wordpress. لكن دعني أحذرك بادئ الأمر أنني لا أثبت ووردبريس في مجلدٍ باسم wordpress، إذ عليك إعطاء المجلد اسمًا أكثر غموضًا وأصعب تخمينًا، لكي لا يعثر الزوار (أو المخترقون) عليها صدفةً. باختصار: يمكنك أن تسمِّ المجلد بأيِّ اسمٍ تشاء لطالما كان يختلف عن أسماء الملفات أو المجلدات الموجودة في الموقع القديم، وإلا فقد يصدف وأن يزور أحدهم تلك الصفحة في موقعك القديم مما يأخذهم إلى الموقع الجديد. لذا إذا كنتَ تريد تثبيت ووردبريس، فثبِّتها في مجلدٍ جديد. وإذا كنتَ تستعمل سكربتًا توفره شركة الاستضافة (مثل Softaculous أو Fantastico) فيمكنك تحديد ذلك أثناء التثبيت. أو إذا كنتَ تثبت ووردبريس يدويًا، فعليك وضع الملفات في مجلدٍ فرعي. ملاحظة: إذا كان موقعك الجديد سيُشِّكل شبكةً متعددة المواقع، فما يزال بإمكانك فعل ما سبق ذكره، لكنك لن تستطيع استخدام النطاقات الفرعية (subdomains) كبنيةٍ لشبكتك، فلن تستطيع استخدام سوى المجلدات الفرعية (subdirectories) فقط. الخطوة الثانية: إخفاء الموقع من المؤكد أنَّك لن ترغب أن يعثر الناس على موقعك الجديد أثناء إنشائه في محركات البحث، لذا ستحتاج إلى إخفائه. تُسهِّل ووردبريس من ذلك كثيرًا، فكل ما عليك فعله هو الذهاب إلى صفحة «Settings > Reading» (الإعدادات > قراءة) في لوحة التحكم التابعة للموقع الجديد، وستجد مربع اختيار لإخفاء موقعك عن محركات البحث: اختر حقل «Discourage search engines from indexing this site» (منع محركات البحث من أرشفة هذا الموقع) ثم اضغط على زر «Save Changes» (حفظ التغييرات)، وهذا سيُنشِئ ملف robots.txt في موقعك الذي سيطلب من محركات البحث ألّا تُفهِرس الموقع الجديد. لا تقلق بخصوص هذا الملف، ستعتني به ووردبريس وتتكفل بأمره. الخطوة الثالثة: إعداد موقعك الجديد هذا هو الجزء الذي يأتي فيه المرح! أمضِ بعض الوقت في موقعك الجديد، واختر قالبًا، وثبِّت الإضافات، وأنشِئ بعض المحتوى، وارفع الصور والوسائط الأخرى… الخطوة الرابعة: تحضّر لنقل الموقع الجديد ليصبح موقعك الرئيسي عندما يصبح موقعك الجديد جاهزًا، فحان الوقت لتحضير نقله ليصبح موقعك الرئيسي. ستحتاج إلى نسخ بضعة ملفات وتعديل أحدها، ثم تغيير بعض الإعدادات. لنشرح طريقة فعل ذلك خطوةً بخطوة. نسخ موقعك القديم احتياطيًا ثم حذفه خذ أولًا نسخةً احتياطيةً من ملفات موقعك القديم بنسخها إلى جهازك المحلي، وذلك عبر عميل FTP أو عبر خاصية إدارة الملفات File Manager في لوحة cPanel. بعد تحميل كامل ملفات موقعك القديم، فاحذفها. نسخ وتعديل ملفين باستخدام FTP أو File Manager، انسخ (ولا تنقل) ملفين من المجلد الفرعي الذي ثبتت فيه ووردبريس إلى المجلد الجذر (أي مجلد public_html): index.php ‎htaccess إذا لم تكن قادرًا على رؤية ملف ‎.htaccess فعليك تفعيل إظهار الملفات المخفية في cPanel أو في عميل FTP. يمكنك فعل ذلك في cPanel عبر العودة إلى الصفحة الرئيسية والضغط على File Manager ثم تفعيل الخيار «Show Hidden Files». أما عملاء FTP فكلٌ له طريقته لإظهار الملفات المخفية، لذا انظر في توثيق البرنامج. افتح الآن الملف index.php الموجود في المجلد الجذر لموقعك (والذي أُنشِئ عندما نسخته من المجلد الفرعي) وابحث عن هذا السطر: require('./wp-blog-header.php') وعدِّله ليصبح كما يلي: require('./subdirectory/wp-blog-header.php') ضع اسم المجلد الفرعي الذي ثبتت فيه ووردبريس بدلًا من subdirectory في الشيفرة السابقة. فلو ثبتتُ ووردبريس في http://rachelmccollin.co.uk/new-site/‎ فستبدو الشيفرة كما يلي: require('./new-site/wp-blog-header.php') احفظ الملف الآن واخرج منه. الخطوة الخامسة: تعديل ضبط الموقع اذهب إلى صفحة «Settings > General» (الإعدادات > عام) في لوحة التحكم، وأضبط عنوان موقعك الجديد، واسمح لمحركات البحث بفهرسة موقعك. تعديل رابط URL للموقع اذهب إلى صفحة «Settings > General» (الإعدادات > عام) في لوحة التحكم، وسترى حقلين يمكنك إدخال رابط URL فيهما، واحدٌ لرابط ووردبريس، والآخر لرابط الموقع. يُشير رابط ووردبريس إلى مكان تثبيت ووردبريس، بينما يجب أن يُشير رابط الموقع إلى الرابط الذي سيعثر الناس على موقعك فيه. هذا هو الضبط الخاص بي قبل التعديل: عدِّل حقل «Site Address» (عنوان الموقع) واحذف المسار الذي يُشير إلى المجلد الفرعي، فبدلًا من أن يكون http://rachelmccollin.co.uk/new-site يجب أن يصبح http://rachelmccollin.co.uk. احفظ تعديلاتك بالضغط على زر «Save Changes» (حفظ التغييرات). السماح لمحركات البحث بالوصول إلى موقعك هل تذكر عندما كنتَ تضبط موقعك الجديد أنَّك أخفيته عن محركات البحث؟ يجب ألّا تغفل عن التراجع عن هذه الخطوة. اذهب إلى صفحة «Settings > Reading» (الإعدادات > قراءة) وألغِ تفعيل الخيار «Discourage search engines from indexing this site box» (منع محركات البحث من أرشفة هذا الموقع) ثم اضغط على زر «Save Changes» (حفظ التغييرات). يجب أن تكون محركات البحث قادرةً على فهرسة موقعك الآن. ملاحظة: لتسريع هذه العملية، فأنصحك بتسجيل موقعك في أدوات «Google webmaster tools» وتخبر Google عن موقعك. وسترى أيضًا تواتر فهرسة Google لموقعك ويمكنك أن تختار إخفاء أجزاءٍ منه. مشاكل؟ أحيانًا بعد فعلك لمثل هذه العمليات فقد تحاول زيارة الموقع ولا تجده يعمل، فقد تتم إعادة توجيهك عدِّة مرات، أو ربما تحصل على رسالة خطأ 404. إذا حدث ذلك، فاحذف الملفات المؤقتة في متصفحك؛ فلربما كان يتذكر متصفحك موقعك القديم ويُظهِر رسالة الخطأ. بعدا أن تفعل ذلك فيجب أن يعمل الموقع عملًا سليمًا. ويمكنك أيضًا أن تجرِّب متصفحًا أو جهازًا آخر. الخلاصة ربما افترضتَ أنَّ عليك حذف موقعك الثابت في أثناء إنشائك وإعدادك لموقع ووربريس، لكن ذلك ليس صحيحًا؛ ولو اتبعتَ ما ذكرناه في هذا الدرس فستتمكن من الإبقاء على موقعك القديم أثناء تطويرك للجديد في الخفاء، والذي لن يظهر للزوار أو لمحركات البحث إلا بعد أن يجهز تمامًا. ترجمة -وبتصرّف- للمقال How to Keep Your Static Site Running While Building a New WordPress Site لصاحبته Rachel McCollin.

إن بعض مواقع الإنترنت تُصمّم برسوميات بسيطة مسطّحة والبعض الآخر تكون مصمّمة برسوميات أنيقة عالية الدقة وغير مسطّحة، فأحيانًا تكون الواجهات بسيطة وتفي بالغرض وأحيانًا تكون ذات رسوميات عالية الجودة والأناقة وهو ما يجعل الموقع أجمل وأكثر متعة في التصفح والمتابعة، لذلك سنتعلّم في هذا الدرس كيفية تصميم بنرات لاختيار الخطط لأحد مواقع الاستضافة على سبيل المثال. سيتضمّن هذا الدرس شرحًا لمجموعة من الأدوات والمزايا المهمة والمميزة والتي ستصقل مهاراتكم كمصممين مبدعين. يمكنكم طبعًا تعديل النصوص بما يتناسب مع موقعكم أو مع حاجة العميل كما يمكنكم التعديل على الألوان والأحجام وعدد المقاطع وغيرها… وسنتعلّم كيفية إنشاء هذه الأشكال بدون اللجوء إلى أداة القلم لمن لم يتمكّن من هذه الأداة بعد، بحيث أننا لن نستخدم هذه الأداة في هذا الدرس، وسنقوم بإنشاء انعكاسات الإضاءة على حواف البنرات بشكل يدوي، وسنتعلّم كيفية إنشاء فرشاة جديدة واستخدامها وكذلك كيفية استخدام خصائص المزج والتلوين بالألوان والتدرجات اللونية وإنشاء نصوص ثلاثية الأبعاد والكثير من التقنيات في الرسم. افتح برنامج أدوبي إليستريتور ثم أنشئ مستندًا جديدًا بحجم 650×650 بكسل وبما أننا نصمم للويب فيجب أن يكون نظام الألوان هو RGB. سنقوم الآن بصنع الخلفية عبر إنشاء مربع بحجم المستند نفسه. اختر أداة المستطيلات Rectangle Tool ثم انقر نقرًا مزدوجًا على لوح الرسم لتفتح نافذة إنشاء المستطيلات، أدخل القيم 650×650 ثم ضع هذا المربع ليملأ لوح الرسم بالكامل. يمكنك الاستعانة بالأدلّة الذكية للقيام بوضع المربع في مكانه بسهولة، حيث ستساعدك على القيام بذلك وتعمل هذه الميزة من خلال الاختصار Ctrl+U. لوّن هذا المربع بتدرج لوني دائري من الأزرق (R:19 – G:94 – B:169) إلى الأزرق الفاتح (R:104 – G:201 – B:134) مع جعل موقع الفاصلة المتوسطة عند 37% تقريبًا لجهة الأزرق الفاتح. استخدم أداة التدرج اللوني Gradient Tool من خلال الاختصار M لرسم اتجاه وموقع مركز التدرج اللوني كما في الصورة التالية. افتح لوحة الطبقات من خلال الاختصار F7 ثم اقفل طبقة الخلفية حتى لا تتأثر بالأعمال التالية، وأنشئ طبقة جديدة لنقوم بالعمل عليها. ارسم مستطيلًا باستخدام أداة رسم المستطيلات بحجم 550×100 وضعه في وسط أعلى لوح الرسم. أزِل الحدود وأبقِ على اللون الأبيض للتعبئة مؤقّتًا. سنقوم بجعل الزاوية السفلى اليسرى من المستطيل منحنية بدون استخدام أداة القلم لرسم هذا الشكل، ولكن باستخدام أحد التأثيرات. لنتمكّن من ذلك سنقوم بقص المستطيل إلى نصفين، استخدم أداة المقص Scissors Tool لقص المستطيل من النقطة العليا إلى السفلى الموضحة في الصورة. والآن حدّد المسار النصفي الأيسر واذهب إلى القائمة Effect > Stylize > Round Corners ثم أدخل القيمة 60px واضغط OK. حدّد كلا الشكلين واذهب إلى القائمة Object > Expand Appearance حدّد كلا الشكلين مجدّدًا ثم اختر الخيار Unite من لوحة Pathfinder لتوحيد الشكلين في شكل واحد. لوّن الشكل الجديد بتدرّج لوني دائري من الأسود إلى الأبيض مع وضع اللون الأسود في الموقع 40% تقريبًا وذلك ليطغى اللون الأسود أكثر على التدرج. ثم ضع خيار Aspect Ratio على القيمة 30% ليتم ضغط التدرج شاقوليًّا واستخدم أداة التدرج اللوني لرسم اتجاه وحجم التدرج كما في الصور التالية. افتح لوحة الشفافية Transparency من خلال الاختصار Shift+Ctrl+F10 ثم اختر الخيار Color Dodge من خصائص المزج. سنقوم الآن برسم انعكاس زجاجي على كامل مساحة البنر. ارسم مستطيلًا بنفس حجم المستطيل الأساسي ثم ضعه فوق البنر تمامًا. ارسم شكلًا بيضويًا يغطّي جزءًا كبيرًا من المستطيل ثم دوّره بزاوية مائلة قليلًا كما في الصورة وضعه فوق النصف السفلي من المستطيل. حدّد كلا هذين الشكلين ثم اختر الخيار Minus Front من لوحة Pathfinder ليتم قص الشكل البيضوي من شكل المستطيل. استخدم أداة التدرج اللوني بنفس الطريقة كما في الصورة لجعل اللون الأسود في التدرج اللوني طاغيًا على الشكل. ثم اذهب مجدّدًا إلى لوحة الشفافية وطبّق خصائص المزج Color Dodge على الشكل الأخير. سنلاحظ بأنه هناك جزء صغير زائد عند الزاوية المنحنية في الجهة السفلية اليسرى من الشكل الأساسي لذلك سنقوم بقصّه من الشكل الجديد وذلك عبر مضاعفة الشكل الأساسي الموجود في الأسفل ثم نحدّد الشكل المضاعف مع الشكل الجديد ونختار الخيار Intersect من لوحة Pathfinder لنحصل على الشكل المطلوب. هذا هو الشكل الذي حصلنا عليه حتى هذه اللحظة، وهو ما يمثّل البنر الذي سنستخدمه لاحقًا، سنضيف عليه في الخطوات اللاحقة الإضاءات والانعكاسات التي ستضفي عليه المزيد من الحيوية والأناقة والشعور بشفافية المادة الزجاجية ولمعانها وألقها. ارسم دائرة صغيرة أسفل منتصف البنر باستخدام أداة رسم الأشكال البيضوية مع استعمال مفتاح Shift أثناء الرسم للمحافظة على تساوي الأبعاد والحصول على دائرة مثالية. لوّنها بتدرج لوني دائري من الأسود إلى الأبيض. غيّر خصائص المزج من لوحة الشفافية إلى Color Dodge. استخدم أداة التحديد Selection Tool لشد وسحب أطراف الدائرة وجعلها بعرض البنر تقريبًا وبارتفاع ضئيل للحصول على انعكاس إضاءة سفلي مع وضع هذا الانعكاس على حافة البنر السفلية. ضاعف هذا الشكل واسحبه إلى الحافة العلوية واجعل ارتفاعه أكبر بقليل لنحصل على الإيحاء بأن مصدر الإضاءة المسلطة على البنر الزجاجي من الأعلى. انسخ هذا الشكل وعدّل بزاويته وحجمه وضعه عند الحافة اليمنى من البنر واجعله أكثر رقة. سنقوم بتشكيل الانعكاس على الحافة المنحنية. وللقيام بذلك سنقوم بإنشاء فرشاة جديدة تمثّل الانعكاس. ارسم دائرة صغيرة جدًّا سوداء ومن ثم ارسم دائرة بحجم نقطة تقريبًا بيضاء في مركز الدائرة السوداء، حدّد الدائرتين معًا واذهب إلى القائمة Object > Bend > Make ثم اذهب إلى القائمة Object > Bend > Bend Options واختر الخيار Specified Steps وأدخل القيمة 50 ثم اضغط OK. لاحظ حجم الدائرة الجديدة بالنسبة لحجم البنر الكلي. مجدّدًا اجعل خصائص مزج هذه الدائرة Color Dodge. افتح لوحة الفراشي Brushes ثم اسحب شكل الدائرة إلى داخل قائمة الفراشي لتتم إضافتها إلى هذه القائمة. اختر Art Brush من القائمة. اترك الإعدادات كما هي واضغط OK. وهنا تظهر الفرشاة الجديدة ضمن لوحة الفراشي. والآن استخدم أداة رسم القوس Arc Tool وارسم قوسًا عند تلك الحافة المنحنية وعدّل بمقابض البيزير حتى يتوازى القوس مع الحافة. طبّق الفرشاة الجديدة على شكل القوس وخفّف حجم الحدود Stroke إلى 0.25pt. وبهذا يكون شكل البنر الزجاجي قد أصبح مكتملًا وجاهزًا للاستخدام. حدّد جميع الأشكال التي يتألف منها البنر ثم انقر بالزر الأيمن فوقها واجمعها في مجموعة واحدة عبر الخيار Group وذلك ليسهل علينا التعامل معها كشكل واحد أثناء نسخها وتحريكها فيما بعد. اسحب نسخة عن البنر نحو الأسفل بالاستعانة بالأدلة الذكية للمحافظة على ثبات المحور العمودي مع الضغط على مفتاح Alt أثناء السحب باستخدام أداة التحديد Selection Tool. اضغط على الاختصار Ctrl+D للحصول على نسختين إضافيتين بنفس المسافة بين البنرات ويصبح لدينا أربعة بنرات. حدّد جميع البنرات ثم اذهب إلى القائمة Object > Expand Appearance سنقوم الآن بكتابة المحتوى المطلوب بداخل البنرات، وبما أننا نتحدّث عن موقع للاستضافة فسيكون المحتوى عبارة عن خطط الاستضافة التي يوفرها الموقع لذلك سنضع أرقامًا لهذه الخطط وشرحًا بسيطًا عن الخدمات المُتضمنّة في كل خطة. استخدم أداة النص واكتب الأرقام من واحد إلى أربعة على يمين كل بنر وكبّر حجم الخط لنحو 107 واستخدم خطًّا عريضًا كخط Simplified Arabic. سنحوّل هذه الأرقام إلى أشكال ليسهل التعامل معها. حدّد الأرقام ثم اذهب إلى القائمة Type > Create Outlines أو اضغط على الاختصار Shift+Ctrl+O. انسخ Ctrl+C وألصق في المقدمة Ctrl+F هذه الأرقام وغيّر لونها مؤقتًا إلى الأصفر مثلًا لتمييزها. سنحوّل الأرقام الجديدة إلى مسارات مركّبة عبر تحديدها والذهاب إلى القائمة Object > Compound Path > Make أو عبر الاختصار Ctrl+8. تأكّد من تحديد المسارات المركبة ثم استخدم مفاتيح الأسهم لتحريكها نحو الأعلى واليمين قليلًا. حدّد المسارات المركبة مع شكل الأرقام الصفراء ثم اختر الخيار Minus Front من لوحة Pathfinder. لقد تمّ قص الأرقام الصفراء وبقي منها ما يشبه الحواف للأرقام الأصلية السوداء وهذا ما يمنحها الشعور بأنها ثلاثية الأبعاد. لوّن هذه الأرقام السوداء بلون رمادي متوسط ثم غيّر خصائص المزج إلى Multiply. حدّد أشكال الحواف الصفراء ولوّنها بتدرج لوني من الأبيض إلى الأسود مع جعل زاوية التدرج عند 135 درجة ضمن لوحة التدرجات اللونية. وبذلك نحصل على أرقام ثلاثية الأبعاد على يمين البنرات. قم بتغيير خصائص مزج شكل الحواف إلى Color Dodge لتتناسق الألوان مع بقية التصميم وتظهر الأرقام وكأنها زجاجية أيضًا. املأ البنرات بالمحتوى المناسب باستخدام أداة النص أو عبر برمجة الصفحة ذاتها، الخيار متروك لك لتقوم بالمناسب.

في الدرس السابق قمنا باستخدام برنامج فوتوشوب لتصميم واجهة موقع لغابة افتراضية باسم "Pinewood Forest". أمّا في هذا الدرس فسوف نقوم بتكويد ذلك التصميم باستخدام لغتي HTML وCSS وتحويله إلى صفحة ويب كاملة. كما سنقوم أيضًا باستخراج الصور الموجودة في التصميم لاستعمالها في الموقع. في حال أنك لم تقرأ الدرس السابق، أنظر إلى الصورة في الأعلى لترى التصميم الذي سوف نقوم بتكويده. يحتوي الموقع على صورة خلفية كبيرة وثابتة لتسمح لمحتوى الموقع بالتمرير(scroll) فوقها، والمحتوى نفسه مجزأ إلى عدة أجزاء، وتم استخدام مجموعة من الصور لجذب انتباه الزائر. استخراج الصور الموجودة في التصميم ستكون الخطوة الأولى قبل البدء بتكويد التصميم هي استخراج الصور من التصميم. بعض أجزاء التصميم يمكن عملها باستخدام CSS فقط ولكن أجزاء أخرى من التصميم سنحتاج فيها إلى الصور. يحتوي الجزء الرئيسي للموقع على صورة خلفية كبيرة، وسوف نحتاج إلى ضغط هذه الصورة لتقليل حجمها الكبير وذلك عن طريق اللجوء إلى خيار Save for web. كما قلنا سابقًا، سيحتوي الموقع على خلفية ثابتة وسوف يظهر المحتوى فوق هذه الصورة، وبالتالي فإن العناصر مثل الشّعار سنحتاج إلى استخراجها بصيغة PNG-24 لأن هذه الصيغة تدعم الشفافية (transparency). ستكون خلفية المحتوى الرئيسي للموقع ذات طابع شفاف أيضًا وبالتالي سوف نحتاج إلى استخراجها بصيغة PNG، وهذه الخلفية سيتم تقسمها إلى ثلاثة أقسام؛ قسم علوي وقسم سفلي وقسم مكرر في المنتصف. المجموعة النهائية للصور سوف تحتوي على صور بصيغة PNG وأخرى بصيغة JPEG. بعض الصور ستكون بحجم صغير، وهذه الصور سيتم تكريرها (باستخدام CSS) لإنشاء خلفيات مزخرفة، أمّا الصور الأخرى فسوف تكون صورًا بديلة عن النصوص لاستخدامها كعناوين. بنية ملف HTML <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Visit Pinewood Forest</title> <link href="styles.css" rel="stylesheet" /> </head> <body> <div id="container"> </div> </body> </html> سيحتوي الملف الرئيسي (index file) على أكواد HTML. يُستخدم <doctype html!> لتعريف المتصفح بإصدار HTML المُستخدم ويعتبر أيضًا من الممارسات الجيدة في عالم تصميم الويب، لذلك احرص على أن يكون موجودًا في كل موقع تقوم بتصميمه. يتبع ذلك وسم <head> ويحتوي هذا الوسم على عنوان الصفحة وعلى رابط لملف CSS. وأخيرًا يوجد وسم <div> وسيحتوي هذا الوسم على بقية عناصر/وسوم الصفحة. <body> <div id="container"> <div id="header"> <p id="logo"> <a href="#" title="Return to the homepage"> <img src="images/pinewood-forest-logo.png" alt="Pinewood Forest logo" /> </a> </p> <ul> <li><a href="#">Visit</a></li> <li><a href="#">Discover</a></li> <li><a href="#">Trails</a></li> <li><a href="#">Maps</a></li> </ul> </div> </div> </body> </html> يبدأ التصميم بوسم div مع إعطائه id بقيمة "header" وسيحتوي هذا الوسم على الشّعار وعلى عناصر القائمة الرئيسية (navigation items)، وسيكون الشعار عبارة عن صورة داخل وسم <img> موضوعة في وسم <a>. تُستخدم title الموجودة في وسم <a> لتعريف المستخدم بالوجهة التي سيصل إليها حال نقره على الرابط، أمّا alt في وسم <img> فإنها تُستخدم لإعطاء المستخدم وصفًا عن الصورة في حالة عدم ظهور الصورة. يُعتبر وسم <ul> هو الوسم الشائع عند عمل القوائم الرئيسية لأنّه يُصوّر لنا وبدقة تلك القائمة على هيئة HTML حتى لو لم يكن هناك تنسيقات CSS. وبالرجوع إلى التصميم يمكنك ملاحظة أن الشعار موجود في الوسط بين قوائم العناصر الرئيسية، ولكننا سنبقي كلا العنصرين (الشعار والقائمة الرئيسية) مفصولين عن بعضهما حتى نحصل على هئية وملف HTML نظيف ومُرتّب، وسنلجأ لاحقًا إلى استخدام CSS لتحريك تلك العناصر حتى نحصل على نتيجة مرضية ومطابقة للتصميم. <div id="content"> <div id="feature"> <div id="feature-content"> <h1>Explore the forest</h1> <p>Find everything you need to explore and discover the mysteries of the forest, from maps and trail guides to must see attractions</p> <p class="btn"><a href="#">Begin your journey</a></p> </div> </div> </div> بعد الترويسة (header) تأتي منطقة المحتوى الرئيسي (main content)، ولجعل هيكل ملف HTML نظيفًا فسوف يتم وضع جميع العناصر في وسم <div> واحد، كما وستظهر منطقة الـfeature في بداية الصفحة وداخل وسم <div> ليتم تموضعها بشكل دقيق ومناسب. أمّا بالنسبة للعنوان الرئيسي في الصفحة (الذي يحتوي على النص "Explore the forest") فسوف يتم وضعه داخل وسم <h1>. لاحظ أيضًا أنه تم إضافة "class="btn إلى العنصر <p> ليمكننا تحويل هذا العنصر إلى زر باستخدام CSS. المستوى الثاني من العناوين سيكون موجودًا داخل وسم <h2>، وسيكون المحتوى الرئيسي منقسمًا إلى عمودين، بحيث يكون العمود الأكبر عبارة عن div مع id بقيمة "main" وبداخل هذا العمود توجد النصوص (عناصر <p>). لا تنسى تحويل الروابط إلى عناصر <a> وأي رموز خاصة (characters) إلى ما يقابلها من HTML entities (مثل رمز "&" يتم تحويله إلى "&"). وفي الأسفل من نفس العمود يوجد قسم "upcoming events"، ويمكننا استخدام عناصر <dl> ،<dt> و<dd> (اختصار للكلمات "Definition List"، "Definition Term" و"Definition Description" على التوالي) بحيث تحتوي عناصر dt على تاريخ الحدث وعناصر <dd> على وصف بسيط للحدث. لاحظ أننا استعملنا وسوم <span> داخل عناصر <dt> وذلك لإعطائها تنسيقات مميزة باستخدام CSS. <div id="side"> <div class="aside"> <a href="#"><img src="images/tracks-and-trails.jpg" alt="Tracks and Trails" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/mountain-biking.jpg" alt="Mountain Biking" /></a> <p>Pinewood Forest is home to some of the most demanding XC and Freeride Mountain Biking routes<a href="#">Find out more</a></p> </div> <div class="aside"> <a href="#"><img src="images/christmas-events.jpg" alt="Christmas Events" /></a> <p>Pinewood Forest has a vast selection of walking and hiking trails to suit every visitor<a href="#">Find out more</a></p> </div> </div> </div> <div id="footer"> <p id="back-to-top"><a href="#">Back to top</a></p> </div> </div> بالنسبة للعمود الأصغر فسوف يكون موجودًا داخل عنصر div آخر مع id بقيمة "side". تتكون القائمة الجانبية (sidebar) من ثلاثة أقسام رئيسية وكل قسم يحتوي عنوان على شكل صورة وعلى وصف بسيط لكل قسم، ولأن كل صورة تحتوي على نص بداخلها فقد قمنا باستخدام alt لكل صورة حتى نحافظ على ما يسمى بالـaccessibility. وفي نهائية الصفحة قمنا بإغلاق وسم <div> الخاص بالمحتوى وتحتها يوجد div خاص بالـfooter وبادخله نص "Back to top" ليأخذنا إلى أعلى الصفحة عند الضغط عليه. انتهينا إلى الآن من هيكلة ملف HTML ويمكنك إلقاء نظرة إلى الصورة في الأعلى لترى كيف يجب أن يظهر بدون CSS. لاحظ أنه يمكن قراءة الملف حتى بدون تنسيق الملف باستخدام CSS. تنسيق الصفحة باستخدام CSS body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { font: 14px/26px Georgia, Serif; color: #444a54; background: #2d3237 url(images/bg-photo.jpg) center top no-repeat fixed; } #container { width: 960px; margin: 50px auto; } لنبدأ الآن بتنسيق الموقع باستخدام CSS. يُستخدم السطر الأول من أجل إزالة أي تنسيقات افتراضية للمتصفحات (يسمى هذا "CSS reset")، وبعد ذلك يوجد داخل المحدد body الخصائص العامة للخطوط في الموقع وصورة خلفية، ولأننا نريد هذه الصورة أن تكون ثابتة لا تتحرك مع باقي الصفحة عند التمرير(scrolling) فقد قمنا بإعطائها القيم "fixed" ،"top" و"center". وقد قمنا بإضافة لون أزرق (2d3237) حتى تظهر الخلفية بشكل أفضل لمن لا يمكنه رؤية الصورة لسبب أو لآخر وكذلك لمن يمتلك شاشات بدقة وأبعاد ضخمة. أمّا بالنسبة للحاوي الرئيسي (main container) فقد تم إعطاؤه عرض ثابت بقيمة 960px وتم توسيطه باستخدام الطريقة الشائعة margin: 0 auto. header { background: url(images/content-top.jpg) center bottom no-repeat; overflow: hidden; } header p#logo { position: relative; width: 295px; margin: 0 auto -74px auto; } header ul { width: 916px; margin: 0 auto 110px auto; overflow: hidden; list-style: none; } header li { float: left; } header li:nth-child(1) { margin: 0 70px 0 0; } header li:nth-child(2) { margin: 0 325px 0 0; } header li:nth-child(3), header li:nth-child(4) { margin: 0 0 0 70px; } header li a { font-size: 16px; letter-spacing: 9px; color: #4e5761; text-decoration: none; } header li a:hover { color: #7c8896; } يمكنك ملاحظة أنه تم إضافة صورة كخلفية للقسم العلوي من جزء المحتوى إلى الأسفل من الترويسة. ولموضعة الشعار وعناصر القائمة الرئيسية كما هو موجود في التصميم، فقد استخدمنا الخاصية margin بقيم سالبة. ولأن عناصر القائمة موجودة في كلا الجانبين من الشعار فقد تم استخدام nth-child لتحديد كل عنصر من العناصر الأربعة وإعطائه قيمة margin مناسبة، وعن طريق استخدام letter-spacing استطعنا تنفيذ التباعد بين الحروف(tracking) الموجود في التصميم. content { padding: 0 52px; overflow: hidden; background: url(images/content-repeat.png) center top repeat-y; } content #feature { width: 916px; height: 420px; position: relative; margin: 0 0 30px -30px; background: url(images/feature-bg.jpg); } content #feature #feature-content { position: relative; width: 384px; top: 92px; left: 460px; } content #feature #feature-content h1 { widht: 384px; height: 91px; margin: 0 0 5px 0; background: url(images/explore-the-forest.png); text-indent: -9999px; } content #feature #feature-content p { color: #fff; margin: 0 0 15px 8px; } content #feature #feature-content p.btn a { display: block; widows: 163px; height: 39px; background: url(images/begin-your-journey.png); text-indent: -9999px; } content #feature #feature-content p.btn a:hover { margin: -1px 0 0 0; } بما أنّ ارتفاع div الخاص بالمحتوى سيختلف من صفحة لأخرى، فقد قمنا باستخدام صورة ليتم تكريرها حتى نسمح لجزء المحتوى أن يتمدد بدون قيود، واستخدمنا padding على اليمين واليسار حتى نُبعد محتوى الصفحة عن الحواف. ولأنّ منطقة المحتوى ستحتوي على عمودين وكل منهما يحتوي على الخاصية float، فسوف نحتاج إلى استخدام overflow: hidden حتى يظهر كل شيء بشكل جيد. إعطاء قسم الـfeature الخاصية position: relative سيسمح للمحتوى بالتحرك في مكانه، كما أنّ القيمة السالبة للخاصية margin ستعوّض عن قيمة padding التي تم إعطاؤها لـdiv المحتوى وذلك لنسمح لذلك القسم بالتمدد إلى أقصى أطراف الصفحة. كما أنه تمّ استخدام صورة في وسم h1، ولكن تم تنسيق الفقرة باستخدام خصائص font في CSS. وبالنسبة للزر، فقد تم استخدام صورة وإعطائه بعض التنسيقات حتى يظهر بشكل جيد. content #main { width: 536px; float: left; margin: 0 20px 0 0; } content h2 { font-size: 20px; font-weight: normal; margin: 0 0 20px 0; } content p { margin: 0 0 20px 0; } content a { color: #3f6489; } content a:hover { color: #0d3965; } content dl { } content dt { float: left; width: 40px; height: 50px; margin: 0 15px 0 0; background: #a1a3a5 url(images/date-bg.png); font-size: 30px; color: #fff; text-align: center; } content dt span { display: block; font-size: 12px; font-weight: bold; text-transform: uppercase; } content dd { float: left; width: 480px; } content dd h3 { float: left; font-size: 20px; font-weight: normal; } content dd span { float: left; margin: 4px 0 0 10px; visibility: hidden; } content dd p { clear: left; } content dd:hover span { visibility: visible; } سيكون الـdiv الرئيسي هو الأعرض بين العمودين؛ بعرض 536px. وسيكون العرض لكل من main وside بالإضافة إلى الـmargin بينهما هو العرض الخاص بـdiv الأب منقوصًا منه قيمة padding اليسار واليمين. تم تحويل عناصر dt إلى أيقونة التاريخ عن طريق إعطائها عرض وطول ولون خلفية رمادي. وباستخدام تنسيقات font مناسبة أمكننا جعل نص التاريخ كبيرًا وبلون أبيض، كما أنّه تم جعل الخط الخاص بالعنصر span أصغر بقليل حتى يظهر الشهر أسفل رقم اليوم بشكل جميل. وحتى تظهر عناصر dt وdd بجانب بعضها فقد تم إعطاؤها الخاصية float: left. لاحظ أننا استخدمنا visibility: hidden على العنصر span وذلك حتى نخفيه عن أنظار الزائر إلى أن يضع مؤشر الفأرة فوق عنصر dd لنقوم عندها بإظهار رابط "View more info". content #side { width: 300px; float: left; } content .aside { padding: 17px 0 0 17px; margin: 0 0 30px 0; background: url(images/aside-bg.png) center top no-repeat; } content .aside img { margin: 0 0 15px 0; } footer { padding: 70px 22px; background: url(images/content-bottom.png) center top no-repeat; } footer p#back-to-top { float: right; font-size: 11px; } footer p#back-to-top a { color: #fff; text-decoration: none; } footer p#back-to-top a:hover { color: #d7d9d8; } كل عنصر aside. تم إعطاؤه خلفية مزخرفة، وبالنسبة للخطوط فإنها ستأخد التنسيقات الخاصة بـ div المحتوى بسبب ما يسمى بالتوريث (inheritance). أمّا بالنسبة لرابط "back to top" فسوف نضطر إلى إعطائه تنسيقات جديدة لأنه موجود خارج div المحتوى، ولأنّ هذا الرابط موجود ضمن خلفية داكنة وخارج المحتوى الرئيسي فإننا سنحتاج لتعديل الألوان وجعلها مختلفة عن البقية الموجودة في باقي الصفحة. بقي شيء واحد قبل أن ننتهي من هذا الدرس وهو أنّه يجب عليك أن تعرف أن خاصية nth-child غير مدعومة في بعض إصدارات متصفح Internet Explorer، لذلك إذا أردت أن تدعم تلك المتصفحات فيجب عليك استخدام jQuery: $(document).ready(fucntion() { $("#header ul li:nth-child(1)").css("margin-right", "70px"); $("#header ul li:nth-child(2)").css("margin-right", "325px"); $("#header ul li:nth-child(3)").css("margin-left", "70px"); $("#header ul li:nth-child(4)").css("margin-left", "70px"); }); إلى هنا نكون قد أنهينا درسنا وحصلنا على صفحة كاملة وجاهزة. يمكنك أيضًا تصفح الموقع بشكله النهائي إذا أحببت ذلك. أو تصفح الملفات المصدرية. ترجمة -وبتصرف- للمقال: Design a Textured Outdoors Website in Photoshop لصاحبه: Iggy.

يعد ووردبريس من أحد أكثر نظم إدارة المحتوى (CMS) قوة. فهو يتميز بإمكانية تعديله وتطوعيه حسب رغبتك. كما يمنحك القدرة على إضافة الميّزات والتعديل على التصاميم وكذلك إضافة قسم للمواضيع المميزة في غضون دقائق معدودة. بإمكانك مشاهدة العديد من الخصائص الموجودة في قائمة الودجات Widgets مثل التصنيفات، آخر المواضيع والأرشيف. ولكن ماذا لو أردّت أن تسلط الضوء على بعض المقالات المميزة ليشاهدها القراء على موقعك. تسمّى هذه الخاصّية عادة بـقسم المواضيع المميزة أو المواضيع ذات المحتوى المميز. بإمكانك أن تجد هذه الإضافة Plugin بسهولة في قسم تحميل أدوات ووردبريس. ولكن من الجيّد أنه بإمكانك أن تضيفها يدويًا باستخدام بعض الشيفرات والدوال Functions. مُلاحظة: لا يركّز هذا الدرس على التصميم الخاص بقسم المواضيع المميزة، بل ينصب التركيز على الجانب التطبيقي لعملية إنشاء القسم وعرضه، ولك كامل الحرية في تغيير تنسيقات CSS لتعديل التصميم وتشكيله حسب رغبتك. المتطلبات اللازمة لإكمال الدرس: تحميل وتثبيت ووردبريس.الخبرة الكافية بـ Wordpress Codex و PHP.الوقت و الصبر.ما الذي ستقوم ببنائه: قم بتحميل النسخة النهائية من هنا الشروع في العملسنستخدم قالبًا افتراضيًا يسمى Test-theme. وهو مكوّن من مجموعة Template (غير مكتملة) ستُستخدم لغرض إظهار قسم المواضيع المميزة فحسب. يمكنك تحميله من هنا أو قم باستخدام أي قالب Theme آخر تفضِّله لإكمال الدرس. سيركز الدرس على الخصائص التالية: إضافة صندوق meta box (على هيئة Checkbox) إلى الصفحات/المقالات.تخزين معلومات صندوق المُحتوى (meta box).إظهار قسم المواضيع المميّزة على الصفحة الرئيسية للموقع.الخطوة الأولى: إضافة صندوق محتوى meta box إلى الصفحات/المقالاتقم بفتح ملف function.php، وأضِف الشيفرة التالية لإدراج صندوق الاختيار checkbox. سيقوم الكود بإنشاء صندوق محتوى meta box سيظهر في شاشة تحرير الصفحات/المقالات على شكل صندوق اختيار checkbox. function add_featured_meta_box($post){ $featured = get_post_meta($post->ID, '_featured-post', true); echo "<label for='_featured-post'>".__('Feature this post?', 'foobar')."</label>"; echo "<input type='checkbox' name='featured-post' id='featured-post' value='1' ".checked(1, $featured)." />"; } إذا أراد المستخدمون إضافة أيّة مقالات إلى قسم المواضيع المميزة على الصفحة الرئيسية أو أي صفحة أخرى، سيكون بإمكانهم فعل ذلك ببساطة عن طريق الضغط على مربّع الاختيار. ولكن بيانات المقال لن يتم تخزينها في هذه المرحلة، لأننا لم نضف بعد كود حفظ بيانات صندوق المحتوى. الخطوة الثانية: تخزين بيانات صندوق المحتوى (meta box)قم بفتح ملف function.php مرة أخرى، وأضِف الشيفرة التالية أسفل شيفرة add_featured_meta_box الذي أضفناه في الخطوة السابقة. function save_featured_meta($post_id){ if (isset($_REQUEST['featured-post'])) update_post_meta(esc_attr($post_id), '_featured-post', esc_attr($_REQUEST['featured-post'])); } add_action('save_post', 'save_featured_meta');ستقوم هذه الشيفرة بالتأكّد من أن المقال قد تم تحديده ليظهر في قسم المواضيع المميزة، ومن ثم سيقوم بتحديث البيانات أو حِفظها في قاعدة البيانات مُستخدمًا دالة تحديث بيانات الميتا الخاصّة بالمقال update_posts_meta، هذه الدالة ستقوم بتحديث قيمة value مفتاح بيانات الميتا meta_key الخاص بالموضوع المحدد. ستقوم الشيفرة قبل كل شيء بالتأكد من أن مفتاح بيانات الميتا meta_key$ موجود بالفعل على المعرِّف الفريد الخاص بالمقال post_id$، وفي حال عدم وجوده، سيتم استعداء الدالة التالية عوضا عنه: add_post_meta($post_id ,$meta_key ,$meta_value)الخطوة الثالثة: إظهار قسم المواضيع المميزة على الصفحة الرئيسية للموقعسنقوم في هذه الخطوة بإظهار قسم المواضيع المميزة على الصفحة الرئيسيّة للموقع، ولفِعل ذلك، قم بإضافة الشيفرة التالية إلى القالب Template الذي ترغب فيه، وقم كذلك باختيار المكان الذي تراه مناسبًا لظهور القسم على الصفحة. في هذا الدرس، تمَّ إضافة الكود إلى ملف الصفحة الرئيسية index.php، وتمَّ تحديد موقع قسم المواضيع المميزة ليظهر في الشريط الجانبي sidebar للصفحة. <h2>Featured Posts</h2> <?php $args = array( 'posts_per_page' => 5, 'meta_key' => '_featured-post', 'meta_value' => 1 ); $featured = new WP_Query($args); if ($featured->have_posts()): while ($featured->have_posts()): $featured->the_post(); ?> <h3><a href="<?php the_permalink();?>"> <?php the_title();?></a></h3> <p class="details">By <a href="<?php the_author_posts();?>"><?php the_author();?></a> / On <?php echo get_the_date('F j, Y');?> / In <?php the_category(', ');?></p> <?php if (has_post_thumbnail()): ?> <figure> <a href="<?php the_permalink();?>"><?php the_post_thumbnail('', array('class' => 'box' ));?></a> </figure> <p><?php the_excerpt();?></p> <?php endif; endwhile; else: endif; ?> ستعمل الشيفرة ببساطة على تحليل المصفوفة المسؤولة عن عدد المواضيع المميزة لعرضها، وكذلك تحليل القيم Value و المعرف الفريد ID الخاص بها. ستقوم بعد ذلك باستخدام صنف WP_Query للاستعلام عن مواضيعك المميزة. قم بعمل حلقة loop للمواضيع المميّزة على الشريط الجانبي واحصل على تفاصيل المقال مثل العنوان، الروابط الدّائمة Permalink والكاتب ..إلخ. مُلاحظة: تمَّ إضافة تنسيق CSS للقالب الافتراضي المُستخدم، وبإمكانك التعديل عليه حسب رغبتك وفي أي وقت تشاء. إذا قمت بمُراجعة الصفحة الرئيسية للموقع، فإنّك ستجد النتيجة ظاهرة كما في الصورة التالية: الخاتمةتهانينا، لقد قمت بإنشاء أول قسم للمواضيع المميزة بنفسك باستخدام صندوق المحتوى met box وبعض الشيفرات والدّوال، إذا لم تكن مرتاحًا لهذه العملية، فبإمكانك استخدام إضافاتٍ Plugin مثل: TSP Featured Posts أو Featured Postes Widget. أتمنّى أن يكون هذا الدرس مفيداً لكم، وإذا كان لديكم أيّة طريقةٍ أخرى لإضافة قسم للمواضيع المميزة إلى ووردبريس، فلا تبخلوا بمشاركتها معنا على التعليقات. ترجمة ـوبتصرف- للمقال: http://www.1stwebdesigner.com/create-featured-posts-section. حقوق الصورة البارزة: Designed by Freepik.

من المهم لمطورّي ووردبريس أن يكونوا على اطّلاعٍ على تقنيات الحماية والأمان عند تطوير مواقع تعمل بسكربت ووردبريس أو تصميم قوالب جاهزة له، سنبدأ سلسلة من 4 دروس حول هذا الموضوع وسيكون درسنا اليوم عن "التثبيت". هناك عدّة أمور مهمّة لتأخذها بعين الاعتبار لضمان أمانٍ أعلى لموقعك ومن بينها: اختيار الاستضافة المناسبةيبدأ موقع ووردبريس المؤمّن بشكلٍ مثالي من اختيار استضافة مناسبة لموقعك، فمن دون استضافة آمنة وجيّدة السمعة عالميًا، فإنّ جهودك في مجال تأمين موقعك العامِل بووردبريس قد تذهب أدراج الرياح. على الجانب التقني، بِما أنّ ووردبريس يستخدم PHP وMySQL، فإنّ أيّ استضافة تعمل بنظام لينكس ستكون مناسبة، ولكن من المنصوح أن تبتعد عن استضافة GoDaddy و Yahoo! ومثيلاتها حيث أنّ هذه الاستضافات مصممة لتكون بسيطة للغاية مما يجعلها مُقيّدة في بعض الأحيان، وهو ما يعني أنّه غير مجهّزة لأيّ شيء أكثر من موقع ووردبريس عادي بسيط. إذا كنتَ تريد القيام بتعديل بعض الإعدادات على الخادوم لتحسين إعدادات الأمان، فإنّ القيام بهذا قد يكون صعبًا على تلك الاستضافات المقيّدة. ينصح معظم خبراء الحماية باستخدام استضافاتٍ توفّر خواديمًا افتراضية خاصّة (VPS). وهو ما يستخدمه Tony Perez المدير التنفيذي لـSucuri: يستخدم Tony العديد من الأدوات على خادومه للحماية والأمان، هذه الأدوات تريه من يقوم بتسجيل الدخول إلى خادومه، من يقوم بالتعديل على المواضيع.. وهكذا، كما أنّ هذه الأدوات تقوم بعرض WHOIS، الـDNS ونشاط البرمجيات الخبيثة إن كانت موجودة، كلّ واحدٍ من هذه الأدوات مصمم ليراقب جزءًا معيّنا من جزئيات الحماية على الخادوم، بالإضافة إلى أمورٍ قد لا تخطر على بال المستخدمين العاديين. ينصح Tony باستخدام إضافة Sucuri Scanner لفحص مواقع الووردبريس للتأكّد من حمايتها، كما ينوّه إلى أنّه هناك العديد من الإضافات الأخرى التي يمكنك البحث عنها من على مخزن إضافات ووردبريس. مشكلة سكربتات التثبيت بنقرة واحدةتوفّر العديد من شركات الاستضافة الآن القيام بعملية تثبيت ووردبريس "بنقرة واحدة"، وهو ما يسمح للمستخدمين العاديين أن يمتلكوا موقع ووردبريس بسرعة أكثر من السابق، ولكن بالطبّع، السرعة لها تكلفة. يمكنك في الواقع تغيير هذه البيانات بسهولة إن أردت -وهو ما سنتحدّث عنه لاحقًا- ولكن المشكلة هنا هي في الافتراضات التي يظنّها الناس عن عمليات التثبيت بنقرة واحدة بسبب شركات الاستضافة، فهم يظنون أنّها آمنة ومحميّة، لسوء الحظّ، فهي ليست كذلك، مما يجعل طريق التثبيت اليدوي أفضل بكثيرٍ للحماية. كيفية تثبيت ووردبريسإذا كنتَ لا تستخدم عملية التثبيت بنقرة واحدة، فإنّ القيام بتثبيت ووردبريس بالطريقة اليدوية على خادومك يجب أن يستغرق حوالي 10 دقائق. ستحتاج إلى فهم أساسيات عمل بروتوكول نقل الملفّات FTP وقواعد البيانات. هناك عدّة دروس على الويب حول هذا الموضوع من البداية إلى النهاية، ولكننا لن نذكر تفاصيلها الآن في هذا المقال. بمجرّد أن تقوم برفع كلّ ملفّاتك إلى موقعك وبمجرّد أن تقوم بإعداد قاعدة البيانات، سيتم توجيهك إلى إعداد اسم المستخدم وكلمة المرور الخاصّيَن بووردبريس، من المستحسن أن تقوم باختيار اسم مستخدمٍ معقّد ومن الصعب أن يتم تخمينه من قبل المخترقين لحمايةٍ أعلى. نفس الشيء بالنسبة لكلمة المرور الخاصّة بك، اجعلها معقّدة قدر الإمكان وأضف إليها الأرقام والرموز والأحرف الكبيرة، لا تتركها بسيطة فتصبح عُرضةً لهجمات التخمين بسهولة، كلّما كانت كلمة المرور أكثر تعقيدًا وطولًا، كلّما صعب تخمينها وكسرها. تغيير اسم المستخدم "Admin"تحدّثنا بالفعل عن أهميّة تجنّب اسم المستخدم "admin" ولماذا يجب عليك أن تختارَ اسمًا معقدًا، ولكن لنفرض أنّك قمتَ بالفعل بتثبيت موقع ووردبريس جديد منذ فترة واستخدمت اسم المستخدم "admin" فيه، فستحتاج تغييره يدويًا من phpMyAdmin. افتراضيًا، لا يسمح لك ووردبريس بتغيير اسم المستخدم، ولكن يمكنك إنشاء مستخدمٍ جديد إن أردت وإعطاؤه صلاحياتٍ إدارية كاملة وحذف المستخدم "admin" وإسناد الصفحات والمقالات التي أنشئتها بالمستخدم القديم إلى المستخدم الجديد، ولكن إذا كنتَ تمتلك الكثير من الصفحات والمقالات فربّما تريد القيام بالأمر يدويًا. للقيام بذلك، قم بالدخول إلى لوحة cPanel الخاصّة بك (على افتراض أنّك تمتلك واحدة!) ثمّ ابحث عن phpMyAdmin وقم بفتحها، بعد هذا، ابحث عن قاعدة البيانات الخاصّة بموقعك وابحث عن جدول wp_users ضمنها. ابحث عن المستخدم "admin" واصغط على زر "Edit" أو تحرير بجانبه لتعديل اسم المستخدم، قم بتبديل الاسم واحفظه. بعد هذا، سيتم تلقائيًا تغيير اسم المستخدم في جميع أنحاء موقعك إلى الاسم الجديد ولن تحتاج إلى حذف شيء. الخاتمةفي معظم الأحيان، يعتقد الناس أنّ أمان ووردبريس هو مسألة يمكن حلّها عبر إضافة ووردبريس، صحيحٌ أنّ هذا جزءٌ مهم من المعادلة ولكنّه ليس كلّ شيء، حيث أنّك تحتاج تأمين كلّ شيء منذ البداية. في الدرس القادم سنتطرق إلى كيفية تأمين ووردبريس بعد تثبيته عبر تأمين تسجيل الدخول إلى المنصة. ترجمة -وبتصرف- للمقال The WordPress Developer’s Guide to Security: Installation لصاحبته Brenda Barron.

لطالما كانت عملية تسجيل حساب جديد أمرًا مهمًّا جدًّا. لحظة فاصلة يفترق فيها الطريق، فإذا اتجه المستخدم إلى اليسار ولم يقم بالتسجيل، فسيقود ذلك إلى نهاية محتمة للمستخدم والمُنتَج، وإذا اتجه المستخدم إلى اليمين مختارًا تسجيل حساب جديد، فهذا سيكون يوم سعدك، رحلتك لبناء تجربة استخدام ممتازة تبدأ هنا. إليك إذًا اثنا عشر طريقة لتحسّن باستخدامها عملية تسجيل حساب بما يضمن لك تسجيل أكبر قدر ممكن من زوّار موقعك حسابًا جديدًا في خدمتك أو منتجك. 1. قدم لمحة سريعة عن المنتج بدون تسجيل حساب أتذكر آخر مرة تسوّقت فيها داخل متجر حقيقي؟ هل تتذكر أنك قد احتجت حينها إلى ملء نموذج لتتمكن من دخول المتجر؟ لا؟ أتعني أنك كنت قادرًا على إلقاء لمحة سريعة على منتجاتهم دون الاحتياج إلى "تسجيل حساب" لديهم؟ يجب عليك أن تسمح للمستخدمين بإلقاء نظرة على المنتج دون الحاجة إلى تسجيل حساب، تمامًا كما تسمح المحال التجارية للناس بذلك، أعطِ المستخدمين نظرة خاطفة حول ما سيحصلون عليه إذا قدّموا لك معلوماتهم الشخصيّة المهمة. تعد Balsamiq (أداة على الويب تساعدك في إنشاء مخططات شبكيّة لتطبيقاتك) مثالاً واضحًا على هذا. تسمح Balsamiq لمستخدميها بإطلاق نسخ تجريبيّة لواجهاتهم (خلال ساعة استخدام واحدة فقط) دون الحاجة إلى تسجيل حساب جديد. شبكة LinkedIn توفّر أيضًا نظرة خاطفة حول ما ستحصل عليه عند تسجيل حساب جديد دون الاحتياج إلى فعل ذلك. تسمح لك LinkedIn بالبحث عن الأشخاص في قاعدة بياناتها ثم تطلب منك بدهاء تسجيل حساب جديد لتطلع على معلومات أكثر حول شخص ما. تسمح Balsamiq لمستخدميها بإطلاق نسخة تجريبيّة من رسومات واجهة تطبيقهم الأوليّة دون الاحتياج إلى تسجيل أي حساب جديد. 2. أعط مستخدميك أسبابا مقنعة لتسجيل حساب جديد إنها نصيحة معروفة بالتأكيد، لكنها مع ذلك أفضل النصائح التي ستحصل عليها غالبًا: أعطِ المستخدم سببًا مقنعًا لكي يسجّل حسابًا جديدًا عندك. أجب عن ذلك السؤال الصغير الذي تردّد دائمًا في أذهان المستخدمين: ما الذي سأحصل عليه عبر تسجيل حساب جديد؟ وضّح باختصار فوائد تسجيل حساب من نظر المستخدم. أو بالأحرى، بِع الفوائد، لا المزايا. لا تُجبر مستخدميك أيضًا على تسجيل حساب فور زيارة الموقع، فلا أحد يحب أن يهاجم بمباغتة كهذه. دع المستخدمين ليستكشفوا منتجك أو خدمتك ويتعرّفوا على الفوائد التي سيحصلون عليها من تسجيل حساب قبل أن تعرض عليهم تسجيل الحساب. شركة Evernote تجيد تقديم منتجها (مساحة عمل عبر الويب) ورغم أن نموذج تسجيل الحساب يتوسط واجهة موقعهم، إلا أنّه ليس المُكوّن الوحيد ولا الرّئيسي الذي تُشاهده على الصّفحة. تُبرز Evernote فوائد تسجيل حساب جديد بطريقة ممتازة. 3 . إذا كان تسجيل الحساب مجانيا، فوضح ذلك إذا كان من الممكن للمستخدمين تسجيل حساب جديد مجّانًا في منتج أو خدمة، حتى لو كان هذا لفترة تجربة قصيرة، فمن الواجب حينها إيضاح هذا جيدًا. يقوم موقع Trello (أداة لإدارة المشاريع والمهام عبر الويب) بتوضيح إمكانية تسجيل حساب مجّانًا بطريقة رائعة. لقد استبدلوا زر "سجّل" الذي يُستعمل عادة بزر آخر، يعلمك بكل وضوح بأنّ التسجيل مجاني. يُبرز موقع Trello إمكانية التسجيل المجّاني جيّدًا. 4. اجعل عملية التسجيل من خطوة واحدة فقط تزيد الفائدة كلّما قلّ التعقيد في عملية التسجيل. كلّما قلّت الخطوات التي سيمر بها مستخدمو الموقع زادت فرصة نجاحهم في تخطّي عقبات تسجيل الحساب. حاول دائمًا تصميم عملية تسجيل الحساب بخطوة واحدة بسيطة، كما في موقع tumblr في المثال أدناه. وإن لم يكن ذلك ممكنًا فحاول تخفيض الخطوات إلى أدنى حد ممكن، ولا تنس وضع توقعات المستخدمين نصب عينيك، وكمثال، أوضِح أن هذه هي الخطوة الأولى من خطوتين في عملية التسجيل. يُقدم موقع tumblr تجربة تسجيل سريعة من خطوة واحدة (وإن كنت لا أتفق مع وضع نصّ أبيض على صورة خلفية). 5. اهتم بتوقعات المستخدم إذا توجهت إلى مدينة الملاهي ذات يوم ووقفت في صف انتظار لتجرّب لعبة ما، ستلاحظ غالبًا وجود لافتة تخبرك بالوقت المتوقع انتظاره، لماذا تقوم المدن الترفيهية بهذا؟ إيضاح أنك ستنتظر ثلاث ساعات قبل أن يتم إصلاح الأفعوانية لن يبدو كفكرة جيدة، لكنه كذلك في الواقع، هنالك أمر ما في أعماق النفس البشرية يثير أعصابك حيال المجهول. إخبار الناس بأنهم سينتظرون ثلاثة ساعات قبل ركوب لعبتهم المفضّلة يكوّن لهم توقعات حول المجهول، بما يضمن لهم على الأقل معرفة ما يفعلونه الآن. كما تفعل لافتات المدن الترفيهية الصغيرة هذه، إعلام المستخدم بما يتوقعه هو أمر جيد، أخبرهم كم سيمضون من الوقت غالبًا كي ينهوا عملية التسجيل، ما المعلومات التي ستطلب، وإذا ظن المستخدمون بأنهم سيضطرون إلى إدخال معلوماتهم البنكية بينما لا تنوي أن تطلبها فإن ذكر هذا أمر جيد. لا توضح شركة MailChimp بأن التسجيل سيتطلب ثلاثين ثانية فحسب، بل تجيب عن توقع الاحتياج إلى المعلومات البنكية بذكر أنك لن تحتاج إلى استخدام بطاقتك البنكية لتسجيل حسابك. تذكر شركة MailChimp أنك لن تحتاج إلى إدخال معلوماتك البنكية وأن التسجيل سيستلزم ثلاثين ثانية من وقتك. 6. أبرز عدد الذين سجلوا بالفعل حتى الآن إظهار عدد الذين قاموا بالتسجيل يعتبر من الطرق الفعّالة للتشجيع على تسجيل حساب جديد، خصوصًا إذا كان ذلك الرقم كبيرًا حقًا. ولأننا مخلوقات تُقاد قلوبها بالسير مع القطيع (بعضنا يفعل ذلك أكثر من الآخر) فإن إظهار عدد الذين سجّلوا مؤخرًا سيكون أمرًا مؤثرًا. على سبيل المثال، أداة التصاميم الأولية والعمل الجماعي InVision تظهر لك عدد المصممين الهائل، والبالغ أكثر من مليون مصمم مّمن قد استعملوا InVision. تشجّع InVision زوّار موقعها على تسجيل حساب جديد عبر إبراز أن أكثر من مليون مصمم قد استعملوا الأداة حتى الآن. 7. اطلب أقل قدر من المعلومات تستطيع دائمًا معرفة إن كانت عملية التسجيل قد تحولت إلى تحقيق من قبل شركة تسويق ما، حيث يُجبر المستخدمون على إدخال حزم من المعلومات تبدو بنظر المسوقيّن بقيمة الذهب فقط بهدف تسجيل حساب جديد، ستُسعد شركة التسويق بهذا الكم من المعلومات، لكن معدل عمليات التسجيل هو من سينخفض كثيرًا. بدلاً من السؤال عن الكثير من المعلومات مباشرة عند التسجيل، من الأفضل أن تطلب أقل قدر ممكن من المعلومات (البريد الإلكتروني وكلمة المرور عادة) ثم السؤال عن بقية المعلومات كجزء من عملية إتمام الحساب، وكمثال حي، يطلب موقع Slack (أداة للتراسل والتواصل بين أعضاء الفرق) البريد الإلكتروني عند التسجيل فحسب، ثم يطلب خلال تفعيل البريد الإلكتروني تحديد كلمة للمرور. يطلب Slack عند تسجيل حساب جديد معرّف البريد الإلكتروني فحسب، ويطلب تحديد كلمة المرور أثناء تفعيل البريد الإلكتروني. 8. لا تطلب نفس المعلومة مرتين هل تطلب أثناء تعرفك على شخص جديد أن يكرر اسمه؟ قد تفعل هذا إذا كان اسمه غريبًا، أو إن لم تسمع الاسم بشكل جيّد، وقد يكون الأمر طبيعيًا حين تعيد السؤال للمرة الأولى، لكن ذلك سيبدو غريبًا إذا أعدته عدة مرات، أليس كذلك؟ مرحبًا، أنا سامر. أهلاً سامر، أنا سعيد بلقائك، ما اسمك يا سامر؟ سامر، اسمي هو سامر، ولقد ذكرتَه بنفسك للتو. قد يبدو هذا غريبًا في المحادثات، لكنه يتكرر كثيرًا في عمليات التسجيل. يُطلب من المستخدمين إدخال بريدهم الإلكتروني أو كلمة مرورهم مرتين، وقد يحدث الأسوأ من ذلك بطلبهما معًا مرتين. من الأفضل أن تطلب المعلومة مرة واحدة، بدلاً من طلبها مرتين، قد تتساءل حينها، أولن يدخل المستخدمون أحيانًا معلومات خاطئة؟ كيف من الممكن أن نفعّل بريدهم الإلكتروني أو نتأكد من كلمة مرورهم؟ وجواب هذا السؤال سهل. بإمكانك تأكيد بريدهم الإلكتروني بإرسال رسالة تحتوي رابط تفعيل (ومن المؤكد أنك ستفعل ذلك لتتأكد من أن البريد المدخل ليس ببريد مزوّر). وتستطيع توفير خيار عرض كلمة المرور باستخدام زرٍ يقوم بذلك (راجع مثال MailChimp أعلاه) أو ببساطة، تقبّل أن المستخدم قادر دائمًا على تغيير كلمة سرّه أثناء تفعيله بريده الإلكتروني إذا أخطأ بكتابته. لا تطلب شبكة التواصل الاجتماعي Twitter من مستخدميها نفس المعلومة إلا مرة واحدة خلال تسجيل حساب جديد. 9. وفر خيار التسجيل باستخدام حساب خارجي تستطيع تسهيل وتسريع عملية التسجيل عبر إتاحة استخدام حساب خارجي للتسجيل، كحساب من Google ،Twitter ،LinkedIn ،PayPal أو Facebook، ولن يجعل هذا تسجيل الدخول أسهل حالما يقوم المستخدمون بتسجيل حسابهم فحسب (بما أنهم يستعملون معلومات يدخلونها يوميًا)، لكن هذا سيجعل عملية تسجيل الحساب أيضًا فائقة السرعة والسهولة متجر Ocado (محل تسوق عبر الويب) يقدّم بذكاء خدمة تسجيل حساب بإدخال المعلومات الشخصيّة أو إدخال معلومات حسابهم الشخصيّ على PayPal أو Facebook. يمكن لزبائن متجر Ocado إذا رغبوا بذلك تسجيل حسابهم مستعملين حساباتهم الأصلية على PayPal أو Facebook. 10. طمئن المستخدمين حول خصوصيتهم أثناء التسجيل الثقة عامل من العوامل الأكثر تأثيرًا في احتمالية تسجيل المستخدم لحساب جديد. هل أستطيع أن أثق بهذه الشركة لأعطيها معلوماتي الشخصيّة؟ هل أستطيع ببساطة أن أأتمن هذه الشركة؟ من المهم أن يضمن المستخدمون أمن وسريّة معلوماتهم مع تزايد استهدافها من المخترقين Hackers وأن يزيحوا القلق والمخاوف عن صدورهم أثناء التسجيل. وقد تتضمن هذه المخاوف: كيفية استعمال المعلومات الشخصيّة المدخلة؟ وهوية من ستشارك معهم هذه المعلومات (لا أحد، كما آمل!) لقد فهم موقع SurveyMonkey (أداة لصنع الاستبيانات عبر الويب) أهمية هذا الأمر، ويقوم الموقع بطمأنة المستخدمين موضّحًا أنهم إن سجّلوا حسابهم باستعمال حساب مسبق من Google أو Facebook فإن معلوماتهم ستبقى سريّة تمامًا. يزيل موقع SurveyMonkey مخاوف مستخدميه المحتملة بإيضاح أن استخدام حسابٍ مسبقٍ من Google أو Facebook يبقي المعلومات المدخلة سريّة تمامًا. 11. لا تجبر مستخدميك على الموافقة (بالنقر على checkbox) على اتفاقية الاستخدام نحب جميعًا اتفاقيات الاستخدام، صحيح؟ بالنسبة لي، لا أجد أمرًا أكثر إمتاعًا لفعله في ليلِ سبتٍ ما سوى إمضاء الوقت بقراءة ستٍّ وأربعين صفحة بمقاس A4 (نعم، 46 صفحة، أكثر من 20 ألف كلمة) من اتفاقية Apple للاستخدام. من الواضح أن هذا أفضل من عد الخراف للتغلب على الأرق. مع الأسف، إن اتفاقية الاستخدام شرِّ لا بد منه، لكن، بدلاً من إجبار المستخدمين على تعليّم مربّع صغير يقول بأنهم قد قرؤوا اتفاقية الاستخدام خاصتك ووافقوا عليها (يا لها من كذبة اعتدنا على قولها، فمن ذا الذي يقرأ اتفاقية الاستخدام فعلاً؟)، من الأفضل أن تجعل هذه الاتفاقية جزءًا من عملية التسجيل. شبكة Pinterest مثلاً توضح أنك بإنشاء حساب جديد تكون قد وافقت بالفعل على اتفاقية الاستخدام، سياسة الخصوصية، واستعمال الكوكيز. تتفادى شبكة Pinterest زر اتفاقية الاستخدام التقليدي بتوضيح أن إنشاء حساب يجعلك موافقًا على اتفاقية استخدامها. 12. لا تطلب المعلومات البنكية مباشرة من المعتاد هذه الأيام أن تحصل على تجربة مجّانية لثلاثين يومًا في أغلب المنتجات على الويب، على الأقل للمنتجات التي لن تكون مجّانية دائمًا. إذا كان منتجك أو خدمتك تقدم هذه التجربة، فإن من المغري بالنسبة إليك أن تطلب المعلومات البنكية مباشرة. من الممكن أن يسهّل هذا تحويل الحساب من حساب تجريبيّ إلى حساب مدفوع، بغضّ النظر عن أن هذا سيساعدك أيضًا بسحب بعض الأموال من هؤلاء المُستخدمين الذين نسوا إلغاء حسابهم في الوقت المناسب. رغم أن هذا التكتيك متّبع من قبل بعض الشركات الكبيرة كـApple Music، إلا أنني أرى الحصول على المعلومات البنكية خلال فترة التجربة أو بعدها أفضل. يسهّل هذا عملية تسجيل الحساب أكثر ويقيك من غضب أي عميل أثناء إخباره أصدقاءه وعائلته عن خداعك إياه بإجباره على الدفع لمنتجك "المجّاني" أو خدمتك. تعرف شركة VWO (أداة لاختبارات A/B Testing) أهمية عدم السؤال عن أي معلومات بنكية مباشرة وتعلن بوضوح أن البطاقة البنكية لن تكون مطلوبة للتجربة المجّانية. تبيّن شركة VWO أن البيانات البنكية لن تُطلب للحصول على تجربة مجّانية. ترجمة -وبتصرف- للمقال: 12Ways to improve sign up conversion لصاحبه Neil Turner.

سنتعلم في هذا الدرس كيف نرسم التصميم العام لموقع معرض أعمال أنيق وجميل بواسطة برنامج فوتوشوب وباستخدام تأثيرات مختلفة وأساليب المزج وأنماط الطبقات. يتمتع الموقع الذي سنصممه بالأناقة والبساطة بذات الوقت وسيجذب رأس الصفحة المتناقض اهتمام المستخدمين. من ناحية أخرى فإن الفكرة هي الأناقة مع أسلوب طباعة كبير وتفاصيل خفيفة في عناصر الواجهة. بعد الانتهاء من التصميم وتجهيز ملف PSD يمكنك الذهاب إلى الدرس التالي لتتعلم كيفية برمجة وترميز التصميم باستخدام HTML و CSS. افتح ملفا جديدا على فوتوشوب. أنا اميل إلى العمل بأبعاد 1680×1050 للحصول على فكرة عما سيبدو عليه موقع الإنترنت في الشاشة العريضة. لوّن الخلفية باللون الرمادي الفاتح كلون الكْرِيم وطبّق فلتر noise من قائمة الفلاتر بقيمة 2%. بالزر الأيمن حوّل transform التحديد إلى 960px ثم ارسم أدلة لتحديد المركز والجوانب. استخدم أداة المستطيل مستدير الزوايا rounded rectangle لرسم منطقة المحتوى ولكن اترك حواف بقيمة 10px بعيدة عن الأدلة للسماح بظهور تأثير الظلال Drop Shadow التي سنضيفها لاحقًا. ألصق شعارك في مركز التصميم. استخدم أداة المستطيل مستدير الزوايا rounded rectangle tool لرسم زر في منطقة رأس الصفحة. غيّر خصائص المزج إلى Overlay للسماح بظهور الخامة الضمنية من خلال هذا الزر. أضف ظل داخلي رقيق لإعطاء الانطباع بأنه محفور داخل الأرضية. المفتاح هو تخفيف opacity نحو 10%. اصنع عدة نسخ من الزر وضعها على جانبي الشعار ثم أضف النص إلى كل زر منها. الصفحات النموذجية يجب أن تكون الصفحة الرئيسية، حول الموقع، معرض الأعمال وللاتصال بنا. انقر مع الضغط على مفتاح CMD أو Ctrl على مُصغّر منطقة المحتوى البيضاء ثم اسحب مع الضغط على مفتاح ALT عبر الجزء السفلي مع أداة marquee tool لترك تحديد قصير. لوّن هذه المنطقة باللون الأسود. افتح نافذة نمط الطبقة من أجل هذه الطبقة وأضف نقش متراكب. استخدمتُ هنا نمط الآيفون4 خامة القماش من Dr.Palaniraja. ارسم حدود رفيعة 4px عبر أسفل منطقة رأس الصفحة ولوّنها بالرمادي الفاتح. استخدم التدرج اللوني من الأسود إلى الشفافية لرسم ظلال قصيرة على طول حافة أسفل منطقة رأس الصفحة. خفف opacity لنحو 10%. استخدم خط Georgia لكتابة عنوان تقديمي أنيق في منطقة رأس الصفحة. أضف لمسة من الظل الفاتح شبه الشفاف إلى الحروف. ارسم زر باستخدام أداة المستطيل مستدير الزوايا rounded rectangle ثم استخدم نافذة نمط الطبقة لتجميل الزر. ابدأ مع تدرّج لوني مع الرمادي الداكن والفاتح القريب من ألوان أرضية منطقة رأس الصفحة. أعطي الزر مظهرًا مشطوفًا عبر التلاعب بالتوهج الداخلي Inner Glow بحدود رمادية فاتحة ثم أضف حدودًا رمادية داكنة بقيمة 1px. أكمِل تصميم الزر عبر إضافة النص واضبط الإعدادات لتأثير الظلال لإنشاء مظهر الإقحام داخل الأرضية. ألصق مثال عن عمل تصميم موقعك في رأس الصفحة. اصنع تحديد من منطقة رأس الصفحة ثم أضف قناع الطبقة لقص لقطة الشاشة على حجم الملف. أضف ظل Drop Shadow باستخدام تأثير أنماط طبقات الفوتوشوب ثم بالزر الأيمن اختر إنشاء طبقة Create Layer. استخدم خاصية الالتواء من ميزات التحول لثني الظل للخارج. خفف Opacity لمنحه مظهرًا وقعيًا. استخدم أسلوب الطباعة من رأس الصفحة في منطقة المحتوى الرئيسي ودوّن نسخة الجسم الرئيسي بواسطة خط sans-serif الكبير الجميل. ارسم مستطيل رمادي كقاعدة لمعاينة عنصر معرض الأعمال ثم اصنع زر مستطيل مستدير الزوايا بظلال داخلية. أكمل عنصر معرض الأعمال بمصغّر يبدأ بعرض المشروع ثم أضف نص الرابط مستخدمًا نمط النص في أزرار القائمة. اجمع Group وضاعف العناصر التي تمثل معرض الأعمال ووزعها بشكل صحيح مع استبدال الصورة المصغرة التي ستبرز آخر أعمالك. أكمل منطقة أسفل الصفحة بملاحظة حقوق النشر والرابط لأعلى الصفحة. فكرة الصفحة الرئيسية اكتملت الآن لذا دعونا نصمم الصفحات الداخلية. ضاعف ملف PSD وأطلق عليه اسم About. الصفحات الداخلية لا تحتاج إلى منطقة رأس كبيرة ولكن يمكننا أن نستخدم هذه المساحة لإظهار عنوان الصفحة. صغّر حجم منطقة رأس الصفحة. اضبط النص في رأس الصفحة لتقديم الصفحة. في هذه الحالة صفحة About ستكون بعنوان "About Chris Spooner" أو قد تكون فكرة جيدة لو استخدمت اسمك. ألصق نسخة جسم الصفحة لتملأ منطقة محتوى صفحة About. لا تنسَ أن تترك مساحة لوضع صورتك الشخصية. صفحة معرض الأعمال يمكن أن تصمم من خلال مضاعفة عناصر معرض الأعمال واستبدال المصغّرات بتصاميم مشاريعك. املأ الصفحة بعناصر معرض الأعمال المختارة. بما أننا بنينا هذا الموقع بنمط WordPress فسيكون علينا إنشاء مشاركة مدونة لكل من عناصر معرض الأعمال. استخدم مجموعة مختلفة من المستطيلات مستديرة الزوايا لتنسيق نموذج الاتصال في صفحة الاتصال ثم أدرج مجموعة من الأيقونة التي تمثل مواقع التواصل الاجتماعي المفضلة لديك. لا تنسَ أن تقرأ الدرس التالي لتتعلم كيف تحول ملف PSD هذا إلى موقع Html وCSS كامل. ترجمة -وبتصرّف- للمقال: How To Build a Stylish Portfolio Web Design Concept لصاحبه Chris Spooner.

كما هو موضح في العنوان فإنّك في هذا الدرس سوف تتعلم كيفية إنشاء تأثير وكأنّك تتصفح كتابًا ما. وسوف نستخدم في هذا الدرس إضافة تدعى BookBlock، والفكرة من هذا الدرس هو أنّك سوف تقوم بإنشاء تأثير يُمكّن الزوار من تصفح موقع ما وكأنهم يتصفحون أحد الكتب. الفكرة هي أنّك سوف تتصفح صفحات الموقع باستخدام سهمين سوف يكونان موجودين في أعلى الصفحة أو أزرار لوحة المفاتيح أو حتى بالسحب باستخدام الفأرة وأيضًا سيكون هناك قائمة جانبية سوف تظهر عندما تقوم بالضغط على أيقونة ما. وسوف تحتوي القائمة الجانبية على روابط لصفحات الموقع وعندما تقوم بالضغط على أحد هذه الروابط فإنّها سوف تنقلك إلى الصفحة المطلوبة. سوف نستخدم أيضًا إضافة اسمها jScrollPane وذلك للحصول على شريط تمرير (scrollbar) يظهر عندما يكون المحتوى أطول من ارتفاع المتصفح. وهذه قائمة بإضافات jQuery التي سوف نستخدمها: BookBlockCustom jQuery++jScrollPanejQuery Mouse Wheel PluginCustom Mdernizerيمكنك معاينة المثال الموضح في هذا الدرس من هنا. كما يمكنك تحميل الملفات المصدرية. بنية ملف HTMLفي البداية يجب أن يكون لدينا حاوٍ رئيسي لاحتواء جميع العناصر، وداخل هذا الحاوي سوف يكون هناك عنصر <div> للقائمة الجانبية وسوف نعطيه فئة (class) بالاسم "menu-panel" وسوف يكون هناك عنصر <div> آخر يحتوي على المحتوى الرئيسي للموقع وسوف نعطيه فئة بالاسم "bb-custom-wrapper". وفي داخل كل قسم سوف يكون هناك حاوٍ للمحتوى وعنصر <div> سوف نحتاجه من أجل شريط التمرير الذي ذكرناه سابقًا. <div id="container" class="container"> <div class="menu-panel"> <h3>Table of Contents</h3> <ul id="menu-toc" class="menu-toc"> <li class="menu-toc-current"><a href="#item1">Self-destruction</a></li> <li><a href="#item2">Why we die</a></li> <li><a href="#item3">The honeymoon</a></li> <li><a href="#item4">A drawing joke</a></li> <li><a href="#item5">Commencing practice</a></li> </ul> </div> <div class="bb-custom-wrapper"> <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item" id="item1"> <div class="content"> <div class="scroller"> <h2>Self-destruction</h2> <p>...</p> </div> </div><!-- /content --> </div><!-- /bb-item --> <div class="bb-item" id="item2"><!-- ... --></div> <div class="bb-item" id="item3"><!-- ... --></div> <div class="bb-item" id="item4"><!-- ... --></div> <div class="bb-item" id="item5"><!-- ... --></div> </div><!-- /bb-bookblock --> <nav> <a id="bb-nav-prev" href="#">←</a> <a id="bb-nav-next" href="#">→</a> </nav> <span id="tblcontents" class="menu-button">Table of Contents</span> </div><!-- /bb-custom-wrapper --> </div><!-- /container -->سوف نقوم بربط عناصر القائمة الجانبية بصفحات الموقع (التي تحمل الفئة "bb-item)، وسوف نُضيف أيضًا سهمين في أعلى الصفحة من أجل التنقل بين الصفحات وزر يقوم بفتح وإغلاق القائمة الجانبية. لنقم الآن بإضافة تنسيقات CSS. تنسيقات CSSلن نتحدث هنا عن التنسيقات التي تأتي مع إضافة BookBlock لأنك سوف تجدها داخل ملف bookblock.css، وإنّما سوف نُركّز على التنسيقات الأخرى المهمة. لنبدأ التنسيقات بإضافة سطر يقوم بجلب الخط المسمى "Lato" من خدمة Google web fonts: @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);سوف نقوم بإعطاء الوسم <html> الخاصية height: 100% وذلك لأننا سوف نحتاج أن نجعل بعض العناصر تتمدد على ارتفاع المتصفح كاملًا: html { height: 100%; }سوف نستخدم أيضًا الخاصية box-sizing: border-box وذلك حتى نستخدم قيم مئوية لكل من العرض والإرتفاع أثناء استخدام padding دون القلق حول أبعاد العناصر والقيام بعمليات حسابية نحن بغنىً عنها: *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }لنقم الآن بتعريف الخط الذي سوف نستخدمه في الموقع (العنصر body) ونُعطيه ارتفاع بقيمة 100% (تذكّر أننا نريد ارتفاع بهذه القيمة لأنه سوف يكون هناك عناصر تتموضع بشكل مطلق (absolute positioning) وسوف تحتاج أن تتمدد على ارتفاع المتصفح كاملًا): body { font-family: 'Lato', Calibri, Arial, sans-serif; font-weight: 400; font-size: 100%; color: #333; height: 100%; }سوف نستعمل أيضًا إضافة Modernizr وسوف نُضيف الفئة "no-js" إلى وسم <html>، فإذا كانت الجافاسكربت مفعّلة فإنّ Modernizr سوف يستبدل تلك الفئة بالفئة "js". وهذا سوف يساعدنا على إعطاء خصائص CSS معينة لبعض العناصر التي لا نريدها إذا كانت الجافاسكربت معطّلة. لاحظ أيضًا أننا نحتاج أن يكون عرض الصفحة وارتفاعها بقيمة 100% فقط إذا كانت الجافاسكربت مفعّلة وعندها فقط نريد من العنصر body أن يكون له خاصية overflow: hidden: .js body { overflow: hidden; }وهذه بعض التنسيقات الخاصة بالروابط: a { color: #555; text-decoration: none; } a:hover { color: #000; }نريد من الحاوي الرئيسي أن يكون بعرض وارتفاع المتصفح كاملًا، وسوف نقوم بموضعة القائمة الجانبية خارج هذا الحاوي باستعمال الخاصية left وإعطائها قيمة سالبة تكون بنفس قيمة العرض الخاص بالقائمة الجانبية. والفكرة هي أنّه عند النقر على أيقونة القائمة الجانبية فإنّ الحاوي سوف يتحرك إلى اليمين مما يؤدي إلى ظهور القائمة الجانبية. دعونا إذًا نقوم بإعطاء الحاوي الرئيسي عرضًا وارتفاعًا بقيمة 100% وأن نُضيف الخاصية transition إلى الحاوي container: .container, .bb-custom-wrapper, .bb-bookblock { width: 100%; height: 100%; } .container { position: relative; left: 0px; transition: left 0.3s ease-in-out; }عند النقر على أيقونة القائمة الجانبية فإن فئة (class) أخرى سوف يتم إضافتها إلى الحاوي container والتي سوف تحتوي على الخاصية left: 240px (نفس العرض الخاص بالقائمة الجانبية) وبالتالي فإنّ الصفحة كاملة سوف تتحرك إلى اليمين بمقدار 240px وبالتالي ظهور القائمة الجانبية: .slideRight { left: 240px; }ولكن بدون الجافاسكربت لن نكون قادرين على القيام بما سبق لذلك سوف نقوم بإضافة الخاصية padding-left: 240px: .no-js .container { padding-left: 240px; }ونريد أن تكون القائمة الجانبية ثابتة في الجانب الأيسر بشكل افتراضي: .menu-panel { background: #f1103a; width: 240px; height: 100%; position: fixed; z-index: 1000; top: 0; left: 0; text-shadow: 0 1px 1px rgba(0,0,0,0.1); }وإذا كانت الجافاسكربت مفعلة فسوف نقوم بموضعة القائمة الجانبية بشكل مطلق وإلى اليسار بقيمة -240px: .js .menu-panel { position: absolute; left: -240px; }وهذه هي التنسيقات الخاصة بعناصر القائمة الجانبية: .menu-panel h3 { font-size: 1.8em; padding: 20px; font-weight: 300; color: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); } .menu-toc { list-style: none; } .menu-toc li a { display: block; color: #fff; font-size: 1.1em; line-height: 3.5; padding: 0 20px; cursor: pointer; background: #f1103a; border-bottom: 1px solid #dd1338; } .menu-toc li a:hover, .menu-toc li.menu-toc-current a{ background: #dd1338; }وأمّا بالنسبة للقائمة الرئيسية التي سوف تحتوي على السهمين فإننا سوف نقوم بموضعتها بشكل مطلق وفوق جميع العناصر الأخرى: .bb-custom-wrapper nav { top: 20px; left: 60px; position: absolute; z-index: 1000; }كما أنّ روابط السهمين وزر القائمة الجانبية سوف يتموضعان بشكل مطلق (position: absolute) وسوف نعطيها الخاصية border-radius: 50% لنجعلها تظهر كالدائرة: .bb-custom-wrapper nav span, .menu-button { position: absolute; width: 32px; height: 32px; top: 0; left: 0; background: #f1103a; border-radius: 50%; color: #fff; line-height: 30px; text-align: center; speak: none; font-weight: bold; cursor: pointer; } .bb-custom-wrapper nav span:last-child { left: 40px; } .bb-custom-wrapper nav span:hover, .menu-button:hover { background: #000; }سوف يكون الزر الذي يفتح ويغلق القائمة الجانبية موجودًا في أعلى يسار الصفحة وسوف نقوم بإخفاء النص الموجود بداخله (نريد أن تظهر الأيقونة فقط): .menu-button { z-index: 1000; left: 20px; top: 20px; text-indent: -9000px; }لنقم الآن بإنشاء أيقونة بسيطة بدون استعمال أي صور وذلك باستعمال العنصر الزائف :after واستعمال الخاصية box-shadow والتي سوف تعمل على إنشاء الخطين العلوي والسفلي للأيقونة: .menu-button:after { position: absolute; content: ''; width: 50%; height: 2px; background: #fff; top: 50%; margin-top: -1px; left: 25%; box-shadow: 0 -4px #fff, 0 4px #fff; }وفي حالة كان الجافاسكربت معطلًا فإننا نريد أن نخفي هذه العناصر: .no-js .bb-custom-wrapper nav span, .no-js .menu-button { display: none; }لننتقل الآن إلى تنسيق الأجزاء الداخلية لكل قسم من أقسام الصفحة (bb-item). نريد أن يتم موضعة المحتوى (content) بشكل مطلق ونريد ان نستعمل الخاصية overflow: hidden، وهذا مهم لأننا نريد تطبيق شريط التمرير هنا ونريد أن نفعل ذلك فقط عند قلب/تغيير الصفحة. فإذا لم نستخدم الخاصية overflow: hidden فإنّك سوف ترى المحتوى يتداخل ببعضه. وأعيد وأكرر مرة أخرى بأنّ هذا سوف يحدث فقط إذا كان الجافاسكربت مفعلًا ولذلك سوف نستخدم الفئة "js": .js .content { position: absolute; top: 60px; left: 0; bottom: 50px; width: 100%; overflow: hidden; }العنصر <div class="scroller"> هو الذي سوف ينمو مع المحتوى لذلك سوف نعطيه الخاصية padding: .scroller { padding: 10px 5% 10px 5%; }لاحظ أننا استعملنا قيم مئوية للجوانب وذلك حتى نجعل الصفحة تتجاوب مع حجم الشاشة. دعونا نتخلص من الحواف الحادة عندما نقوم بالتمرير (scroll) وذلك باستخدام العناصر الزائفة إلى أعلى وأسفل عنصر المحتوى مع استخدام تدرج بين اللون الأبيض والشّفّاف: .js .content:before, .js .content:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 20px; z-index: 100; pointer-events: none; background: linear-gradient( to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% ); } .js .content:after { top: auto; bottom: 0; background: linear-gradient( to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100% ); }هذا سوف يجعل النص يظهر بشكل باهت. لنقم الآن بتنسيق عناصر النصوص: .content h2 { font-weight: 300; font-size: 4em; padding: 0 0 10px; color: #333; margin: 0 1% 40px; text-align: left; box-shadow: 0 10px 0 rgba(0,0,0,0.02); text-shadow: 0 0 2px #fff; } .no-js .content h2 { padding: 40px 1% 20px; } .content p { font-size: 1.2em; line-height: 1.6; font-weight: 300; padding: 5px 8%; text-align: justify; }كل ما تبقى علينا الآن من تنسيقات CSS هو استخدام الـmedia queries. فإذا كانت الجافاسكربت معطلة فإننا لا نريد أن تظهر القائمة الجانبية إذا كان العرض أقل من 800px. كان هذا فقط مثالًا بسيطًا على كيفية التحكم بالعناصر تحت ظروف وشروط معينة. الـmedia query الأخيرة سوف تعمل على تكبير الخط قليلًا من أجل الأجهزة صغيرة الحجم كالهواتف. @media screen and (max-width: 800px){ .no-js .menu-panel { display: none; } .no-js .container { padding: 0; } } @media screen and (max-width: 400px){ .menu-panel, .content { font-size: 75%; } }كان هذا كل ما يتعلق بتنسيقات CSS ويتبقى علينا استخدام بعض الجافاسكربت. بعض الجافاسكربتسوف نبدأ اولًا بتخزين (caching) بعض العناصر حتى لا نضطر إلى استدعائها في كل مرة وسوف نقوم أيضًا بتهئية/مناداة إضافة BookBlock. نُريد أيضًا أن نقوم بضبط بعض الأمور بعد كل قلب/تغيير للصفحة وهذه الأمور هي رقم الصفحة الحالية والسلوك الخاص بإضافة jScrollPane. وهذا محدد في الاستدعاء الخلفي (callback) المسمى onEndFlip والممرر إلى إضافة BookBlock. var $container = $( '#container' ), // the element we will apply the BookBlock plugin to $bookBlock = $( '#bb-bookblock' ), // the BookBlock items (bb-item) $items = $bookBlock.children(), // index of the current item current = 0, // initialize the BookBlock bb = $( '#bb-bookblock' ).bookblock( { speed : 800, perspective : 2000, shadowSides : 0.8, shadowFlip : 0.4, // after each flip... onEndFlip : function(old, page, isLimit) { // update the current value current = page; // update the selected item of the table of contents (TOC) updateTOC(); // show and/or hide the navigation arrows updateNavigation( isLimit ); // initialize the jScrollPane on the content div for the new item setJSP( 'init' ); // destroy jScrollPane on the content div for the old item setJSP( 'destroy', old ); } } ), // the navigation arrows $navNext = $( '#bb-nav-next' ), $navPrev = $( '#bb-nav-prev' ).hide(), // the table of content items $menuItems = $container.find( 'ul.menu-toc > li' ), // button to open the TOC $tblcontents = $( '#tblcontents' ), transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, // transition event name transEndEventName = transEndEventNames[Modernizr.prefixed('transition')], // check if transitions are supported supportTransitions = Modernizr.csstransitions;لنقم أولًا بربط الأحداث ببعض العناصر التي تم تهيئتها سابقًا، كما أننا نريد أن نقوم بتهيئة jScrollPane لأول عنصر (العنصر الحالي). function init() { // initialize jScrollPane on the content div of the first item setJSP( 'init' ); initEvents(); }بما أننا سوف نقوم بتهيئة وإعادة تهيئة وتدمير jScrollPane فلنقم بتعريف دالة لذلك: function setJSP( action, idx ) { var idx = idx === undefined ? current : idx, $content = $items.eq( idx ).children( 'div.content' ), apiJSP = $content.data( 'jsp' ); if( action === 'init' && apiJSP === undefined ) { $content.jScrollPane({verticalGutter : 0, hideFocus : true }); } else if( action === 'reinit' && apiJSP !== undefined ) { apiJSP.reinitialise(); } else if( action === 'destroy' && apiJSP !== undefined ) { apiJSP.destroy(); } }سوف نحتاج إلى ربط العديد من الأحداث كالتالي: سوف يتم استدعاء الدالتين ()next و()prev الخاصتين بإضافة BookBlock وذلك عند النقر على أزرار التنقل أو السحب باستخدام الفأرة.سوف يظهر جدول المحتويات أو يختفي عند النقر على زر القائمة (tblcontents$).سوف يتم استدعاء الدالة ()jump الخاصة بإضافة BookBlock وذلك عند النقر على أي عنصر من عناصر جدول المحتويات.سوف يتم تهيئة jScrollPane عند القيام بتغيير حجم النافذة (window resize).function initEvents() { // add navigation events $navNext.on( 'click', function() { bb.next(); return false; } ); $navPrev.on( 'click', function() { bb.prev(); return false; } ); // add swipe events $items.on( { 'swipeleft' : function( event ) { if( $container.data( 'opened' ) ) { return false; } bb.next(); return false; }, 'swiperight' : function( event ) { if( $container.data( 'opened' ) ) { return false; } bb.prev(); return false; } } ); // show TOC $tblcontents.on( 'click', toggleTOC ); // click a menu item $menuItems.on( 'click', function() { var $el = $( this ), idx = $el.index(), jump = function() { bb.jump( idx + 1 ); }; current !== idx ? closeTOC( jump ) : closeTOC(); return false; } ); // reinit jScrollPane on window resize $( window ).on( 'debouncedresize', function() { // reinitialise jScrollPane on the content div setJSP( 'reinit' ); } ); } ظهور أزرار التنقل من عدمه سوف يعتمد على الصفحة الحالية، فإذا كُنّا في الصفحة الأولى فإننا سوف نرى فقط زر "التالي" وإذا كُنّا في الصفحة الأخيرة فإننا سوف نرى فقط زر "السابق": function updateNavigation( isLastPage ) { if( current === 0 ) { $navNext.show(); $navPrev.hide(); } else if( isLastPage ) { $navNext.hide(); $navPrev.show(); } else { $navNext.show(); $navPrev.show(); } }عندما نفتح جدول المحتويات (القائمة الجانبية) فإننا نريد أن تختفي عناصر التنقل وأن تظهر مرة أخرى عندما نقوم بإغلاق القائمة الجانبية. سوف نقوم بتحريك القائمة الجانبية باستخدام خاصية transition، وإذا لم تكن هذه الخاصية مدعومة من المتصفح فإننا سوف نستخدم fallback بسيط: function toggleTOC() { var opened = $container.data( 'opened' ); opened ? closeTOC() : openTOC(); } function openTOC() { $navNext.hide(); $navPrev.hide(); $container.addClass( 'slideRight' ).data( 'opened', true ); } function closeTOC( callback ) { $navNext.show(); $navPrev.show(); $container.removeClass( 'slideRight' ).data( 'opened', false ); if( callback ) { if( supportTransitions ) { $container.on( transEndEventName, function() { $( this ).off( transEndEventName ); callback.call(); } ); } else { callback.call(); } } } خاتمةهذا كان كل شيء يخص هذا الدرس أتمنى أن يكون قد أعجبك وأن تكون قد وجدته مفيدًا. ترجمة -وبتصرّف- للدرس Fullscreen Pageflip Layout لصاحبته Mary Lou.

قمنا في الدرس الأول من هذه السلسلة بإنهاء تصميم واجهة مدونة بناءً على مبادئ الخطوط والطباعة (typography) باستخدام برنامج فوتوشوب، وكنا قد استعملنا نظام شبكي (grid) صارم لتخطيط الصفحة. وفي هذا الدرس سنقوم بتحويل ذلك التصميم إلى نموذج HTML5. وفي الدرس التالي والأخير من هذه السلسلة سنقوم بتحويل هذا النموذج إلى قالب ووردبريس كامل. يمكنك الاطلاع على الدرس السابق الذي قمنا فيه بتصميم واجهة المدونة باستخدام الفوتوشوب. وقد قلنا بأن اسم القالب سيكون "Typo" وبأنه سيعتمد بشكل كلي على الـtypography من دون استعمال أي صور حتى يكون التركيز بالكامل على المحتوى. التحضير لبدء التكويدبما أنّ هذا التصميم بسيط ويرتكز بشكل كبير على مبادئ الـtypography فلن يكون هناك الكثير من الصور التي سنحتاج إلى استخراجها من الفوتوشوب، فالملفات الوحيدة التي سنحتاج إلى استخراجها هي الخلفية المزخرفة (background texture) وبعض الأيقونات. مع ذلك وحتى نجعل عملية التكويد سهلة فسوف نقوم باستخراج نُسخ من الأعمدة (columns) والخطوط الشبكية (grid lines) مما يسهل عملية موضعة ومحاذاة العناصر أثناء عملية التكويد. سنقوم بتحويل هذا التصميم باستخدام عناصر HTML5 (مثل <header> ،<nav> ،<section>)، وبذلك فإنّه من الضروري أن تعرف هذه العناصر وفيما إذا كانت مناسبة لهذا التصميم. بنية ملف HTML5<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Typo</title> <link href="style.css" rel="stylesheet" /> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'> <script src="js/scripts.js"></script> </head> <body> <div id="container">يبدأ الملف عادة بـDoctype لتعريف المتصفح بأننا نستخدم HTML5، وهناك أيضًا وسم <head> وبداخله وسم <title> يحتوي على عنوان المدونة ووسم <link> لربط ملف CSS الذي نريد استخدامه. لاحظ أيضًا أننا استعملنا خدمة Google We Fonts للحصول على الخط Droid Serif. من الضروري أن تنتبه أيضًا لأمر ما وهو أنه عندما تريد أن تقوم بتكويد أي صفحة باستخدام وسوم HTML5 فإنه لا يجب عليك دائمًا استخدام وسوم <section> بدلًا من <div>، ففي بعض الأحيان تكون وسوم <div> مناسبة أكثر (كأن تستخدمه كحاوي لباقي العناصر). <header> <h1><a href="#" title="Return to the homepage">Typo</a></h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>أحد الوسوم الجديدة في لغة HTML5 هو <header> ويعد استخدام هذا الوسم من أجل بناء وتكويد ترويسة الموقع أفضل من استخدام وسم <div> وإعطائه id بقيمة "header" كما يفعل الكثير من المطورين. ويمكنك بعد ذلك أن تضع وسم <nav> داخله ليحتوي على القائمة الرئيسية للموقع (main navigation menu). استخدمنا أيضًا وسم <h1> وبداخله وسم <a> ليحتوي على عنوان المدونة (ليعمل وكأنه شعار الموقع). إذا كنت تتذكر عندما صممنا الموقع في فوتوشوب فقد قمنا بوضع رقم بجانب كل عنصر من عناصر القائمة الرئيسية، لذلك قد تعتقد أنه من المناسب استعمال <ol> ولكن من وجهة نظر دلالية (semantically) فهذا غير صحيح لأنه لا يوجد علاقة ترابطية/تتابعية بين تلك العناصر فهي وضعت فقط من أجل تجميل تلك العناصر، وبالتالي سوف نقوم بإضافة هذه الأرقام لاحقًا باستخدام CSS. <div id="content" role="main"> <article> <h2><a href="#">Getting your stock photos seen</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article>قد تعتقد أيضًا أن استعمال <section> بدلًا من <div> هو الأنسب، ولكن هذا غير صحيح من ناحية دلالية (semantic). فالطريقة المفضلة هي استخدام <div> مع إضافة ARIA role بالقيمة "main" حتى نعطي للوسم معنى أفضل. وبالنسبة لمحتوى المدونة (المقالات) يمكنك استخدام <article> لاحتوائها. <nav id="pagination"> <ul> <li class="older"><a href="#">&laquo; Older posts</a></li> <li class="newer"><a href="#">Newer posts &raquo;</a></li> </ul> </nav> </div>أسفل المقالات يوجد روابط ترقيم الصفحات (pagination)، وفي العادة فإنّ هذه الروابط ليست بتلك الأهمية التي تجعلنا نضعها داخل وسم <nav> (استخدام <nav> ليس محصورًا فقط على القائمة الرئيسية للمدونة، بل يمكن استخدامه في عدة أماكن) إلّا أنني أرى أنّ روابط ترقيم الصفحات مهمة في أي مدونة للوصول إلى محتوى إضافي. <aside id="sidebar"> <section id="about"> <h3>About me</h3> <p>Typo is a WordPress theme based entirely on a balanced typographic design. A strict grid layout keeps everything tidy, allowing the content to shine. <a href="#" class="more">Find out more &raquo;</a></p> </section> <section id="categories"> <h3>Categories</h3> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Design</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Retro</a></li> </ul> </section>لاحظ أننا استخدمنا الوسم <aside> لاحتواء محتوى القائمة الجانبية (sidebar). لاحظ أنّ القائمة الجانبية تحتوي على عدة أقسام وبالتالي سيكون استخدام <section> لكل قسم في هذه الحالة مناسبًا أكثر من <div>. <section id="search"> <h3>Search</h3> <form method="get" action="#"> <fieldset> <input type="text" id="searchbar" placeholder="I'm looking for&hellip;" /> <input type="submit" id="searchsubmit" value="Search" /> </fieldset> </form> </section> </aside> وفي أسفل القائمة الجانبية يوجد مربع البحث، وسوف نستخدم بعض من الخصائص الجديدة في لغة HTML5. وأحد هذه الخصائص هو placeholder بحيث تمكننا هذه الخاصية من وضع نص داخل حقل الإدخال لإخبار المستخدم بما يجب عليه إدخاله في ذلك الحقل. </div> <div id="footer-container"> <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a> </li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div>بقي علينا الآن إضافة الـfooter، ففي هذه الحالة سنحتاج إلى وضعه خارج منطقة المحتوى الرئيسي لنسمح له بالتمدد على كامل الصفحة. يمكننا استخدام الوسم <footer> لاحتواء عناصر ومحتويات تلك المنطقة. ملف الـHTML كاملا<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Typo</title> <link href="style.css" rel="stylesheet" /> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'> <script src="js/scripts.js"></script> </head> <body> <div id="container"> <header> <h1><a href="#" title="Return to the homepage">Typo</a></h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div id="content" role="main"> <article> <h2><a href="#">Getting your stock photos seen</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article> <article> <h2><a href="#">Top 10 tips for new bloggers</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article> <article> <h2><a href="#">10 fantastic photography tips</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article> <nav id="pagination"> <ul> <li class="older"><a href="#">&laquo; Older posts</a></li> <li class="newer"><a href="#">Newer posts &raquo;</a></li> </ul> </nav> </div> <aside id="sidebar"> <section id="about"> <h3>About me</h3> <p>Typo is a WordPress theme based entirely on a balanced typographic design. A strict grid layout keeps everything tidy, allowing the content to shine. <a href="#" class="more">Find out more &raquo;</a></p> </section> <section id="categories"> <h3>Categories</h3> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Design</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Retro</a></li> </ul> </section> <section id="social"> <h3>social</h3> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Flickr</a></li> <li><a href="#">Behance</a></li> <li><a href="#">Last.FM</a></li> <li><a href="#">Youtube</a></li> </ul> </section> <section id="latest"> <h3>Latest posts</h3> <ul> <li><a href="#">Getting your stock photos seen</a></li> <li><a href="#">Top 10 tips for new bloggers</a></li> <li><a href="#">10 fantastic photography tips</a></li> </ul> </section> <section id="search"> <h3>Search</h3> <form method="get" action="#"> <fieldset> <input type="text" id="searchbar" placeholder="I'm looking for&hellip;" /> <input type="submit" id="searchsubmit" value="Search" /> </fieldset> </form> </section> </aside> </div> <div id="footer-container"> <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a></li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div> </body> </html>إضافة تنسيقات CSSبما أننا نملك الآن مستند HTML جاهز فيمكننا إضافة تنسيقات CSS للخروج بصفحة تشبه التي قمنا بتصميمها باستخدام الفوتوشوب. body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #dedede url(images/bg.jpg); font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #666; } a { color: #4b7ea9; font-style: italic; } a:hover { color: #105896; } header a, h2 a { color: #666; font-style: normal; text-decoration: none; } #container { width: 916px; margin: 0 auto; padding: 48px 22px 0 22px; background: url(images/grid.jpg); overflow: hidden; }يُستخدم السطر الأول من أجل إزالة أي تنسيقات افتراضية للمتصفحات (يسمى هذا "CSS reset")، وبعد ذلك يوجد داخل المحدد body الخصائص العامة للخطوط (ما يهمنا هنا هو الخاصية line-height، فقد أعطيناها القيمة 24px حتى تتوافق مع شبكة الخطوط القاعدية (baseline grid) التي استخدمناها في تصميم الواجهة في برنامج الفوتوشوب (وصورة خلفية. وبما أننا أضفنا الكود الخاص بخدمة Google Web Fonts في ملف الـHTML فيمكننا استخدام الخط Droid Serif في تنسيقات CSS كما يحلو لنا. أضفنا أيضًا التنسيقات الخاصة بالروابط ولكن استثنينا الروابط الموجودة في الترويسة (header) وعناوين التدوينات (الموجودة داخل وسم <h2>) حتى يتوافق كل شيء مع التصميم. قمنا أيضًا بتوسيط الحاوي الرئيسي باستخدام margin: 0 auto ووضعنا لهذا الحاوي صورة الشبكة (grid) على شكل خلفية حتى نستطيع موضعة عناصر الصفحة بكل سهولة بناءً على التصميم الموجود لدينا. header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; }استعملنا margins وpaddings بقيم مناسبة لوضع العناصر استنادًا على خطوط الشبكة مع استخدام بعض القيم العشوائية مثل 98px حتى نضمن أن كل شيء موضوع في مكانه الصحيح. يمكنك استخدام Developer tools أو Firebug لمساعدتك في عمل التعديلات من دون أن يصيبك صداع في رأسك بسبب وجود بعض الحسابات المعقدة قليلًا. هل تذكر عندما تكلمنا عن تلك الأرقام الموجودة بجانب عناصر القائمة الرئيسية؟ فقد قلنا بأننا سوف نستخدم CSS لإضافتها لأنها ليست مهمة كثيرًا ولأننا لا نريدها أن تظهر في ملف HTML، وللقيام بذلك سوف نستخدم المحددين :nth-child و :before مع الخاصية content التي سنضع الأرقام بداخلها. #content { float: left; width: 526px; margin: 0 98px 0 0; } #content article { margin: 0 0 67px 0; } #content article h2 { font-size: 30px; margin: 0 0 29px 0; font-weight: normal; } #content p { margin: 0 0 24px 0; } #content .postinfo { list-style: none; overflow: hidden; } #content .postinfo li { float: left; width: 136px; margin: 0 20px 0 0; font-style: italic; color: #a2a2a2; } #pagination { overflow: hidden; margin: 0 0 120px 0; } #pagination ul { list-style: none; } #pagination li { font-size: 18px; } #pagination li.older { float: left; } #pagination li.newer { float: right; }قمنا أيضًا بإضافة تنسيقات CSS الخاصة بالتدوينات ابتداءً بـdiv المحتوى. بالنسبة لعرض هذا الـdiv فقد قمنا بحسابه اعتمادً على عرض الأعمدة والمسافة بينها (columns and gutters) التي عندما نقوم بجمعها مع العرض الخاص بالقائمة الجانبية وأي margins فإنها تعطينا العرض الخاص بالـdiv الحاوي (container div). قمنا أيضًا بإضافة تنسيقات الخطوط الخاصة بعناصر h2 وmargin بقيمة مناسبة حتى يبقى كل شيء متوافقًا مع شبكة الخطوط القاعدية، واستعملنا الخاصية ()background: url لوضع صورة شعار ووردبريس في أسفل يسار الصفحة ولم ننسَ أيضًا العنصر back-top# إلى يسار الصفحة بحيث يأخذنا إلى أعلى الصفحة عند الضغط عليه. #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; }قمنا بإزاحة القائمة الجانبية إلى جانب المحتوى الرئيسي (عن طريق الخاصية float:left) وأضفنا التنسيقات الخاصة بالعناصر الموجودة داخلها ليصبح كل شيء كما هو موجود في تصميم الفوتوشوب. بعض عناصر القائمة الجانبية يمكن وضعها بجانب بعضها، لذلك قمنا بإضافة العرض المناسب لهذه العناصر حتى تتوافق مع التصميم. #sidebar #search #searchbar { width: 230px; height: 36px; float: left; border: 1px solid #c7c7c7; padding: 0 45px 0 15px; margin: -8px 0 0 0; background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 0%, #ffffff 16%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #e2e2e2 0%,#ffffff 16%); /* Chrome10+,Safari5.1+ */ font-size: 14px; font-style: italic; color: #a2a2a2; } #sidebar #search #searchsubmit { width: 17px; height: 17px; float: right; margin: -27px 15px 0 0; background: url(images/search-icon.png); text-indent: -9999px; }مربع البحث هو العنصر الوحيد في الموقع الذي يحتوي على تأثيرات بصرية، فيمكننا إضافة تأثيرات التدرج باستخدام خاصية gradient الموجودة في لغة CSS، وبالنبسة للأيقونة فيمكننا إضافتها باستخدام الخاصية ()background: url. #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px; }كا ما تبقى علينا الآن هو إضافة التنسيقات الخاصة بالـfooter. يمكننا محاكاة خلفية الـfooter عن طريق استخدام الخاصية background وإعطاؤها لونًا أسودًا بشفافية 20% (background: rgba(0,0,0,0.2. وبما أنَ الحاوي الخاص بالـfooter سيتمدد على كامل الصفحة فإننا سنضطر إلى إعطاء الـfooter قيم width وmargin مختلفة. تنسيقات CSS كاملةbody, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #dedede url(images/bg.jpg); font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #666; } a { color: #4b7ea9; font-style: italic; } a:hover { color: #105896; } header a, h2 a { color: #666; font-style: normal; text-decoration: none; } #container { width: 916px; margin: 0 auto; padding: 48px 22px 0 22px; background: url(images/grid.jpg); overflow: hidden; } header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; } #content { float: left; width: 526px; margin: 0 98px 0 0; } #content article { margin: 0 0 67px 0; } #content article h2 { font-size: 30px; margin: 0 0 29px 0; font-weight: normal; } #content p { margin: 0 0 24px 0; } #content .postinfo { list-style: none; overflow: hidden; } #content .postinfo li { float: left; width: 136px; margin: 0 20px 0 0; font-style: italic; color: #a2a2a2; } #pagination { overflow: hidden; margin: 0 0 120px 0; } #pagination ul { list-style: none; } #pagination li { font-size: 18px; } #pagination li.older { float: left; } #pagination li.newer { float: right; } #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; } #sidebar #search #searchbar { width: 230px; height: 36px; float: left; border: 1px solid #c7c7c7; padding: 0 45px 0 15px; margin: -8px 0 0 0; background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 0%, #ffffff 16%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #e2e2e2 0%,#ffffff 16%); /* Chrome10+,Safari5.1+ */ font-size: 14px; font-style: italic; color: #a2a2a2; } #sidebar #search #searchsubmit { width: 17px; height: 17px; float: right; margin: -27px 15px 0 0; background: url(images/search-icon.png); text-indent: -9999px; } #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px;}نموذج HTML5 النهائيأصبح نموذجنا جاهزًا الآن للاختبار قبل أن نقوم بتحويله إلى قالب ووردبريس. كل شيء يبدو جيدًا في المتصفحات الحديثة (إضافة إلى متصفح IE9). إذا أردت أن تدعم الإصدارات الأقدم من متصفح Internet Explorer فسوف تحتاج إلى المزيد من المجهود. تصفح النتيجة النهائية من هنا. ترجمة -وبتصرّف- للمقال Create a Typography Based Blog Layout in HTML5 لصاحبه Iggy.

سيكون هذا هو الدرس الأول من أصل درسين سنقوم من خلالهما بتصميم وتكويد واجهة موقع لغابة افتراضية اسمها "Pinewood Forest". سنستخدم في تصميم هذه الواجهة العديد من textures وخليط من اللونين الأزرق والرمادي. ستكون النتيجة النهائية كما في الصورة التالية: سيكون الهدف من هذا الموقع هو تعريف الزوار بهذه الغابة وما تقدمه وإعلامهم بالأحداث القادمة، وستحتوي خلفية الموقع على صورة كبيرة ثابتة لتسمح بتمرير (scroll) محتوى الموقع فوقها، كما سيتم تقسيم محتوى الموقع إلى عدة أجزاء رئيسية مع استخدام بعض الصور الفوتوغرافية لجذب انتباه الزائر. سنقوم في هذا الدرس بتصميم الواجهة الرئيسية للموقع باستخدام برنامج الفوتوشوب، أمّا في الدرس الثاني فسنقوم بتكويد التصميم باستخدام لغتي HTML وCSS. سنبدأ أولًا بإنشاء مستند جديد، وبما أنّ التصميم سيحتوي على صورة خلفية كبيرة فإننا سنحتاج إلى إنشاء مستند يستطيع استيعاب الشاشات ذات الدّقة والأبعاد الكبيرة (24 أو 27 انش). باستخدام أداة marquee قم برسم منطقة في منتصف الصفحة بعرض 960px وقم بوضع guides على طرفي ما قمت برسمه. ستكون هذه المنطقة هي المنطقة التي سوف تحتوي على المحتوى الرئيسي للموقع. قم بتحميل صورة ذات أبعاد كبيرة يمكنها تغطية معظم الصفحة (يمكنك تحميل الصورة التي استعملتها في هذا الدرس من هنا). قم الآن بإدراج هذه الصورة في المستند وقم بتعديل أبعادها لتتناسب مع الشاشات الكبيرة (لنقل 1920px) واجعل هناك هامش بسيط على كلا الجانبين، ثم ضع guide أسفل الصورة ليصبح كل شيء كما في الصورة التالية: قم الآن بإضافة Layer Mask للصورة واستعمل بعضًا من الفرش المائية (Watercolor brushes) لإبهات الأطراف. قم بتخفيف شفافية (opacity) الفُرش لإنشاء مظهر أجمل لتصبح الصورة وكأنها متداخلة مع الخلفية: قم باستعمال خطّي League Gothic وClarendon لإنشاء الشّعار الخاص بالموقع وقم بوضعه في منتصف الصفحة. قم بتعديل حجم الخطوط حتى يكون التركيز أكبر على كلمة "Pinewood" وقم بمحاذاة الكلمتين عن طريق زيادة المسافة بين الحروف (the tracking) في كلمة "forest". سيكون الشعار مشابهًا للصورة: قم بإضافة تأثيري Drop Shadow وGradient Overlay لكلمة "Pinewood". سوف يضفي كلا التأثيرين نوعًا من العمق على الشعار وسيجعلانه بارزًا أكثر في الصفحة. حاول أن تجعل التباين (contrast) قليل بين تأثير الـgradient وشفافية الظل (shadow) حتى يظهر بشكل أفضل: قم بإضافة/كتابة عناصر القائمة الرئيسية وقم بتوزيعاها على التساوي على كلا جانبي الشّعار. يمكنك استعمال خط Georgia كخط بديل عن Clarendon الذي استعملناه في الشّعار. يمكن تنفيذ التباعد بين حروف الكلمات (tracking) باستعمال الخاصية letter-spacing الموجودة في لغة CSS وهو ما سنفعله لاحقًا في الدرس القادم. قم برسم مستطيل كبير بين الـguides ذات العرض 960px التي وضعناها في خطوة سابقة وقم بملء هذا المستطيل بلون رمادي فاتح كاللون المستعمل في تأثير gradient الخاص بالشّعار: قم بإضافة Noise خفيف عن طريق الذهاب إلى: Filter > Noise > Add Noise ولتكن القيمة 2.5% لإعطاء نوع من الجمال الحسي على منطقة المحتوى في الموقع. اضغط على زر ctrl في لوحة المفاتيح وأبق يدك على هذا الزر وبعدها اضغط بزر الفأرة الأيسر على الصورة المصغرة (thumbnail) للطّبقة (layer) التي أنشأناها في الخطوة السابقة. ستلاحظ أنه تم اختيار المنطقة الخاصة بتلك الطبقة. قم الآن بالضغط بزر الفأرة الأيمن على ما تمّ اختياره واختر Transform Selection ثم قم بتقليص الطول والعرض بنسبة 40px واملأ تلك المنطقة باللون الأبيض، بعدها قم بإضافة تأثير Drop Shadow على تلك الطبقة: قم بتحميل فرش paint roller واستعملها في جعل الحواف الرمادية خشنة نوعًا ما وذلك عن طريق الرسم على قناع الطبقة (layer mask). فعّل التحديد (selection) الخاص بالمنطقة البيضاء واملأها باللون الأسود فوق قناع الطبقة (layer mask) لجعلها شفافة ثم بعد ذلك قم بإنقاص شفافية الحواف الرمادية إلى 60% حتى تظهر الخلفية التي وراءها: قم بتحميل صورة ما لوضعها كخلفية للمنطقة البارزة (main feature area) في الصفحة، ثم باستخدام أداة marquee selection قم برسم مستطيل كما ها موضح في الصورة أعلاه، بعد ذلك اضغط بزر الفأرة الأيمن على تلك المنطقة واختر Select Inverse ثم اضغط على زر delete من لوحة المفاتيح: يمكنك ملاحظة أن ألوان الصورة لا تتناسب كثيرًا مع الموقع، لذلك سنقوم ببعض التعديلات باستخدام أداة Curves. قم بتعديل قنوات اللونين الأخضر والأحمر على شكل يشبه حرف S واللون الأزرق على شكل حرف S ولكن معكوس كما هو موضح في الصورة: قم بتقليل تشبّع (saturation) الصورة لتخفيف حدّة الألوان. ستظهر ألوان هذه الصورة بعد التعديلات بشكل يتلائم مع ألوان التصميم: استعمل واحدة من فرش paint roller التي قمت بتحميلها سابقًا واستعملها لرسم خلفية لوضع بعض النصوص فوقها كما تظهر الصورة: قم بتعديل حجم وتباعد الحروف الخاصة بنص العنوان لإضفاء بعض الجمال، بعد ذلك اجعل حجم الخط للفقرة 14px: عليك الآن باستعمال نفس التأثيرات المستعملة في الشّعار (Gradient Overlay و Drop Shadow) وتطبيقها على النص الذي كتبته للتو: سنحتاج الآن إلى إضافة زر call to action لإخبار الزّوار إلى أين يمكنهم ان يتوجهوا بعد تصفحهم للصفحة الرئيسية. لفعل ذلك قم برسم مستطيل بحجم مناسب واملأه بلون أزرق متوافق مع اللون العام للموقع، ثم قم بإضافة فلتر noise خفيف لتخشين الزر قليلًا. بعد ذلك استعمل أداة المسح (Eraser tool) واختر pencil بعرض 1px وقم بمسح جزء من كل طرف من الأطراف الأربعة للزر. أنظر الصورة التالية: قم بإضافة تأثير Inner Glow للزر واستعمل لون أزرق أدكن بقليل من لون الزر نفسه. لتكن الإعدادات عبارة عن Normal blending mode وشفافية (opacity) بنسبة 100% وقم بتعديل الأحجام حتى تصبح ملائمة. قم أيضًا بإعطاء الزر إطار(stroke) بحجم 1px باستعمال لون أرزق أفتح بقليل من لون الزر: ويتبقى في الآخر إعطاء نص مُعبّر لوضعه على الزر، وتأكّد أيضًا أن جميع عناصر المنطقة البارزة (feature area) مرتّبة بشكل مناسب وأنيق: قم الآن بتعبئة منطقة المحتوى بالنصوص التي تريدها، واجعل حجم خط العنوان أكبر بقليل واجعله يتمدد على عرض الصفحة بالكامل. افصل النص المتبقي إلى عمودين؛ واحد عريض للمحتوى الرئيسي والآخر بعرض أصغر للمحتوى الجانبي (sidebar). يجب علينا أيضًا أن نميّز الروابط بلون مختلف عن باقي النص، لذلك قم بتلوين بعض الكلمات بلون أزرق واجلعها تحتوي على خط أسفلها (underline). في جزء المحتوى الجانبي (sidebar) سيكون هناك ثلاث مناطق تؤدي إلى مناطق أخرى في الموقع، بحيث تحتوي كل واحدة من هناك المناطق على صورة، عنوان وفقرة قصيرة. قم بإضافة خلفية مزخرفة وذلك باستعمال paint roller brushes وقم بعد ذلك بقص صورة خارطة ووضعها داخلها: استعمل paint roller brushes لإنشاء خلفية أخرى بلون أزرق أدكن بقليل من اللون الذي استعملته في الخطوة السابقة وستكون هذه الخلفية هي المكان الذي سيحتوي على العنوان الخاص بكل منطقة. لا تنسى قص الأجزاء المتداخلة لتتوافق مع طرف الصورة. قم بإضافة عنوان قصير فوق الخلفية التي أنشأناها في الخطوة السابقة وقم بإعطاءه نفس التأثيرات المستعملة في النص الموجود في الـfeature section: قم بوضع كل العناصر التي أنشأناها إلى الآن في مجلد واحد وبعد ذلك قم بنسخ ذلك المجلد مرتين وقم بالتعديل على عناصر كل مجلد بالشكل المناسب. أنظر الصورة: سوف نضيف الآن قسم "Upcoming events" أسفل النص الموجود في العمود الرئيسي. قم باستعمال نفس تنسيقات الخطوط الموجودة في الترويسة وباقي المحتوى الرئيسي، وبعدها قم بإنشاء جزء خاص بالتاريخ واستعمل لون رمادي مشابه للإطار(border): كل حدث سيحتوي على التاريخ، عنوان، بعض المعلومات ووصف بسيط: يمكننا الآن التخطيط لكيفية تحويل هذا التصميم إلى ملف HTML وهذا ما سنفعله في الدرس القادم بإذن الله. وبهذا نكون قد وصلنا إلى نهاية المقال، وأصبح لدينا تصميم جاهز يمكننا تحويله إلى صفحة ثابتة باستعمال لغتي HTML وCSS. ترجمة -وبتصرّف- للمقال Design a Textured Outdoors Website in Photoshop لصاحبه Iggy.

التوازن هو مفهوم هام في عملية تصميم المواقع الإلكترونية. لتحقيق التوازن، لا بد من معرفة كيفية استخدام التناظر (Symmetry) والتباين (Asymmetry) للوصول الى الجمال والوضوح. هذه الأدوات هي جزء لا يتجزأ في عملية تصميم موقع إنترنت موحد وجميل. من المهم أن نفهم هذه الفكرة بشكل صحيح قبل استخدامها. ما هو التناظر (Symmetry)؟نحن نرى الجمال في الأشياء المتناظرة وفي الناس المتناسقين. التناظر هو عامل أساسي في علوم الجمال والجماليات. ولكن ماذا يعني ذلك حقاً؟ التناظر هو نوع من توازن الانسجام والتناسب. في جميع الكائنات هناك تناظر وتوازن. وهذا الأمر قد تم إثباته بواسطة علوم الهندسة والفيزياء. الجاذبية هي عامل مهم في التناظر الطبيعي. وهذا هو السبب في أن معظم الأشياء في الطبيعة تتطور نحو التناظر. ولهذا نرى الجمال في التماثل والتناظر. أكثر أنواع التناظر شيوعاً هو التناظر الانعكاسي. والذي يعرف أيضاً بالتناظر الثنائي. هذا يعني أساساً وجود "نصفين متطابقين". أي أنه إذا قمت بطي الكائن على محوره الأوسط، فإنك ستلاحظ أن كلا الجانبين هما نصفين متطابقين أصلاً. الطبيعة مليئة بالأمثلة عن التناظر الثنائي كالفراشات، الأوراق، الحياة البحرية والخ. إنها تُظهر هذا الشكل من التناظر. كل الحياة النباتية والحيوانات تقريباً تُظهر هذا النوع من التناظر. هناك القليل فقط لا يتمتع بالتناظر الثنائي. وطبعاً التناظر الثنائي في الطبيعة هو تقريبي، ولا تتطابق الأنصاف بشكل تام عند طيها على محورها الأوسط. أحد أفضل الأمثلة عن هذا التناظر هو الجسم البشري. كل نصف من الجسم البشري إن كان الأيمن أو الأيسر هو انعكاس للنصف الآخر. أمّا داخلياً، فالأمر مختلف. حيث أن أعضاء الجسم الداخلية لا تعكس أنصاف بعضها البعض. وهناك أنواع عديدة من التناظر الانعكاسي (الثنائي) في الطبيعة، مثل التناظر الأفقي (وهو الأكثر شيوعاً)، العمودي، القطري والخ. التباين (Asymmetry)التباين (Asymmetry) يظهر جلياً في غياب التناظر. ويمكن تحقيق التوازن التركيبي في التباين. التباين شائع أيضاً في الطبيعة وعلم الأحياء. معظمنا إما أيمن أو أعسر في استخدام اليد. وإما أن يكون نصف دماغنا الأيمن أو الأيسر هو المهيمن. أعضاؤنا الداخلية ليست متطابقة تماماً. التباين يخلق الطاقة والتوتر. في حين أن التناظر هو ثابت ومنتظم. الجمال في التباين (الصورة من WIKI) التباين في لوحة فنية رائعة للفنان Wassily Kandinsky إنك تشعر بالحركة في التباين. ولهذا السبب تبدو التصاميم المعمارية واللوحات الفنية المتباينة أكثر إثارةً للاهتمام. في التباين حرية، لا يمكن احتواؤها أو منعها، على عكس التناظر. ولكن إذا نظرنا إلى سلبيات التناظر فهو قد يكون مملاً ومُنهِكاً للعين إن لم يكن دقيقاً وصحيحاً وسيكون المنظر العام فوضوياً ومربكاً. التناظر (Symmetry) ضد التباين (Asymmetry) في تصميم المواقعالتوازن جزء لا يتجزأ في تصميم المواقع، ولهذا فإن الاستخدام المناسب لكلا الحالتين (التناظر والتباين) مهم جداً. التناظر والتناسق في مواقع الانترنت غالباً ما تكون محبـِطة لأنها تجعل التصميم يبدو مملاً وساكناً، وسيكون هناك نقص في الطاقة الحيوية للتصميم وهذا ما يجعل مهمة جذب اهتمام المتابعين صعبة. ولكن مواقع الانترنت المتناظرة ليست دائماً بهذا السوء، وهذا يعتمد على ماهية مواضيع الموقع. المواقع المتناظرة لها مزاياها الخاصة، التناظر في تصميم الموقع يعطيه التنظيم والتوازن، سيبدو الموقع نظيفاً ومرتباً، وهذا مهم خصوصاً إذا كان الموقع محترفاً ويحوي مثلاً معلومات عن المركبات والسيارات بأنواعها. تصاميم المواقع المتباينة وغير المتناسقة هي أكثر إثارةً للاهتمام وأكثر ديناميكية، بالمختصر المواقع المتناظرة تساعد على التذكّر أما المتباينة فهي مثيرة للاهتمام. وهذه أمثلة عن مواقع متناظرة: هذا مثال رائع لإظهار التناظر في مواقع الإنترنت، موقع Duuel مخصص لإيجاد أفضل المصممين "بشرط أن يكونوا" مغامرين ممن يستطيعون التنافس مع زملائهم المصممين، حيث أن التنافس مع الآخرين يُظهر أفضل المواهب لدى المصمم، ولا يحق لهم سوى استخدام التناظر الثنائي، والذي يُظهِر التناغم بين الموهبة والذكاء في تقديم عروضهم. يوجد شكل آخر من أشكال التناظر والتناسق وهو التناظر الدوراني (Rotational Symmetry) والذي يساعد على خلق الإيقاع والتناغم والتدفق. وهو يوجّه عيون المشاهدين إلى أين ستكون البداية وأين ستكون الخطوة التالية. التناظر الانسحابي (Translational) ويطلق عليه أيضاً التناظر التعددي أو التناظر الانتقالي، وهو شكل آخر من أشكال التناظر والذي يكون فيه الكائن مكرراً خلال سير مخطط التصميم، مع الإبقاء على نفس التوجه، الجحم والشكل. إن كنت تعرف مبدأ الجشطالت (Gestalt principle) فيجب أن يكون مألوفاً لديك أن دماغنا سينخدع ليقودنا الى أين يتجه التصميم، وأيضاً لتحقيق التوازن في رؤوسنا. Duplos هو موقع رائع يستخدم تقنية التباين، فعلى الرغم من أن العناصر في الموقع لا تعكس بعضها البعض، إلا أنها تحقق التوازن التركيبي للموقع، وهو ما يجعل الموقع يبدو جميلاً و مثيراً للاهتمام في نفس الوقت. يمكنك أيضاً أن تجمع بين التناظر والتباين معاً، حيث يمكنك تحقيق توازن متناغم من خلال دمج التناظر والتباين في تصميم موقعك. استخدم عناصر متناظرة لجعل مخطط التصميم احترافياً وأنيقاً، ضع المعلومات ضمن هذا السياق ليصبح تذكّرُها سهلاً، واستخدم العناصر المتباينة لجذب الانتباه، خصوصاً أن جذب اهتمام المشاهد هو الأهم. خير مثال على عملية الدمج بين الأسلوبين هو موقع جوجل الجديد، جميعنا نعرف الموقع القديم لجوجل، إنه متناظر تماماً، لقد اعتمدوا على المساحة البيضاء بدون استخدام أية عناصر إبداعية على الاطلاق، وهو موقع مفيد جداً، ومع ذلك هو ممل وجامد. الآن يتيح لك الموقع الجديد الاختيار بين عدة تصاميم وتغييرها، كما يتيح لك الاختيار ضمن مجموعة كبيرة من الثيمات (المواضيع) والصور، حتى أنه يمكنك الاختيار من ضمن صورك على موقع Picasa. شعار جوجل الآن أصبح أبيضاً عوضاً عن الشعار الملون المألوف، ولكن كل الأشياء الأخرى على حالها: الروابط، موقع الشعار وحجمه وشريط البحث وسط الموقع. الموقع الجديد مزَجَ بين التناظر والتباين بشكل هادئ ولطيف بنجاح تام. العناصر المتباينة أكثر ظهوراً ولفتاً للانتباه من العناصر المتناظرة، لهذا يجب أن يكون التخطيط العام والخلفية خاملة بصرياً، وبالتالي التناظر مهم لهذه العناصر، وينبغي استخدام التباين للتصاميم الفردية التي تهدف إلى لفت الانتباه وكسر الملل. المزيد من الأمثلة عن مواقع مثيرة للإعجابإن معظم المواقع لا تتبع أسلوباً واحداً فقط (متناظر أو متباين) إنما تستخدم كلا الطريقتين معاً، وفيما يلي بعض الأمثلة عن مواقع رائعة تستخدم التناظر والتباين معاً: خلاصةسنلخص هذه المقالة بتقديم بعض النصائح التي تساعدك على استخدام التناظر (Symmetry) والتباين (Asymmetry) لصالحك: التناظر عظيم جداً لهيكل التصميم الأساسيالعناصر المتكررة تخلق مساحة هادئة ومتوازنة. التصميم المتناظر يستطيع أن يخلق التوازن، وفي نفس الوقت يحافظ على المساحة من أجل النصوص والصور. التباين رائع للفت انتباه المشاهدينالإكثار من التناظر يسبب الملل حيث ستبدو وكأنها عُرضت مرات لا حصر لها. لجعل تصميم الموقع أكثر إثارةً للاهتمام أضف بعض العناصر المتباينة هنا وهناك وذلك لجذب الانتباه والتخلص من الرتابة في التصميم. التباين أثقل بصرياً، لهذا يوجّه عيون المشاهدين إلى المنطقة المنشودة. مع التباين، يجب أن يتم التركيز على التوازن التركيبي دائمانعم، التباين مثير للاهتمام ولكنه يبدو ناقصاً وغير مصقول كما يجب، بما أن العناصر المختلفة لها أوزان مختلفة، فيجب الحذر عند ترتيب العناصر حتى تبقى متوازنة من جميع الجوانب، هذا سيمكّنك من التحكم بسير العمل على التصميم وسيجعله يبدو جميلاً، مثيراً للاهتمام ومصقول. اتبع غريزتك في التصميمإننا نملك عيوناً تمكننا من رؤية ما هو جميل وما هو عكس ذلك، لقد تدربنا على ما يبدو لنلاحظ التوازن البصري من عدمه. فإذا كنا نرى التصميم يبدو مشوشاً، مربكاً أو حتى مملاً، لربما هو كذلك فعلاً. اللجوء الى الأساسياتلا تبالغ في تصميم الموقع ككل، كن فناناً، لكن تذكّر أن غالبية المشاهدين ليسوا كذلك. لا تبالغ في التفكير أو زيادة العناصر في التصميم، فقط انظر إلى التصميم كشخص عادي، تجنب الخلط والتشابك في التصميم لتجعل المعلومات تتدفق بسهولة وسلاسة إلى المشاهدين. ترجمة -وبتصرّف- للمقال: Web Design Symmetry and Asymmetry. حقوق الصورة البارزة: Designed by Freepik.

إنّ إتقان تخطيط صفحات الويب بدون إتقان لغة CSS سيكون كمن يحاول السباحة على أرضٍ جافة، ولكن على عكس السباحة التي عندما تتقنها تبقى معك طول الحياة فإنّه لا يوجد مرحلة يمكنك عندها التوقف عن التعلم وتقول أنّك أتقنت CSS فهذه اللغة تتطور بسرعة يومًا بعد يوم. كما أنّ تعلم وإتقان هذه اللغة سيكون أكثر تحديًا بسبب وجود إختلافات في كيفية تطبيق ودعم هذه اللغة من قبل المتصفحات (حتى بين الإصدارات المختلفة للمتصفح نفسه). ولمدة تناهز العشر سنوات كان مطوّرو الويب يتصارعون ويعانون من الدعم المتشتت وغير المتناسق لخصائص CSS3 في كل إصدار جديد للمتصفحات. ولكن لنتفق على شيء ما وهو أنّ إتقان CSS شيء لا بد منه لأي مطور ويب جيد. وفي هذا المقال سوف نأخذكم في جولة لنتعرف على مبادئ CSS في تخطيط الصفحات وسوف نبدأ من التقنيات التي ظهرت في CSS2 وانتهاءً بآخر ما ظهر في CSS3. ملاحظة: سوف نستخدم HTML5 وSass في هذا المقال. ويمكنك الحصول على الشيفرات البرمجية كاملة من هنا. إحدى حالات الاستخدامإنّ من أفضل الطرق لتعلم أي تقنية هو أن يكون هناك حالة استخدام محددة تحاول دعمها أو أنّك تبحث عن حل لمشكلة ما. وحتى نهاية هذا المقال سنركز على حالة استخدام بمجموعة من المتطلبات. ستكون حالة الاستخدام التي سنعمل عليها عبارة عن تخطيط لتطبيق ويب (Web App) مع بعض السلوكيات المتغيرة/الديناميكية (dynamic)، بحيث سيكون هناك عناصر ثابتة في الصفحة مثل الترويسة (header) والتذييل (footer) وقائمة رئيسية (navigation) وقائمة فرعية (sub-navigation) وقسم محتوى قابل للتمرير(scrollable content). ستكون المتطلبات الخاصة بتخطيط الصفحة كما يلي: التخطيط الأساسي:الترويسة، التذييل، قائمة رئيسية وقائمة فرعية وهذه العناصر ستبقى ثابتة عند التمرير (scroll).سوف تشغل القائمة الرئيسية والقائمة الفرعية أي مساحة عمودية فارغة.سوف يشغل قسم المحتوى المساحة المتبقية في الصفحة وسوف يحتوي على منطقة قابلة للتمرير.السلوكيات المتغيرة/الديناميكية:سوف تحتوي القائمة الرئيسية على أيقونات فقط بشكل افتراضي، ولكن يمكن لها أن تتمدد لتحتوي على بعض النصوص (وأيضًا تتقلص/تنطوي لتظهر الأيقونات فقط مرة أخرى). اختلافات في تخطيط الصفحة:ستحتوي بعض الصفحات على قائمة فرعية بجانب القائمة الرئيسية والبعض الآخر لا. استخدام تقنيات CSS2 هذا هو تخطيط HTML5 الذي سوف نستخدمه: <body class="layout-classic"> <header id="header"></header> <nav id="nav"></nav> <aside id="subnav"></aside> <main id="main"></main> <footer id="footer"></footer> </body> 1. الموضعة الثابتة (position: fixed)في CSS2 يمكنك الحصول على عناصر ثابتة في الصفحة (مثل الترويسة، التذييل...الخ) عن طريق توظيف نموذج تخطيط يَستخدم الموضعة الثابتة (يستخدم position: fixed). سوف نستخدم أيضًا الخاصية z-index لنتأكد بأنّ العناصر الثابتة سوف تظهر فوق جميع العناصر الأخرى في الصفحة، بحيث تقوم هذه الخاصية بتحديد مكان العنصر إمّا أعلى أو أسفل عنصر آخر، فالعناصر التي تحتوي على قيمة z-index كبيرة سوف تظهر فوق العناصر التي تحتوي على قيمة z-index أقل. هناك شيء مهم يجب عليك تذكره وهو أنّ خاصية z-index لن تعمل إلا بوجود خاصية position، أي أنّك إذا استخدمت خاصية z-index على أحد العناصر ولكنك لم تستخدم خاصية position على نفس العنصر فإنّ خاصية z-index لن تعمل. وبالنسبة لنا، فسوف نستخدم القيمة 20 (وهي أعلى من القيمة الافتراضية) حتى نُبقي العناصر الثابتة فوق العناصر الأخرى في الصفحة. وسوف نستخدم خاصية width ونعطيها القيمة 100% وهذا سيسمح للعناصر بالتمدد أفقيًا بالقدر الذي تستطيعه. #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; }هذا بالنسبة للترويسة والتذييل، ولكن ماذا بالنسبة للقائمة الرئيسية (nav#) والفرعية (subnav#)؟ 2. تقنية التوسع/التمدد في CSSبالنسبة للقائمة الرئيسية (nav#) والفرعية (subnav#)، سوف نستخدم تقنية تسمى بتقنية التمدد (CSS Expantion) بحيث تُستخدم هذه التقنية على العناصر التي تحتوي على الخاصية position: fixed (بحيث يبقى العنصر ثابت في الصفحة) أو الخاصية position: absolute (بحيث يتم موضعة العنصر بناءً على أقرب عنصر حاوي يحتوي على الخاصية position بقيمة غير القيمة static). يمكن الحصول على تمدد رأسي/عمودي (vertical) باستخدام الخاصيتين top و bottom وإعطائها قيم محددة بحيث يتمدد العنصر عموديًا ليستخدم المساحة العمودية المتبقية وفقًا لتلك القيم، أي أنّ ما نقوم به هو ربط الجزء العلوي للعنصر بمسافة محددة من الجزء العلوي للصفحة وكذلك ربط الجزء السفلي للعنصر بمسافة محددة من الجزء السفلي للصفحة مما سيؤدي إلى تمدد العنصر ليشغل المساحة العمودية بين هاتين النقطتين (العلوية والسفلية). ونفس الأمر ينطبق على التمدد الأفقي بحيث نستخدم الخاصيتين left و right ونعطيها قيم محددة بحيث يتمدد العنصر أفقيًا ليشغل المساحة الأفقية المتبقية وفقًا لتلك القيم. وبالنسبة لنا في هذه الحالة فإننا نريد أن نستخدم التمدد العمودي: #nav, #subnav { position: fixed; top: 6em; /* ترك مسافة فوق الترويسة */ bottom: 4em; /* ترك مسافة تحت التذييلة */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; }3. الموضعة الإفتراضية/الساكنة (static)سوف نستخدم الموضعة الساكنة لموضعة منطقة المحتوى القابلة للتمرير، بحيث تظهر العناصر وتتموضع بالترتيب كما تظهر بالتدفق الطبيعي للمستند (كما تظهر في ملف HTML)، وبما أنّ جميع العناصر الأخرى في الصفحة متموضعة بشكل ثابت فإنّ هذا العنصر سيكون هو العنصر الوحيد الذي يظهر وفقًا للتدفق الطبيعي للمستند. ونتيجة لذلك فكل ما نحتاجه لموضعة العنصر بشكل مناسب هو استخدام الخاصية margin حتى لا يحصل تداخل بينه وبين العناصر الأخرى الثابتة (الترويسة، التذييل والقائمتين الرئيسية والفرعية): #main { margin: 6em 0 4em 20em; }وبهذا نكون قد أتممنا متطلبات التخطيط الأساسي باستخدام CSS2 وبقي علينا أن نهتم بأمر المتطلبات الإضافية الخاصة بالسلوكيات المتغيرة/الديناميكية. 4. السلوكيات المتغيرة/الديناميكية باستخدام تقنيات CSS2ذكرنا سابقًا بأنّ القائمة الرئيسية سوف تحتوي على أيقونات فقط بشكل افتراضي، ولكن يمكن لها أن تتمدد لتحتوي على بعض النصوص (وأيضًا تتقلص/تنطوي لتظهر الأيقوانات فقط مرة أخرى). لنبدأ أولًا بإعطاء القائمة الرئيسية عندما تكون متمددة عرضًا (width) بقيمة 5em زيادة على عرضها الرئيسي (أي يصبح عرضها عندما تتمدد 10em)، وسوف نقوم بذلك عن طريق إنشاء class باسم "expanded" بحيث يمكننا ديناميكيًا (باستخدام الجافاسكربت) إضافته أو إزالته من القائمة الرئيسية: #nan { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } } يمكنك بالأسفل رؤية كود الجافاسكربت (jQuery في حالتنا هذه) الذي سوف نستخدمه لإضافة أو إزالة الـclass الذي يحمل الاسم "expanded" عندما يقوم المستخدم بالنقر على أيقونة القائمة: $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); });يمكن الآن للقائمة الرئيسية أن تتمدد أو تتقلص بكل سهولة. ولكن هناك مشكلة صغيرة وهو أنه عندما تتمدد القائمة الرئيسية فإنها سوف تتداخل مع القائمة الفرعية وهو ما لا نريده بكل تأكيد، ولذلك سوف نحتاج إلى تعديل الأمور قليلًا. يمكنك الآن رؤية واحدة من المشاكل/القيود في CSS2، فسوف نحتاج الآن إلى كتابة العديد من الأكواد الخاصة بقيم العناصر المتموضعة بشكل ثابت، ونتيجة لذلك فسوف نحتاج إلى تعريف classes باسم "expanded" إضافية حتى نسمح للعناصر الأخرى بأن تتموضع لاستيعاب القائمة الرئيسية عندما تتمدد، وبذلك سوف نحتاج إلى كتابة المزيد والمزيد من الأكواد الإضافية. #subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* تحريكها لليمين */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* تحريكها لليمين */ } }سوف نحتاج أيضًا إلى إضافة أكواد جافاسكربت إضافية لإضافة أو إزالة الـclass "expanded" لتلك العناصر عندما يقوم المستخدم بالنقر على القائمة الرئيسية. $('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });سيكون كل شيء أفضل الآن. 5. اختلافات تخطيط الصفحة باستخدام تقنيات CSS2كنا قد ذكرنا مسبقًا بأنّ بعض الصفحات لن تحتوي على قائمة فرعية. ولنكون أكثر دقة فإننا نريد للقائمة الفرعية أن تختفي عندما يضغط المستخدم على أيقونة "المستخدمين" (users) الموجودة في القائمة الرئيسية. سوف نبدأ أولًا بإنشاء class بالاسم "hidden" وفيه الخاصية display: none: hidden { display: none; }كما أننا سنستخدم الجافاسكربت لإخفاء القائمة الفرعية وذلك عن طريق تطبيق الفئة "hidden" على هذه القائمة عندما يقوم المستخدم بالنقر على أيقونة "المستخدمين" (users): $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); });وبهذا يمكن للعناصر أن تختفي عند النقر على أيقونة "المستخدمين" ولكن المساحة التي كانت تحتلها سوف تبقى غير مستخدمة بدلًا من أن تقوم العناصر الأخرى باستخدام تلك المساحة. وحتى نحصل على السلوك المطلوب عندما نقوم بإخفاء القائمة الفرعية فإننا سوف نستخدم المحدد المجاور(adjacent sibling selector) وهو يأتي على شكل إشارة الجمع +. 6. المحدد المجاوريُستخدم المحدد المجاور لتحديد عنصرين واختيار العنصر الثاني الذي يأتي مباشرة بعد العنصر الأول. فعلى سبيل المثال، سيقوم الكود التالي باختيار العنصر الذي يحمل ID بقيمة main والذي يأتي مباشرة بعد العنصر الذي يحمل ID بقيمة subnav: #subnav + #main { margin-left: 20em; }استخدمنا الكود في الأعلى لإعطاء العنصر main# الخاصية margin-left: 20em فقط إذا كان هذا العنصر يأتي مباشرة بعد العنصر subnav#. ولكن عندما يتمدد العنصر nav# (بحيث يتم إضافة الفئة expanded إلى العنصر main# بناءً على الكود الذي كتبناه سابقًا) فإننا نريد للخاصية margin-left أن تحتوي على القيمة 25em. #subnav + #main.expanded { margin-left: 25em; }وأمّا إذا كانت القائمة الفرعية subnav# مخفية فإننا نريد للخاصية margin-left الخاصة بالعنصر main# أن تحتوي على القيمة 6em: #subnav.hidden + #main { margin-left: 6em; }ملاحظة: واحدة من مساوئ استخدام المحدد المجاور هو أن الـDOM سوف يحتوي دائمًا على العنصر subnav# حتى لو كان غير ظاهر في الصفحة. وأخيرًا، إذا كان العنصر subnav# مخفيًا وnav# متمددًا فإننا نريد الخاصية margin-left للعنصر main# بأن تكون بالقيمة 11em: #subnav.hidden + #main.expanded { margin-left: 11em; }خاتمةكل شيء إلى الآن يظهر في مكانه الصحيح من دون الحاجة إلى استخدام أكواد جافاسكربت كثيرة، ولكن يمكنك ملاحظة أن الكود يمكن أن يكون كبيرًا ومعقدًا إذا ما أردنا إضافة المزيد من العناصر إلى الصفحة. لاحظ أيضًا أنّه باستخدام CSS2 سيكون هناك الكثير من الأكواد لموضعة كل شيء في مكانه المناسب. لذلك سوف نقوم في الدرس القادم باستخدام بعض تقنيات CSS3 الجديدة وإعادة تخطيط الصفحة باستخدام تلك التقنيات. ترجمة -وبتصرّف- للمقال CSS Layout Tutorial: From Class+ic Approaches to the Latest Techniques لصاحبه Laureano Martin Arcanio.

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

أصبحت قابلية الوصول accessibility من أبرز المواضيع والنقاشات تداولًا بين مطوّري الويب، وازداد اهتمام أصحاب المواقع حول قابلية الوصول ومدى تكيّف مواقعهم مع أغلب الأجهزة والشاشات، وأعطى هذا الاهتمام المتزايد المجال لبزوغ شكل جديد كليًا من أشكال التصميم وحمل الاسم ‹‹تصميم المواقع المتجاوبة Responsive Web Design››، فمع زيادة حصّة أجهزة الهاتف والأجهزة اللوحيّة، أصبح من الضروري التأكّد من تجاوبيّة وتوافقيّة الموقع مع أي جهاز يستطيع الوصول إلى الإنترنت. يهتم كل من التصميم الُمتلائم AWD والتصميم الُمتجاوب RWD في كيفيّة عرض صفحة الموقع على مختلف الأجهزة والشاشات، إذا ما الذي يجعل لكل منهما كينونة خاصة به؟ هذا ما سيُجاب عليه في السطور القادمة في توضيح للفروقات الجوهرية بين التصميم المتجاوب RWD والتصميم المتلائم AWD. ما هو التصميم المتلائم (Adaptive Web Design (AWD؟يَستخدم التصميم المُتلائم الخادوم server في تحديد الجهاز المستخدم في تصفّح الموقع، بمعنى آخر، سيُستخدم الخادوم في تحديد فيما إذا كان الموقع يُعرض على جهاز سطح مكتب أو هاتف ذكي smartphone أو جهاز لوحي tablet، وكما سيُستخدم قالب template منفصل لكل جهاز على حِدة، بمعنى سيختلف القالب template المعروض على شاشة الحاسب المحمول عن القالب المعروض على شاشة الهاتف الذكي، وبما أن الموقع المصمم باستخدام التصميم المتلائم مستضاف على مجال domain خاص به، فإن صفحات الموقع تحمّل بسرعة عالية نسبيًا. ما هو التصميم المتجاوب (Responsive Web Design (RWD؟يَستخدم التصميم المُتجاوب شيفرة CSS محدّدة لتعديل مظهر الموقع وفقا للجهاز الذي يستعرض الموقع، والبيانات المرتبطة بكل جهاز تُحمّل بصرف النظر فيما إذا كانت تُستخدم أم لا، وتمامًا عكس المواقع المصممة باستخدام التصميم المتلائم، فإن المواقع المصممة باستخدام التصميم المتجاوب تُحمّل بسرعة منخفضة نسبيًا. ما هو الفرق إذا؟يكمن الاختلاف الجوهري بين التصميم المتلائم والتصميم المتجاوب في أن المتلائم سيتغيّر تغيّرًا كليًّا لكي يُلائم أبعاد الشاشة المختلفة، بينما المتجاوب سيتغيّر بانسيابية ليتجاوب مع مجموعة من الأجهزة وقياسات الشاشات، وعليه سنستعرض بقيّة الفروقات التفصيليّة بين التصميم المتلائم AWD والتصميم المتجاوب RWD: يَستوجب استخدام التصميم المتلائم تطوير موقع منفصل إما عن طريق عناوين URLs منفصلة أو عن طريق تطوير شيفرة HTML/CSS منفصلة، وبالمقارنة بالمثل، فإن التصميم المتجاوب RWD يعتمد على HTML/CSS3 و جافا سكريبت كليًّا، مما يوفّر على المطوّر تطوير وصيانة عناوين URLs منفصلة و/أو HTML/CSSs.إن صُمّم الموقع باستخدام التصميم المتلائم، فإن إجراء التعديلات سيَستوجب مراجعة SEO (تحسين محركات البحث) والمحتوى وبُنية الموقع، وبعكس ذلك فإن صُمّم الموقع باستخدام التصميم المتجاوب، فإن إجراء التعديلات سيكون سهلًا للغاية لأن إجراءات تحسين محركات البحث والمحتوى والروابط links موجودة جنبًا إلى جنب مع HTML/CSS وجافا سكريبت JavaScript.بينما يَعتمد التصميم المتلائم على قياسات الشاشة المحددة مسبقًا، فيعتمد التصميم المتجاوب على شبكة grid مرنة وسلسة، بمعنى آخر، يتطلّب التصميم المتجاوب مزيدًا من الشيفرة البرمجية ليلائم صفحات الويب مختلفة القياسات، بينما يملك التصميم المتلائم تصميم معدّ مسبقًا تحدده برمجية معينة من جهة الخادوم في سبيل ملائمة قياسات الشاشة المختلفة.يقع الحمل الأكبر على عاتق الخادوم في معالجة تجاوبيّة الصفحات مع التصاميم المتلائمة، بينما يقع الحمل الأكبر على عاتق المُتصفّح (جهة العميل) في معالجة تجاوبيّة الصفحات.يستغرق التصميم المتلائم وقتًا أطول في التطوير، على عكس التصميم المتجاوب والذي يتطلّب وقتًا أقل نسبيًا.إن المواقع المصممة باستخدام التصميم المتلائم AWD تتعامل مع صور محسنة ومعدّلة لكل جهاز وقياس شاشة، بينما المواقع المصممة باستخدام التصميم المتجاوب RWD تحمّل الصور أوّلًا على المتصفّح ومن ثم يُعاد تحجيمها لتُلائم الجهاز الموافق لها.خاتمةبصرف النظر فيما لو اختير التصميم المتلائم Adaptive Web Design أو التصميم المتجاوب Responsive Web Design، فمن المهم وجود استراتيجية معينة من أجل أجهزة الهاتف، والتأكّد دائمًا من أن محتوى الموقع مُحسّن للزوّار مهما كان الجهاز المستخدم في تصفّح الموقع، طبعًا مع الحفاظ على موقع جميل ومتناغم الألوان والعناصر. ترجمة وبتصرّف للمقال Responsive Web Design vs Adaptive Web Design - Whats the Difference لصاحبه Mike Swan.