arab professional web school:

عناصر تصميم الصفحة

هل أنت جاهز ؟ لنبدأ إذن

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

أثناء تصميمنا لقالب المدونة فإننا سنقوم بتصميم ثلاث واجهات في نفس الوقت ، الصفحة الرئيسية للمدونة ، صفحة التدوينة و واجهة عناصر الصفحة ( الواجهة التي تظهر في .. لوحة التحكم ← تصميم ← عناصر الصفحة ) .
حيث يتم تصميم الواجهات في مرة واحدة .
كيف ؟
في الصفحة الرئيسية يتعامل بلوجر مع وسوم الـxml بشكل ، و في واجهة عناصر الصفحة يتعامل معها بشكل مختلف تماما ، أما صفحة التدوينة فهي نفس الصفحة الرئيسية مع تغيير الأداة الأساسية ' رسائل المدونة ' فقط .

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

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE HTML>

<html>

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[

]]></b:skin>

</head>

<body>

</body>

</html>

شاهد المدونة ، ستجدها صفحة بيضاء فارغة

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

.

لقد نبهت في الفصل السابق على ضرورة معرفة لغة HTML و CSS قبل الشروع في التصميم في بلوجر . و لازلت متمسكا بما أقول . فأنا الان أفترض أنك تعرف ماهي الوسوم ( tag ) و السمات ( attributs ) و العناصر و غيرها ... لكنني لم أفرض معرفة لغة xml ، فإن كنت لا تعرف الـxml فلا شك أنك وجدت في الكود السابق بعض الوسوم التي لم ترها قط .

<?xml version="1.0" encoding="UTF-8" ?>

هذا السطر يخبر المتصفح ( أو بلوجر ) أن الملف ملف xml و أننا نستخدم الإصدار 1.0 من هذه اللغة و نستعمل الترميز UTF-8 .

<b:include data='blog' name='all-head-content'/>

هذا وسم خاص ببلوجر . إن لم تضفه فلن تعمل أدوات التحرير السريع . لذلك لا تنساه .

<data:blog.pageTitle/>

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

هذه واجهة أخرى تم تعديل خصائصها .

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

.
هذا ليس كل شيء . فالوسم </ data:blog.pageTitle> لا يُظهر عنوان المدونة فقط . بل كما قلت سابقا يُظهر عنوان الصفحة . فعندما تدخل إلى تدوينة ما . ستجد في شريط المتصفح عنوان المدونة و عنوان التدوينة أيضا بهذه الطريقة :
عنوان المدونة : عنوان التدوينة .

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

<b:skin><![CDATA[ ]]></b:skin>

لقد وضعت وسم الإغلاق <b:skin/> بعد سطرين من وسم الفتح <b:skin> مع وجود العنصر CDATA ، بين هذين الوسمين نكتب خصائص الـCSS الخاصة بقالب المدونة .
هذا ما يفترض أن يكون . لكن للأسف الشديد الخصائص التي نكتبها بين هذين الوسمين لا تنطبق على واجهة العناصر .
تخيل أننا وضعنا أداة ' رأس الصفحة ' بعرض 500px ، سيظهر في الصفحة الرئيسية للمدونة بـ 500px لكن في واجهة عناصر الصفحة ستظهر بشكل اخر ، ستظهر ممتدة على طول الصفحة كما لو أننا لم نضع خاصية العرض 500px . للأسف .

الحل
الحل بسيط للغاية ، و هو التخلي عن عنصر b:skin و كتابة الخصائص داخل سمة Style في العنصر مباشرة . هذا يجعل الخصائص تنطبق على واجهة عناصر الصفحة أيضا ، لكن هناك بعض الخصائص التي تأثر على جمالية واجهة عناصر الصفحة . لذلك لن نكتب كل الخصائص مباشرة في السمة Style بل سنكتفي بكتابة الخاصيتان float و width داخل السمة و سنكتب باقي الخصائص داخل العنصر <b:skin>

لتوضيح الأمر قليلا شاهد الصور التالية :

هكذا تبدوا واجهة عناصر الصفحة عند كتابة جميع خصائص CSS داخل العنصر <style> فقط

على ما أعتقد ، الواجهة الثانية أفضل من الأولى .

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

المقاطع

يتكون قالب بلوجر بالإضافة إلى عناصر HTML و الخصائص CSS من ما أسميه مقاطع ( sections ) .
أتذكر المربع الذي يوجد في واجهة تصميم الصفحة :

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

هذه الترتيبة التي تراها تسمى مقطعا ( section ) و هي كما تظهر في واجهة تصميم الصفحة صناديق فوق بعضها البعض ، فإنها تظهر في صفحات المدونة على شكل أدوات مرتبة فوق بعضها البعض .
و على مستوى صفحة تحرير HTML القالب في لوحة بلوجر فإن إدخال مقطع يتم بإدخال العنصر <b:section>كالتالي :

<b:section id="section1"></section> أو <b:section id="section1"/>

سواء أدخلت المقطع بعنصر عادي أو بعنصر مغلق يبقى صحيحا ، لكن الأهم هو تعريف كل مقطع بـID مميز .
إن أدخلت المقطع دون سمة id فإن نموذجك لن يقبله بلوجر و سيرسل الرسالة التالية :
يفتقد أحد الأقسام إلى سمة المعرف المطلوبة. يجب أن يكون لكل قسم معرف فريد.
يمكن تقسيم المدونة إلى عدة مقاطع بحيث يشكل المقطع 1 رأس الصفحة ( المقطع الذي يحتوي على أداة رأس الصفحة ) و المقطع 2 القائمة الجانبية sidebar و 3 مقاطع في الأسفل و لا تنس المقطع الرئيسي الذي يحتوي على أداة ' رسائل المدونة الإلكترونية ' .
يمكنك إضافة ما لا نهاية من المقاطع في القالب ، كل ما يلزم هو التنسيق الجيد بينها و هذا يعتمد على مهاراتك في الـHTML و CSS .

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

سمات المقاطع الإضافية
بالإضافة إلى سمة التعريف id هناك سمتان إضافيتان يمكن إستعمالهما
سمة maxwidgets
هذه السمة تأخذ قيمة عددية صحيحة و موجبة مثل 1 أو 2 أو 3 .... و هذا يحدد العدد القصوي من الأدوات الممكنة إضافتها في هذا المقطع . مثال

<b:section id="section1" maxwidgets="2"/>

بهذه السمة لن تستطيع إدخال أكثر من أداتين في هذا المقطع .

هناك سمتين أرى أنهما غير مهمتين . ليس لأنني لا أريد أن أكثر عليكم بل لإنني لا أستعملهما حقا و أرى أنهما تافهتين و يمكن الإستغناء عنهما . على كل حال .
هناك سمة showaddwidget و هي تقبل قيمتين true أو false تتحكم في ظهور مربع ' إضافة أداة ' . و عذرا لم أستطع تذكر السمة الثانية و هذا لأنني لا أستخدمها كما قلت سابقا

.

التصميم الإفتراضي للمقطع
في صفحة تحرير HTML القالب نحن نكتب بلغة xml حيث نكتفي بوضع الوسم <b:section> السابق للدلالة على وجود مقطع ، لكن ما يظهر في المتصفح أثناء عرض المدونة شيء اخر ينتمي للغة HTML .
حيث بدل من أن نجد في المتصفح الوسم </"b:section id="section1> فإننا نجد ببساطة .

<div class="section" id="section1">

...

</div>

يظهر المقطع في المتصفح على شكل صندوق div بسيط معرف بـclass ذا قيمة section و id يأخذ القيمة التي تدخلها في التصميم .
لهذا إن أردت تخصيص المقطع بتحديد عرض مناسب له أو خلفية ما فيكفي كتابة الـCSS داخل عنصر <b:skin>

<b:skin><![CDATA[

div.section#section1 {
الخصائص  هنــا

}
]]></b:skin>

الأدوات

تأتي قوالب بلوجر عادة فارغة من الأدوات ، إلا بعض الأدوات التي يرى مصمم القالب تثبيتها في القالب ، و من أروع الأدوات التتي تتوفر عليها بلوجر هو أداة javascript/html و هي الأداة الأكثر إستعمالا من بين جميع الأدوات .

لا أريد أن أبتعد كثيرا .

الأدوات هي ما يسمى بالإنجليزية widget و يتم إدخالها في القالب بإدخال عنصر <b:widget> ، هناك طريقة أخرى أبسط تمكننا من إدخال الأدوات في القالب ، فبعد تصميم المقاطع في القالب نذهب إلى واجهة تصميم الصفحة و نضيف أدواتنا بطريقة عادية .

هناك بعض الأدوات تكون ثابثة ، لا تستطيع سحبها من مكانها كأداة ' رسائل المدونة الإلكترونية ' عادة .

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

نفترض أنك أضفت أداة javascript/html

<b:section id="section1">

<b:widget id="HTML1" locked="false" title="Javascript/HTML" type="HTML" />

</b:section>

هناك سمتين جديدين هنا : locked و type .

السمة locked
تأخذ السمة locked قيمتين فقط true و false :

إذا كانت قيمة true فإن الأداة ستصبح ثابثة في القالب و لا يمكن أن تزاح كالأدوات التي نضيفها .

إذا كانت القيمة false فإن الأداة تعود إلى طبيعتها و تصبح قابلة للإزاحة كما كانت .

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

السمة type
تأخذ قيم كثيرة من الغباء حفضها كاملة .
و هذه القيمة التي تأخذها سمة type تحدد نوع الأداة .
فمثلا القيمة HTML تعني أن الأداة هي Javascript/HTML
القيمة Header تخص أداة ' رأس الصفحة '
القيمة LinkList تخص أداة ' قائمة الروابط '
....
....
.... القائمة طويلة سأدعك تكتشفها بنفسك

....
أما القيمة التي تخص أداة ' رسائل المدونة الإلكترونية ' فهي Blog و لا تنساها

.

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

<b:section id="section1">

<b:widget id="Blog1" locked="true" type="Blog" />

</b:section>

ملاحظة صغيرة حول السمة ID في عنصر <b:widget> : إنها تأخذ دائما قيمة السمة type متبوعة برقم ، بهذه الطريقة يرتب بلوجر أدواته . لذلك لا تحاول تغييرها ، في حال قتلك الفظول و غيرتها فإن نموذجك لن يتم قبوله

شيء اخر : يجب الإحتفاظ بقيم السمة Type كما هي تماما ، فالأحرف الكبيرة و الأحرف الصغيرة ليستا نفس الشيء ، لاحظ أن القيمة Blog تكتب بحرف B كبير و الحروف الأخرى log صغيرة ، و نفس الشيء بالنسبة للقيم الأخرى .

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

و الغوص في عناصر جديدة سنتعرف عليها في الفصول القادمة .
و الأدوات الأربع التي سأطرق إليها هي :

أداة ' رسائل المدونة الإلكترونية ' بكامل تفاصيلها بتخصيص فصل كامل لها إن شاء الله .
أداة ' قائمة الروابط ' التي سنجعل منها قائمة أفقية بإعتماد خصائص CSS .
أداة ' ترقيم الصفحات ' رغم أنها لا توجد في بلوجر و يتم إخالها بكود Javascript إلا أنني أرى أنها أهم أداة تصفح .

إقرأ المزيد »

الاحتياطيات الخاصة بالمحترف العربي

▪ عند حدوث انتهاك لسياسة الخصوصية أو اتفاقية الخدمة أو الاحتياطيات الخاصة بالمحترف العربي ، يكون للمحترف العربي الحق في إنهاء حساب المستخدم دون سابق إنذار ودون رد أي مبالغ مدفوعة ، وعند محاولة العميل الإضرار المحترف العربي بما في ذلك على سبيل المثال لا الحصر : ( نظام المحترف العربي ، وخوادمها ، وسمعتها ، وأعمالها التجارية ، وخدماتها ، والشبكة الخاصة بها ، والعمليات أو المعدات ) ستتم مساءلته قانونيًا .
▪ لا يحق للعميل التشهير بـ المحترف العربي أو التجريح في موظفيها أو إدارييها ، وبدلًا عن ذلك يحق للعميل التوجه للجهات المختصة في المملكة العربية السعودية لتقديم شكواه ، علمًا بأن محاولة التشهير أو التجريح - بأي شكل كان - يُعطي المحترف العربي الحق الكامل في إلغاء العقد ورفض تقديم أي خدمة - أيًا كانت - للعميل .
▪ يُمنع منعًا باتًا إعادة بيع خدمات المحترف العربي بدون تصريح كتابي من إدارة المحترف العربي ، إلا في حالة كون العميل موزعًا معتمدًا لدى المحترف العربي.
▪ حرصًا منا على بيانات عملائنا الكرام وتوفير أقصى قدر ممكن من الإجراءات الأمنية للحفاظ على سرية هذه البيانات -فقد تم اعتماد خاصية السؤال الأمني وإجابته المتوفرة في لوحة تحكم العميل بموقعنا ، للتأكد من هوية العميل عند طلب أي بيانات حساسة ، أو حدوث اختراق أمني لبريدك الإلكتروني - الذي قمت بالتسجيل عن طريقه في عضويتك بمنطقة العميل المحترف العربي - ، أو فقدانك لبريدك الإلكتروني لأي سبب ، لذا وللأهمية القصوى نرجو من جميع عملائنا الكرام اختيار سؤال سري وإجابة تكون على قدر كافٍ من السرية .
▪ كما نشدد على أنك المسؤول عن الحفاظ على أمن حسابك ومسؤول بالكامل عن كل النشاطات التي تحدث باستخدام حسابك وأي أعمال أخرى تتم للاتصال المحترف العربي من خلاله سواء كان عن طريق الحساب الرئيسي الخاص بك أو عضوية فرعية منه .
▪ يحق المحترف العربي إلغاء اشتراك العميل في أي وقت بدون إيضاح الأسباب وبشرط إعادة المبلغ المتبقي للعميل .
▪ التحايل عند قيام العميل بالتحايل أو الالتفاف على أي تقنيات مستخدمة في منطقة العميل بموقعنا -فإن ذلك يعد مخالفة صريحة لشروط استخدام الموقع ، ويؤسفنا أنه سيتم إيقاف حساب العميل لدينا ، وحيث إن ذلك يتسبب في إضاعة وقت الشركة في أمور إدارية وفنية فيتوجب دفع غرامة تعويضية عن ذلك لإعادة فتح الحساب .

إقرأ المزيد »

اتفاقية الخدمة

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

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

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

▪ أخطاء ناتجة عن سوء الاستخدام.

▪ مشاكل الاتصال بالإنترنت.

▪ مشاكل متعلقة بالدي إن إس .

▪ اختراقات أو محاولات تخريبية.

إقرأ المزيد »

المحترف العربي

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

للمزيد يمكنك زيارة الموقع الرسمي للشركة من هنـــــــــــا

إقرأ المزيد »

من نحن

المحترف العربي

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

لزيارة الموقع الرسمي من هنــــــــــــا

إقرأ المزيد »

يميز هذا السلايد شو انه يضفي لمسة جميلة

السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب , يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript , مايميز هذا السلايد شو

انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب , يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب , يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه

إقرأ المزيد »