إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

قوالب بلوجر ... بدايتك في التصميم

| 27 تعليق

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


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

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

الفهرس
  1. طريقة إشتغال مدونات بلوجر .
  2. بلوجر تعتمد الـxml .
  3. الأدوات التي سنحتاجها .


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

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

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

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


بلوجر تعتمد الـ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 .
لذلك أنا ألح على تعلم هاتين اللغتين على جميع أصحاب المواقع .

هذا كل شيء الان إلى الفصل القادم

الكاتب : Med Anass SDK

عاشق النت إسم على مسمى أعشق كل ما له علاقة بالوب و الإنترنت
مساحة إعلانية

تعليقات بلوجر

  1. السلام عليكم،
    تدوينة مفيدة حقا، بالتوفيق !
    عيد مبارك سعيد :)

    ردحذف
  2. عيد مبارك سعيد أخ علاء شرفتنا

    ردحذف
  3. ما شاء الله عليك،
    انا من متابعيك ان شاء الله
    بالتوفيق لك و عيدك مبارك سعيد

    ردحذف
  4. أهلا و سهلا بك أخ رضا و عيد مبارك سعيد

    ردحذف
  5. جميل اخي الحبيب عاشق النت صراحة احب ان اتصفح مدونتك لاني اجدها مفيدة جدا اخوك أمجد

    ردحذف
  6. تدوينة جميلة و مفيدة!

    بالتوفيق و النجاح

    ردحذف
  7. مشكور يآااطيب
    الله يجزيكِ الخير .. أبدعتِ هنآاا

    ردحذف
  8. مشككور

    ردحذف
  9. شكرا اخي على التدوينة والشرح الاكثر من رائع وننتظر الفصل القادم على احر من الجمر وتقبل مروري

    ردحذف
  10. والله العظيم انا مش فاهم اى حاجة فى بلوجر دة

    ردحذف
  11. شرح رائع شكرا لك اخي الكريم
    http://saher-hassan.blogspot.com/

    ردحذف
  12. شكرآ جدآ جدآ nodymedohack.blogspot.com

    ردحذف
  13. شرح رائع شكرا لك اخي الكريم
    http://jadidtech.blogspot.com

    ردحذف
  14. مدونة ممتازة اهنئك اخي ان شاء الله في تألق دائم
    زورونا علي مدونتي المتواضعة
    http://fcbrcalona.blogspot.com

    ردحذف
  15. شكرا والله موضوع جميل

    ردحذف
  16. مدونة ممتازة اهنئك اخي ان شاء الله في تألق دائم

    ارجو منك زيارة مدونتي وتقيمها

    http://abda3design.blogspot.com

    ردحذف
  17. https://www.blogger.com/blogger.g?blogID=7034895859784719085#overview/src=dashboardمدونة ممتازة اهنئك اخي ان شاء الله في تألق دائم

    ارجو منك زيارة مدونتي وتقيمها

    المصدر: http://www.3asq-net.com/2011/11/blog-post_06.html#ixzz2NyyGzs48

    ردحذف
  18. درس مفيد جداً ورائع

    http://www.3rab-computer.com/

    ردحذف
  19. http://geographiquehd.blogspot.com/

    ردحذف
  20. يعطيك الف عافيه على المدونه المفيده
    ولكن عندي مشكله عند كتابه موضوع في بلوجر أرجو أن تساعدني
    وهي ظهور الكلمات ( Required field must not be blank تجاهل التحذير ) عندما أكتب الموضوع وأعمل حفظ أو نشر تظهر هذه الكلمات
    واعمل تجاهل التحذير ولكن تعود نفس المشكله
    ارجو مساعدتي

    ردحذف
  21. مشكوووور على المجهود

    ردحذف

  22. تدوينة اكثر من رائعة

    تقبل تحيااتي

    http://www.egyptsat.com

    ردحذف
  23. روعة جميل جدا

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة