×؛×|| احتـَـرِف تعـريـب القـوَالـِب ||×؛×


بســـــــــم الله الرحمـــن الرحيــــــم
السلام عليـــــكم ورحمـــة الله وبركـــاته ...

حيـّاكم الله وبيّاكـم .. وجعل الجنـّـة مثــواي ومثواكُـم ....

كثير منا من يقضي وقته في البحث عن القالب الذي يناسب ذائقته ...
وحينمـا تُفرج ويجد القالب الذي تمنــاه .. يبدأ بالبحـث عمّن يــعّربه له بدوون مقابل ... وهذه المهمة الاصعب

لذلك فكرت في أن أُفيدكم كما استفــدت انــا ... فباذن الله من مخططاتي القادمة هي تعريب القوالب من اجلكم ...
هذه الدروس نفعتني كثيرا ,,

فأتمنى ان تنفعكم ... كل الشـــكر للأخ  ( أسامة الغامدي ) الذين قام بالشرح .. فجزاه الله عنّا خير الجزاء ....


تفضـلوا

×؛×؛×؛×؛××؛×؛×؛×؛×؛×؛×؛×؛×؛×؛×؛؛××؛×؛×؛×؛

http://3.bp.blogspot.com/_N6eD6bzeHDE/SzFBkBfT0uI/AAAAAAAAATA/U4ZQeyCns20/s320/%D8%AA%D8%B9%D9%84%D9%85+%D8%AA%D8%B9%D8%B1%D9%8A%D8%A8+%D8%A7%D9%84%D9%82%D9%88%D8%A7%D9%84%D8%A8.png 

هذه بعض النصائح والإرشادات والتعليمات :

  • التوكل على الله و الاستعداد للدروس .
  • التطبيق والإصغاء .
  • يجب أن نتيقّن أن كل شيء مع الممارسة والتطبيق سيصبح سهلا بإذن الله تعالى وتذكر هذا الدعاء (( اللهم لا سهل إلا ما جعلته سهلا وإنك تجعل الحزن إذا شئت سهلا )).
  • مع رؤية قوالب معرّبة تعريب احترافيّ في أي سيكربت للتدوين ستستفيد الكثير من المهارات والخبرات في التعريب دون أن تشعر .
  • إذا تعلّمت تعريب أحد قوالب البلوقر فسيسهل عليك تعريب أي قالب آخر يعتمد على أي سيركبت آخر .
  • مهما حاولنا جاهدين أن نعلمكم كيفية تعريب القوالب فبالتأكيد سنغفل عن بعض الأمور لذلك نرجو منكم تذكيرنا بما نسينا .
نقطة مهمة : .
نحن لا نحلّلُ مَن يَسْتَخْدِمُ التّعْرِيبَ فِيمَا لا يُرْضَيْ الله سُبْحَانَهُ وَتَعَالَى

الأدوات التي سنستخدمها في التعريب :
نحن لا نريد أن نشق على أحد وعادة متطلبات التعريب معرفة ببعض الأكواد وخواص ال css ولا تحتاج لأي برنامج آخر لكن ولأننا سنبدأ معكم من الصفر ولأن الدورة للمبتدئين سنرشدكم إلى تحميل بعض الأدوات التي سنشرح عليها والتي ستسهل عليكم وستوفر لكم الكثير من الجهد وهي سهلة التحميل ومجانيّة :
  1. متصفح الفَيَر فُكس
لا يخفى على الأغلبية من متصفحي الإنتر نت أن متصفح الفاير فوكس متصفح الثعلب الناري هو أفضل من المتصفحات الرديئة أمثال إنتر نت إكسبلورر


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


إضافة Firebug

إضافة فير بق للفير فوكس هي أفضل إضافة استفدت منها كثيرا , وتستطيع من خلالها أن تعدل على القالب مباشرة , وتتعرف على خواص css للقالب , بدون عناء ومشقة , المهم الآن أن تحملوها , وسنشرح لكم ما نريد منها لاحقا بإذن الله تعالى .



لتحميل الإضافة من هنا

لا بد أن تعيد تشغيل متصفح الفايرفوكس حتى تتفعل الإضافة
لا نحتاج نحن معربي القوالب إلى معرفة احترافيّة بلغةHtml وتقنية css ولكن يلزمنا معرفة بعض الأمور البسيطة عنها , بإمكانكم زيارة هذا الموقع http://ar.html.net/ لتتعرفوا عليهما .

إذن بعد أن قرأنا بعض الأمور عن اتش تي ام ال , والسي اس اس , نبدأ الآن بتوضيح بعض الأمور , أو بعض الخواص التي عادة ما نحتاج إلى تعديلها عندما نعرب قالبا .. وهي على
النحو التالي :
  • text-align وتعني محاذاة النصوص , فإذا كان القالب إنجليزيا فستكون محاذاة النصوص على اليسار وستكون العبارة-إن صحت التسمية- هكذا ;text-align:left بينما لو كان القالب معربا ستكون هكذا ;text-align:right
  • float وتعني محاذاة التنسيق , وشأنها كشأن العبارة التي قبلها فعندما نريد عنصرا ما موجودا في المدونة أن يكون تنسيقه في اليمين تكون العبارة هكذا ;float:right بينما لو كنا نريد تنسيقه نحو اليسار هكذا ;float:left .
  • padding وتعني الهوامش الداخلية فإذا كانت في القالب الإنجليزي موجودةً هكذا padding-left:3px; فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا padding-right:3px; .
  • margin وهي مضاد padding وتعني الهوامش الخارجية وهي لا تختلف عن padding , فإذا كانت في القالب الإنجليزي موجودةً هكذا margin -left:3px فإنه يلزمنا تغيير left إلى right لتصبح العبارة هكذا ;margin -right:3px .
  • direction ونستطيع من خلالها تحديد اتجاه القالب كامل , بحيث نضيفها بهذا الشكل direction:rtl مثلا تحت Body هنالك سيتحول اتجاه القالب كاملا في بعض القوالب , وفي القوالب الأخرى سيبقى اتجاه بعض العناصر مثل ما هو مع بعض التغيير . وفي بعض القوالب تكون هكذا direction:ltr; فعلينا بتغييرها direction:rtl; .
توضيح : rtl تعني right-to-left أي من اليمين إلى اليسار , و ltr تعني rleft -to-rightمن اليسار إلى اليمين .

  • Font-family , وتعني الخط , فإذا كان الخط هكذا ;font-family:arialونريد أن نغيره إلى خط آخر مثلا التاهوما سنغير arial فقط . ;font-family:tahoma
هذا إيجاز لبعض الخواص [ css ] التي عادة ما أستخدمها عندما أعرب قالباً ما , ولن تفهموها بشكل جيد الآن , ولكن بعد التطبيق ستسهل لكم وستحبونها كثيرا .

أما بالنسبة لتعديل Html فإني لم أعد أستخدمها كثيرا عندما أعرب أحد القوالب , وذلك لأن أكثر التعديل يكون على css والتنسيق من خلالها من اليمين إلى اليسار , أو العكس .

فعادة ما نبحث في القالب في تحرير Html في البلوقر عن dir , ونضع بجانبها rtl لتكون بهذا الشكل dir="rtl" .

ملاحظة مهمة :
الاتش تي ام ال تحتوي على السي اس اس , أي أنها تكون مع بعض , ولتتعرفو أكثر على الفروقات أنصحكم مرة أخرى بزيارة هذا الموقع http://ar.html.net

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

أترككم الآن لتدرسوا هذه الأمور التي أوردتها لكم ولكي تستفيدوا من رابط ذلك الموقع
http://ar.html.net
__________________  بعد أن تعرفنا  على بعض الأكواد التي سنستخدمها في تعريب القوالب , وعلى نبذة عن HTML و CSS الآن جاء وقت التطبيق على قالب من القوالب , وهو سهل التعريب , وسنشرح لكم كيفية تعريبنا له , من الألف إلى الياء .. بإذن الله تعالى .

ملاحظة :
القوالب تختلف في تعريبها , فهناك قوالب سهلة التعريب وهناك قوالب سهلة التعريب أيضاً ولكنّها تحتاج إلى جهد , وهناك قوالب فيها خاصية أنه يتعرب تنسيق بعض العناصر من خلال لغة المدونة ..

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





النقاط التي تحتاج منا إلى تعديل التنسيق هي 5 نقاط فقط .. وهذه النقاط مرتبة :

  1. عنوان المدونة, ونلاحظ أن تنسيقه على اليمين ولا يحتاج إلى تعريب .
  2. التأريخ تنسيقه أيضا في اليمين ولا يحتاج إلى تعريب .
  3. عنوان الموضوع في الوسط وشكله غير مستساغ ,لذلك من الأفضل أن نجعل تنسيقه على اليمين.
  4. نص التدوينة يجب أن نجعل تنسيقه من اليمين إلى اليسار .
  5. إحصائيات الموضوع تنسيقها في اليمين ولا تحتاج إلى تعريب .
  6. الاشتراك في الرسائل , من الأفضل أن يكون تنسيقه من اليمين إلى اليسار بدلا من الوسط .
  7. عنوان عناصر القائمة الجانبية , يحتاج منا إلى إزالة التقطيع الموجود فيه , وجعل تنسيقه يمينيا .
  8. النص الذي تحت عناوين العناصر , يحتاج إلى تنسيق من اليمين إلى اليسار .
هنا اتضح لنا أنا سنغير تنسيق 5 عناصر فقط من القالب , وهو أمر سهل للغاية , لنبدأ معكم ..

تعريب القالب :

عادة أنا عندما أبدأ في تعريب قالب ما , أتجه إلى



body {
كلمة Body تعني الجسم , وتعني جسم القالب كامل ..
نذهب إلى التخطيط ثم إلى تحرير Html رأينا القالب أمامنا بأكواد الاتش تي ام ال , نبحث الآن عن body { ..
ملاحظة : عند البحث استخدم CTRL+F لتسهيل عملية البحث .



وجدنا في القالب 2 body { .. هذا الأول ..



body { font-family: 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Arial, 'Lucida Sans', 'Lucida Sans Unicode', Helvetica, sans-serif; font-size: 13px; }
ونجد تحت هذا العنصر الخط وحجم الخط . font and font size

أما البدي الثاني : فهو المطلوب لنا تقريبا

كود بلغة HTML:
body { min-width: 714px; color: #000; background-color: #a9ac99; text-align:center; }
نلاحظ تحت Body الثاني
كود بلغة HTML:
text-align:center;
نغير center وهي التي تعني الوسط , إلى اليمين وتعني right لتصبح هكذا
كود بلغة HTML:
text-align:right;
.
أيضاا دائما ما أضيف هذا العنصر

كود بلغة HTML:

direction:rtl;
تحت Body وتعني هذه العبارة تغيير التنسق من اليمين إلى اليسار [ راجع الموضوع السابق ]

ليصبح Body في المحصلة النهائية هكذا وقد غيرنا فيه ما يلزم

كود بلغة HTML:
body { min-width: 714px; color: #000; background-color: #a9ac99; text-align:right; direction:rtl; }
الآن قطعنا شوطا كبيرا في تعريب القالب ,  [ ألم أقل لكم أن التعريب سهل ]




بقي لنا الآن أمران فقط , يحتاجان إلى تعريب , وإلى الآن , لم نستخدم إضافة Firebug [ راجع الدرس الأول ] , فلذلك قد جاء وقتها الآن .
إليكم هذا الفيديو
http://www.youtube.com/watch_popup?v=q5wgCG6OL5Q

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

كود بلغة HTML:
#beta h2 {
وبحثنا عنه في القالب ووجدناه , وبعدها حذفنا من تحته
كود بلغة HTML:
letter-spacing:0.3em;
لأنها تدل على تقطيع الأحرف , وهذه الخاصية لا تصلح مع الحروف العربية المتشابكة ..
ثم أضفنا تحته , عنصر التنسيق من اليمين إلى اليسار وهو ذا

كود بلغة HTML:
text-align:right;
وأصبح التنسيق من اليمين إلى اليسار , فإضافة فاير بق تسهل علينا الكثير من الأمور في التعريب , بحيث تجعلنا نرى التغييرات التي أجريناها , بسرعة .. وهكذا انتهينا من تعريب عناوين القائمة الجانبية.

بقي علينا تعريب أمر واحد فقط , وهو تعريب النص الذي تحت عناوين القائمة الجانبية , وأمره بسيط جدا ..




ننسخ هذه العبارة الموجود في الصورة ثم نضعها في مربع البحث |, مثل الفيديو السابق . . ونغير left إلى right في القالب .

وهكذا سيكون القالب معرب بالكامل في واجهته الرئيسية ..


  • في الدرس القادم , سنغير خط القالب . وسنكمل بعض الأشياء .
هذا الدرس غير مخصص للأسئلة , ولكن أريد من كل واحد منكم أن يحمل القالب الغير معرب وأن يعربه باتباع الشرح الموضوع هنا , لكي تعربوه بأنفسكم بعد أن استفدتم من الشرح هذا . وبعد أن تجربوا تعريبه ستتعلمون الكثير , ثمّتَ ستسألوني عن الأخطاء التي وقعتم فيها , أو ربما التي وقعت فيها أنا , ولكن وكما قلت لكم كل أسئلتكم اطرحوها في الدرس القادم .

ملاحظة :

لتحميل القالب الغير معرب من هنا http://btemplates.com/2008/03/09/relaxation/demo/


____
نبدأ معكم الدرس الجديد وهو في كيفية تغيير خط القالب , وسبق أن وضعت شرحاً عاما لكيفية تغيير الخط في قالب ما . وهو هنا http://www.ar-blogger.com/vb/showthread.php?t=53
...........
لذلك لن نطيل عليكم هذا اليوم , ولكن سنخبركم ببعض الأمور فقط :

  • تستطيع أن تجعل لكل عنصرٍ في القالب خطا مميزا , مثلا عنوان التدوينة له خط Arial , وخط النص tahoma , إلى غير ذلك .
  • لتجعل لكل عنصر خطا مميزا عليك أن تضيف هذه العبارة تحت العنصر الذي تريده font-family: وتضع بعد النقطتين الرأسيتين الخط الذي تريده , مثلاً tahoma وتختم بهذه العبارة ;لتصبح هكذا
    كود بلغة HTML:
    font-family:tahoma;
في قالبنا الذي طبقنا عليه سابقا ستجد نوع وحجم الخط موجود في Body راجع الشرح . ابحث في القالب عن font-family , وغير الخطوط التي بجانبه إلى tahoma أو إلى الخط الذي تريده .
 

      أتمنـــــى أن يكــــون الدرس قد أعجبــكم ونال على استحسانكم
بانتــــظار تطبيقاتكم :)
تقبــلوا فـائق تحياتي ..
أختـكم : Haifaa

0 التعليقات :

إرسال تعليق

لاتقرأ وترحل ..
بل ضع لك بصمة في المكان قبيل الرحيل ..