درس تصميم قالب بلوجر

     اليوم اقدم لكم اول فصل من الفصول التى ساتمها بعنوان دروس تصميم قوالب بلوجر حصرى على مدونة عمالقة النت
لا شك أنك إنبهرت يوما ببعض مدونات بلوجر ، و تمنيت أن تمتلك واحدة مثلها . ربما حاولت ذلك و فشلت ، أو ربما نجحت حقا ، أو ربما لم تحاول أصلا ؟؟
من بين أكثر الأشياء التي تجذب الزوار للمواقع الشكل ، شكل الموقع و تصميمه . أصبحنا الان نتفاجأ كثيرا بوجود عدة مدونات لها نفس القالب ، مما يخلق نوعا من الملل عند الزائر . لذلك إن أردت أن تنفرد بقالب لمدونتك عليك أن تصممه بنفسك ، أن تظهر شخصيتك من خلاله ، و أن تجعله يناسب إحتياجاتك و مخططاتك في مدونتك .


فمرحبا بك في الفصل الأول من دروس تصميم قوالب بلوجر .

أولا : هذه الدروس تفترض منك معرفة أساسيات لغة HTML و CSS . فإن كنت لا تعرف شيئا عن هاتين اللغتين فأنت لا تستطيع إكمال هذه الدروس   .

---

طريقة إشتغال مدونات بلوجر

ليس بلوجر فقط بل جميع المدونات كيفما كان نوعها . تتوفر على تصميم واحد يظهر في جميع صفحاتها . أي أنك لو كنت في الرئيسية لمدونة ما و دخلت إلى موضوع فستجد أن التصميم الأساسي لم يتغير ، قد تتغير الألوان و بعض الصور باستعمال بعض كودات البرمجة ، لكن الأصل و البنية لم تتغير . هذا الثباث في التصميم ليس تعجيزا للمصمم بل هذه هي الطريقة المعتمدة في تصميم القوالب ، فيمكن قلب تصميم المدونة رأسا على عقب من موضوع لاخر لكن هذا يتطلب ترسانة كبيرة من كودات البرمجة إلخ ...

تصميم المدونة في تدوينة

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

 كما ترى . نفس التصميم دائما .
دعنا لا نذهب بعيدا !!  الأمر الذي أريد أن أقوله هو أننا نكتفي بتصميم واجهة واحدة للمدونة ، هذه الواجهة تعمل في جميع صفحاتها ، و بالطبع هناك بعض الأشياء التي نريد منها أن تظهر في صفحات محددة من المدونة لديها قواعدها الخاصة ، سنتعرف عليها فيم بعد .

الأدوات
هناك العديد من الأدوات التي يمنحها بلوجر لمدراء المواقع . يتم إضافتها للمدونة حسب رغبة المدير ، و هي غالبا أدوات يصعب إنشائها بالكودات العادية أي أنها تحتاج مستوى عالي من البرمجة . مثل أداة التصنيفات و أداة المتابعين .
نحن كمصممين لا نخوض في كيفية إشتغال هذه الأدوات و لا حتى في كيفية إشتغال القالب بأكمله  . يكفي أن نصمم القالب و السلام . بالنسبة للأدوات سنتعرف على بنيتها بالتفصيل الممل في الفصول القادمة .

---

بلوجر تعتمد الـxml

كما نعلم باستخدام لغة HTML و CSS فقط نستطيع إنشاء مواقع ، لكن هذه المواقع التي ننشأها باعتماد هاتين اللغتين فقط تكون ثابثة و إن أردنا تغيير أي شيء صغير فيها فإننا نحتاج لتعديل الكود في الصفحة . و هذا ممل و متعب .
لهذا قام مطوروا النت باختراع لغات جديدة تمكن من تغيير محتوى المواقع دون الدخول لأكوادها . من بين هذه اللغات نجد الـ PHP و هي لغة رائعة تستخدمها مدونات ووردبريس و يعتمدها الفيسبوك أيضا .
بلوجر تعتمد لغة أخرى أبسط بكثير و هي لغة xml ، هذه اللغة شبيهة بالـ HTML ، لها نفس المبادئ تماما غير أنها لا تعتمد على وسوم محددة .

مثال لتوضيح طريقة عمل الـxml :
في ملف الـxml نضع الوسم التالي :

<name> MedAnassSDK </name>

كما تلاحظ لا يوجد وسم name في HTML لكنه يعمل في xml .

في ملف HTML يوجد مع ملف xml السابق في نفس المجلد نضع التالي بالإضافة إلى بقية الوسوم الضرورية .

<script>كود جافاسكربت خاص</script>
<div id='authorName'></div>

يقوم كود الجافاسكربت الخاص بجلب محتوى الوسم <name> الموجود في ملف xml و وضعه في وسم <div> المعرف بالـauthorName  الموجود في صفحة HTML .
بصيغة أخرى : يقول الكود javascript للحاسوب : إذهب إلى ملف xml و احصل على المعلومة داخل الوسم <name> و ضعها في وسم <div> المعرف بالـauthorName  الموجود في صفحة HTML .
فيظهر كود صفحة HTML في المتصفح كالتالي :

<script>كود جافاسكربت خاص</script>
<div id='authorName'>MedAnassSDK</div>

و إن غييرت المعلومة داخل الوسم <name> فإن المعلومة التي ستظهر في ملف HTML ستتغير بدورها .
و بهذه الطريقة سنتكن من تغيير محتويات ملف HTML دون الإضطرار إلى التعديل في أكواده بحيث يكفي أن نعدل المعلومات في ملف xml و سيقوم كود javascript بالعمل .
أما بالنسبة للتغييرات التي سنضطر لعملها في ملف xml نستطيع عملها من خلال برامج متقدمة تقوم بالتنسيق و كل شيء . و هذا هو ما تقوم به بلوجر ، لكن بشكل مطور أكثر .
فمنصة بلوجر هي ذلك البرنامج الذي يقوم بتعديل محتويات الـxml ، و  الكود javascript يُظهر كل تلك المعلومات في وسومها المحددة .
إذن يكفي أن نعطي لبلوجر ملف HTML به تصميم المدونة ( الألوان و كل الـCSS ) و هو سيقوم بوضع ما سنكتبه من تدوينات في وسومها المحددة .
لكن السؤال : كيف سيعرف كود javascript الخاص ببلوجر هذه الوسوم المحددة ؟ ففي المثال السابق وضعنا التعريف authorName للوسم <div> و الكود javascript  الذي وضعناه يعرف مسبقا أن عليه وضع المعلومات التي جلبها في هذا الوسم إنطلاقا من تعريفه . فإن غيرنا التعريف فلن يضع الكود javascript أي شيء في الوسم <div> .

بدلا من نجعل كود javascript الخاص ببلوجر يتوافق مع التعريفات التي نضعها في تصميماتنا . لنعرف أولا التعريفات التي يتعامل بها كود بلوجر و لنجعل تصميماتنا تتوافق معه .

بدلا من أن جعل الكود يتوافق مع التصميم - لنجعل التصميم يتوافق مع الكود  .

بالنسبة لبلوجر فهو لا يعتمد على التعريفات لتحديد الوسوم كما في المثال السابق ، بل يعتمد على وسوم جديدة ، حيث يبحث الكود عن الوسم المعني بالأمر و يحوله إلى المعلومات التي أدخلتها في منصة بلوجر . مثال

<div><b:widget /></div>

الوسم </ b:widget> خاص ببلوجر و هو يلعب دور التعريف السابق .
كما ترى هذا الوسم لا ينتمي للغة HTML . لكنه ينتمي للـ xml ( فلا وسوم محددة في الـ xml ) ، و بالتالي هذا يفرض علينا أن نقدم تصميمنا في ملف xml و ليس في ملف HTML  .

---

الأدوات التي سنحتاجها

ستحتاج إلى مدونة على بلوجر ، قم بإنشاء مدونة أخرى للتعلم فيها فقط ( لا تبحث عن قالبها لأننا سنحذفه و سنصمم قالبنا الخاص .
في بعض الأحيان قد تعجبك بعض الخدع التصميمية الجميلة في مدونات أخرى ، و قد ترغب في تصميم مثلها في مدونتك . لذلك ستحتاج إلى أداة تريك الكود الخاص بها لكي تنشأ مثله في مدونتك .
هناك أداة مشهورة تقدم لك هذه الإمكانية :

•  على Mozilla Firefox : هي Firebug ، قم بتصطيبها على متصفحك من هنـــا .
• على Google chrome : تتوفر مدمجة مع المتصفح و هذا رائع  ، إضغط على الزر الأيمن في الصفحة و اختر اخر خانة ، سيظهر لك أسفل المتصفح الكود الخاص بالصفحة .
• لا يوجد شيء في المتصفحات الأخرى

الأدوات التي تحتاجها لا تقدم لك كل شيء ، بل ما يجعل تصميماتك جميلة هو قدرتك على الإبداع + مهارتك في CSS .

لماذا CSS ؟؟ لأن أكثر ما يحتوي عليه قالب المدونة هو الـ CSS أما وسوم الـ HTML فهي قليلة . و كما تعلم الجمالية تتعلق بالألوان و الصور و غيرها .... و كل ذلك مرتبط بالـ CSS أكثر من الـ HTML .

لذلك أنا ألح على تعلم هاتين اللغتين على جميع أصحاب المواقع .