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

تحدثنا في مقال سابق عن الخريطة التسويقية للمنتج وتناولنا أنواع العملاء وترتيبهم في قمع المبيعات، ونحن هنا الآن بصدد تقديم بعض النصائح في كيفية الرد على العملاء المزعجين الذين يلتقي بهم فريق الدعم الفني أثناء المحادثات بصورة يومية؛ وضعنا مجموعة من النقاط الإرشادية لضمان محتوى كتابي إحترافي. ولكشف الغموض حول هذه الإشكالية نقدم هنا بعض النصائح العامة التي يجب على الكاتب غير المتخصص الإلمام بها، مرفقة بأمثلة توضيحية تساعد في إيصال المعنى. وبالتأكيد يمكنك إضافة لمساتك الخاصة وتطوير بعض النقاط حتى تلائم ما تقدمه. 1. تحدث بثقة إذا كنت ملمًا بالموضوع الذي تتحدث عنه فهذا سيجعلك أكثر ثقة أثناء كتابة ردودك على العملاء. فقط لا تكن متعجرفًا أو تشعر القرّاء بأنك تتعالى عليهم وقدم أفكارًا جديدة بدلًا من تقديم رأيك بطريقة جامدة ومعقدة، ودع المتلقي يشعر أنك ملم ومتمكن مما تكتب عنه. إليك بعض الأمثلة على ذلك: رأي مباشر توصيل المعنى بطريقة جامدة: كانت النسخة الأولية من جوجل+ أضعف مما كان متوقعًا لها، حيث قال أحد المعلقين أنه من الممكن أن تشكل خطرًا على خط الإنتاج المميز لعملاق البحث. توصيل المعنى بطريقة واعية: جوجل+ كانت كارثية ولم يستخدمها أحد. بغض النظر عن عدد عوامل الارتباط الجديدة التي اخترعوها فقد عرف الجميع أنها سيئة حتى موظفي جوجل أنفسهم. أفكار جديدة تبين مدى إلمامك بموضوع الحوار التعبير بطريقة تقليدية: هل سينجح هذا المنتج؟ لا أحد يعلم لكن هناك بعض المعايير التي يجب أن يلتزموا بها أولًا، نتمنى لهم التوفيق. التعبير بطريقة إبداعية: أرى ما قدموه، ولكن سأقوم بتغيير شيئين وهما .. تبسيط المعلومة بطريقة معقدة: في حين يرفع مارك زوكربيرج الرئيس التنفيذي لفيسبوك شعار "السرعة ومواكبة الأحداث"، إلا أن الخصوصية بالتأكيد ليست مجالًا يمكن أن تنطبق عليه هذه العبارة التي يتم الشكوى منها كثيرا. بطريقة سلسة: الخصوصية هي المجال الذي لا يجب تجاهله من أجل مواكبة الأحداث، بغض النظر عما يقوله مارك. 2. كن نفسك هذا هو حقًا النتيجة الطبيعية للتحدث بثقة وما لم تكن كاتبًا جيدًا بشكل استثنائي (وأعني هنا أن مهارتك تصل إلى الحد الذي يمكن أن تؤلف كتابًا) فلن تبدو مقنعًا وأنت تحاول تقليد الآخرين. إذًا، أين المشكلة؟ منذ 20 عامًا، أطلق أحد مواطني مدينة نيويورك العبارة الشهيرة "على الإنترنت، لا أحد يعلم أنك كلب". لكن، وكما تشير المزحة التقنية السابقة، فقد تغير كل شيء في عصرنا الحالي حيث الانفتاح الاجتماعي وأعداد المشاركات غير المحدودة وعصر التنصت العالمي غير المسبوق؛ بقليل من البحث على جوجل يمكن لأي شخص أن يكتشف من أنت وماذا تعمل، وأين تعيش وما هو نشاطك اليومي المعتاد. 3. كن واضحًا واختصر أكتب ببساطة ووضوح مع مراعاة مستوى الجمهور الذي تكتب له، بمعنى هل تخاطب فى كتاباتك جمهور المبرمجين أم العملاء المحتملين أم زملاء جدد ...إلخ، حاول أن تُكوِّن الجمل والفقرات قصيرة قدر الإمكان وتذكر أن كل ما تسعى إليه هو لفت انتباه الجمهور وأنهم يمكن أن يتركوا المحادثة بنقرة واحدة، لهذا اختصر وادخل في صلب الموضوع. استخدم أسلوب الخمسة أسئلة رغم أنها مدرسة قديمة، والتي تتمثل فى أن تسأل: من؟ ماذا؟ أين؟ متى؟ ولماذا؟ لتتأكد من أنك توضح للجمهور الصورة كاملة، يمكنك أيضا إضافة: كيف؟ إلى الأسئلة السابقة إذا كان الأمر يتطلب ذلك واسأل نفسك: هل أجبت عن جميع الأسئلة السابقة أو أي افتراضات قد يطرحها القارئ؟. أحد مفاتيح الوضوح والإيجاز هو مراجعة ما كتبته وتحريره بدقة، وهذا سيكون أسهل بالتأكيد عندما تأخذ قسطًا من الراحة. لهذا عندما تنتهي من الكتابة، عد لمراجعة ما كتبته في اليوم التالي بعيون جديدة؛ واعلم أنه من الطبيعي أن تقوم بحذف من 15 إلى 20% من المقالة فى هذه المرحلة (أثناء المراجعة) قد يبدو ذلك غريبًا بعض الشيء إذا لم تكن بالفعل كاتب متمرس؛ تخيل أنك تهدر 20% مما قضيت ساعات في إنشائه! إذا لم تستطع أن تقدم محتوى مكتوب بطريقة دقيقة ومختصرة، فهذا يعطي انطباعات كثيرة غير جيدة عن منتجك. بطريقة مطولة وملتوية : ربما لم يهتم خبراء صناعة الساعات فى سويسرا كثيرًا بتفاصيل الكشف عن ساعة أبل الرائعة، لكن مع ظهور سوار ساعة ميلانو، أظهر عملاق مدينة كوبيرتينو أنه درس تاريخ صناعة الساعات بعناية. بطريقة واضحة ومباشرة: قد لا تكون شركة أبل مؤهلة بعد لمنافسة صانعي الساعات السويسرية، لكن الاهتمام بالتفاصيل فى ساعة أبل يظهر كما لو أن الشركة تعمل فى هذا المجال منذ زمن بعيد. 4. استعن بالصور في توصيل المعنى العقل البشري قادر على معالجة الصور أسرع ب 60 ألف مرة من النص المكتوب ، وهو ما يفسر قليلًا سبب حصول المحتوى المصوّر على مشاهدات أعلى بنسبة 70% من المحتوى المكتوب. لهذا السبب تمتلك الشركات الكبرى فرق مختصة من المصممين لإنتاج الصور التوضيحية لكل أعمالهم بدايةً من شعار العلامة التجارية وصولًا إلى تصميم الصور المرفقة مع المنشورات. يمكنك الاستعانة بالعديد من مواقع الصور المجانية أو بأسعار منخفضة في حال لم يكن لديك فريق من مصممي الجرافيك لمساعدتك على رسم الصور التوضيحية للمنتج كي ترفقها مع المحتوى الذي تكتبه، شرط ألا تبدو مبتذلة أو غير مناسبة. لنأخذ مثال "كيف تقول لا لعميل؟" صورة غير مناسبة: الطريقة السيئة لتوضيح هذا المنشور تكون باستخدام الصورة التالية: صورة رائعة: بنظرة سريعة على الصورة التالية سترى كيف استخدم المصمم أكثر من طريقة رائعة لقول "لا" للعميل بطريقة مقبولة أكثر. 5. ركّز على الكيف وليس الكم الأخبار هي أحد مجالات كتابة المحتوى حيث لا توجد قصة طويلة تسردها، لكن مجرد إضافة قصة إخبارية أو إضافة بعض التعليقات التحليلية على الأحداث اليومية سترفع نسب المشاهدة والتفاعل، وخصوصًا إذا وضعت هذه الأخبار على تطبيقات مثل Techmeme أو فى أول صفحة على Hacker News. لكن فى اليوم التالي، ستقل نسب المشاهدة إلى 10% أو أقل وفي اليوم الثالث سوف تنعدم. بدلًا من هذا السباق المستمر حيث يتعين عليك باستمرار البحث عن أخبار حصرية ترفع نسب المشاهدة، ركز على إنتاج محتوى دائم الإفادة أو المتجدد الذي يستمر الإقبال عليه مع مرور الوقت؛ رغم أنه يستغرق وقت أطول فى تحقيق النتائج، لكن التمسك بهذه الاستراتيجية يؤتي ثماره في النهاية. مثال محتوى وقتي أو لحظي: كتابة قصص إخبارية سريعة ورديئة حول آخر الإشاعات عن أيفون 8 دون أن تضيف أي قيمة حقيقية. مثال محتوى متجدد: كتابة مقالة متعمقة ومدروسة جيدًا حول تحديات التصميم التي تواجه مايكروسوفت في نظام تشغيل ويندوز 9. 6. اكتب عناوين مثيرة الجواب يظهر من عنوانه كما فى المثل الدارج؛ لا يمتلك القارئ الكثير من الوقت لأن لديه الكثير من الملهيات والمشاغل، لهذا وفي كثير من الأحيان يقرأ العنوان أولًا قبل أن يقرر هل يتابع القراءة أم لا. إذن، فالعنوان الجيد سوف يساعدك على البقاء بعيدًا عن التشويش الإعلاني. تجنب العناوين المثيرة التي تمت كتابتها من أجل زيادة عدد النقرات وفقط، مثل العناوين التالية: ضاعف من تسجيلات دخولك بالضغط على الزر الملون (خطأ) أضاف الشركة س ميزة جديدة لن تصدق ما الذي يمكن أن تفعله! (صح) على أي حال، انظر إلى هذه النماذج ذات العناوين القوية والواضحة: إطلاق المنتجات أمرٌ صعبٌ، ولكن ما يلي ذلك أكثر أهمية مدراء المشاريع العظماء لا يضيعون وقتهم على الحلول 7. علامات الترقيم علامات الترقيم مهمة للغاية لأن استخدامها فى غير موضعها سوف يربك القارئ ويؤثر على المعنى المراد توصيله؛ كل القواعد مهمة في الحقيقة، لهذا حاول اقتناء المراجع اللغوية التي يمكنك اللجوء إليها فى حال واجهتك صعوبة في استخدام علامات الترقيم. 8. تفاعل مع القراء عندما تبدأ فى كتابة تدوينة أو أي منشورات عامة، يجب أن تستعد لإجراء محادثة مع الجمهور فى أي وقت، صحيح أن الأمر قد يبدو فوضويًا، ولكن إذا لم تقم بذلك فأنت لا تتبع النصيحة الأولى وهي التحدث بثقة. إذا قام شخص ما بالتعليق على شيء كتبته ، فحاول الرد عليه فى الوقت المناسب قدر الإمكان؛ وإذا رأيت أن شخص ما يحاول بوضوح أن يصطدم بك، فيكفي أن يكون الرد على تعليقه "شكرا لملاحظتك". رد غير احترافي: "ليس من حقك انتقاد ما أكتبه، من أنت؟ ليس لديك سوى 50 متابع، ليس لديك أي فكرة عما تتحدث عنه". رد هادئ واحترافي: "مرحبًا علي، شكرًا لتعليقك، برغم أنني أتفهم لماذا وصلك هذا المعنى، إلا أن هذا لم يكن تحديدًا ما أقصده.." ترجمة وبتصرف للمقال Sincerely yours: 8 tips for writing like you really mean it لصاحبه JOHN COLLINS

قمنا في الدرس الأول من هذه السلسلة بإنهاء تصميم واجهة مدونة بناءً على مبادئ الخطوط والطباعة (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.