دورة تعديل القوالب وألأستيلات للمنتديات

max_b7: عدد المساهمات: 2
الردود: 121
تاريخ التسجيل: 02/11/2011

مساهمة رقم 1

دورة تعديل القوالب وألأستيلات للمنتديات

مُساهمة من طرف max_b7 في الأربعاء نوفمبر 30, 2011 1:22 pm

[center]السلام عليكم ورحمة الله وبركاته

إنشاء الله اليوم بيكون درس تعريب وتعديل القوالب والإستايلات وحل المشاكل فيهما
طبعا هذا الدرس يمكن يطبق على استايل أو قالب لمنتدى أو مجلة
الصور لكبر حجمها أبقيت روابطها فقط وهي مرتبة كما يفترض أن تراها
وآسف لأنه تنسيق الموضوع ضعيف {أسوء شي أجيده هو التنسيق}

أول شي :-

الأدوات المطلوبة تواجدها في الجهاز

1:- متصفح فايرفوكس {ويفضل آخر إصدار}
2:- إضافة FireBug للفاير فوكس مركبة {وشي اكيد الأفضل آخر نسخة}
3:- إضافة Web Developer للفايرفوكس مركبة {وأكيد آخر نسخة}
4:- السيرفر المحلي {أنا أستخدم AppServ} وطبعا هو إختياري {يمكنك العمل على موقعك مباشرة ولكنك ستستهلك وقتا أكثر}
5:- محرر NotePad++ مثبت على الجهاز {ويفضل آخر نسخة}
6:- آخر نسخة من مجلة جملة أو أي مجلة أو منتدى أو ... {آخر نسخة لأنه لن يقوم موقع بالعمل على نسخة قديمة}
7:- آخر نسخة من القالب أو الإستايل الذي تريد التعديل عليه {يفضل أن تحمل مباشرة من موقع المصمم لتضمن عدم العبث بها}
8:- تقريبا ماراح تحتاج شي إضافي {بحسب إمكانياتك الشخصية}

ثاني شي :-
الأشياء المطلوب تواجدها في الشخص الذي سيقوم بالعمل

1:- إتقان لغة HTML {على الأقل الأساسيات والباقي يبحث عنه لو تعطل}
موقع عربي
http://ar.html.net/tutorials/html/
و
آخر إنجليزي
http://www.w3schools.com/html/default.asp
2:- إتقان لغة CSS {على الأقل أساسياتها أو إلمام بسيط بها}
موقع عربي
http://ar.html.net/tutorials/css
و
آخر إنجليزي
http://www.w3schools.com/css/default.asp
3:- معرفة بلغة PHP {تعرفو أنه بيكون في ملفات القالب أجزاء بلغة php مثل عبارات if الشرطية وغيرها}
4:- إتقان لغة JavaScript {أو إلمام بسيط بأساسياتها وقد لاتحتاجها -- ذلك يعتمد على القالب نفسه}
5:- إتقان أو معرفة بأساسيات بناء القالب أو الإستايل {يعني تكون عندك معرفة بكل ملف شنو المفروض يكون }
هذا درس بسيط
http://docs.joomla.org/Tutorial:Creatin ... 1_template
6:- سرعة الفهم والبديهة و التفكير بعقلانية {صدقوني بدونها راح تتعذبو وتسألو عن أشياء تعرفوها لمجرد عدم التفكير بها قليلا}
7:- أهم شي هو الصبر {لأنك إذا ماراح تصبر في الشغل قد لاتنتج بالمستوى المطلوب}

============================================
========================
نبدأ بالشرح
أولا شرح الأدوات المطلوبة {طبعا الجديدة منها على معظمكم}

1:- إضافة FireBug {لم أشرح كيفية تثبيتها لأنها مثل أي إضافة أخرى للفايرفوكس }
وهذا شرح أجنبي لها
http://docs.joomla.org/Tutorial:Using_F ... la_Website
إضافة جبارة جدا وسهلة لي عملي جدا {سأشرح أهم ماسنحتاجه منها والباقي لكم البحث والإستزادة}
طبعا كل الشكر للأجنبي الذي نصحني بها
طيب نبتدي شرح الإضافة --- تابعو الصور

http://i37.tinypic.com/2djxuz9.jpg
http://i33.tinypic.com/vfzc5u.jpg
http://i33.tinypic.com/2ijgqx.jpg
http://i33.tinypic.com/dcy9gg.jpg
http://i35.tinypic.com/vfi4g9.jpg
http://i35.tinypic.com/261mh6o.jpg
http://i36.tinypic.com/eimn90.jpg
http://i34.tinypic.com/qn5qvk.jpg
http://i33.tinypic.com/xfbuoy.jpg
http://i33.tinypic.com/qrg9vo.jpg
http://i35.tinypic.com/1z6d005.jpg
http://i34.tinypic.com/339lrp2.jpg

وبكذا إنشاء الله شرح هذه الإضافة مفهوم وأي شي تبون أزيده شرح عطوني خبر
========================
========================

2:- شرح إضافة Web Developer
إضافة ممتازة جدا ولها إمتيازات عن غيرها سأتطرق لها في الشرح
طيب نبتدي الشرح --- تابعو الصور

http://i35.tinypic.com/hvvuwo.jpg
http://i35.tinypic.com/29oplsg.jpg
http://i36.tinypic.com/2iucjgy.jpg
http://i38.tinypic.com/ie2lxg.jpg
http://i36.tinypic.com/2v1w5rt.jpg
http://i37.tinypic.com/bi1660.jpg
http://i36.tinypic.com/5dnsbp.jpg
http://i34.tinypic.com/2nr35ar.jpg
http://i36.tinypic.com/nq91qx.jpg
http://i37.tinypic.com/2i7pv8m.jpg
http://i35.tinypic.com/1znsyh3.jpg
http://i37.tinypic.com/15mfxp5.jpg
http://i38.tinypic.com/1zoas5l.jpg
http://i38.tinypic.com/339leo4.jpg
http://i37.tinypic.com/f0c3o0.jpg
http://i35.tinypic.com/vercoz.jpg
http://i36.tinypic.com/2zz3w5j.jpg
http://i34.tinypic.com/b5qmg6.jpg
http://i38.tinypic.com/23hxahe.jpg
http://i38.tinypic.com/14jnscg.jpg
http://i37.tinypic.com/2pt5nv9.jpg
http://i35.tinypic.com/oqej4i.jpg

وبكذا إنشاء الله شرح هذه الإضافة مفهوم وأي شي تبون أزيده شرح عطوني خبر
========================
========================

3:- شرح أهم مانحتاجه في محرر NotePad++
محرر ممتاز يدعم الكثير من لغات البرمجة ومنظم ويلون الأكواد وبمجرد أن تقوم بشيء خاطئ يتغير لونه ولون كل شيء سيتأثر به في ما بعده
أعتقد أن الجميع يعرف إستخدام المحررات وسأعود لشرحه مرة أخرى لأنه حدث خطأ وفقدت الملف الخاص بالشرح وسأعيد كتابته

========================
========================
========================

ألحين ندخل في شرحنا المهم

أول شي شنو التعريب نفسه /b]

هو تعديل جميع الملفات الضرورية في الموقع لتتغير طريقة الكتابة
من
اليسار إلى اليمين {ltr}
إلى
اليمين إلى اليسار {rtl}
و إعادة الكتابة على الصور المكتوب عليها بالإنجليزي إلى العربي وقلب مايحتاج منها إلى القلب {القلب عادة يكون بشكل أفقي }
وعادة تعديل الإستايل أو القالب يكفي {ذلك يعتمد على مبرمج السكربت}

[b]الحين نشوف شنو نحتاج لنفعله بعد ماعرفنا شنو نقصد بالتعريب /b]

1:- قلب إتجاه كتابة النص
2:- مسح الكتابة الإنجليزية عن الصور والكتابة عليها بالعربي وقلب مايحتاج منها {عادة توضع الصور في مجلد فرعي بعنوان ar}
3:- تبديل مكان اللوجو {Logo} من اليسار إلى اليمين {أو بحسب مايعجبك وليست شرطا}
4:- تبديل أماكن وإتجاهات القوائم من اليسار إلى اليمين
5:- وضع لمستك الخاصة على القالب {تعديل تراه ضروريا ولاأستطيع ذكره لأنه شيء من رأيك الخاص مثلا محاذات الكتابة في القوائم يراها
البعض في الوسط أفضل والبعض يراها بمحاذات اليمين أفضل}

ألحين راح أعطيكم نبذة عن كل نقطة :-

[b]1:- قلب إتجاه النص

لها عدة طرق منها :-

A:- بإستخدام text-align في css
وتأخذ قيم {Left - Right - center} وهناك قيمتان أخرتان ولكن هذه هي المهمة لكم الآن
مثال
http://www.w3schools.com/Css/tryit.asp? ... text-align

B:- أن تقلب إتجاه الجدول كاملا أو الخلية كاملة بإستخدام direction في css
وتأخذ قيم {ltr للكتابة من اليسار إلى اليمين} و {rtl للكتابة من اليمين إلى اليسار} وهناك قيمة أخرى {لاتحتاجونها الآن}
مثال
http://www.w3schools.com/Css/tryit.asp? ... _direction

2:- مسح الكتبة الإنجليزية عن الصور والكتابة عليها بالعربي وقلب مايحتاج منها
تتم عن طريق برامج تحرير الصور مثل الفوتوشوب و Gimp
وهي تعتمد بشكل أساسي على خبرتك في التعامل مع البرامج ونحن هنا لسنا بصدد شرح اي منهما

3:- تبديل مكان اللوجو {Logo} من اليسار إلى اليمين
تتم عن طريق عدة طرق ومنها :-

A:- تعديل مكانه عن طريق float في css
وهي تأخذ قيما منها {Left - right} وهناك قيمتان أخرتان غير مهمتين لنا الآن
مثال
http://www.w3schools.com/Css/tryit.asp? ... ycss_float

B:- أن تقلب إتجاه الجدول كاملا أو الخلية كاملة بإستخدام direction في css
وتأخذ قيم {ltr للكتابة من اليسار إلى اليمين} و {rtl للكتابة من اليمين إلى اليسار} وهناك قيمة أخرى {لاتحتاجونها الآن}
مثال
http://www.w3schools.com/Css/tryit.asp? ... _direction

C:- تعديل مكانه عن طريق التعديل على الجدول
مثلا تبديل محتويات العمود الأيمن بالأيسر {العمود في html هو } أو بحسب فهمك للموقف
وفي أحيان كثيرة تكون هذه الحركة ضرورية لأنه قد تكون هناك محتويات يمينه ويؤذيها تغيير {float أو direction}
بعض الأحيان تحتاج للتلاعب في المحتويات أو التنازل وحذف بعضها لتظهر بشكل صحيح

4:- تبديل أماكن وإتجاهات القوائم من اليسار إلى اليمين

A:- بإستخدام text-align في css لكل خلية في القوائم

B:- أن تقلب إتجاه الجدول كاملا أو الخلية كاملة بإستخدام direction في css

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

========================
========================

أشياء إضافية بالخصوص للعاملين على قوالب جوملا

1:- لإضافة مكان موديلات جديد أضف التالي لملف index.php في ملف القالب

Code:
countModules('Hussain')): ?>

أول عبارة هي عبارة if شرطية بحيث لو لم يكون هناك أي موديلات تعرض في Hussain فإنه هذه العبارات لن تظهر
يعني لو ماكان عندك أي موديل منشور مكانه في Hussain لن يتم عرض الجدول حق Hussain وكانه غير موجود أساسا
وراعي تطابق الإسم فيها مع إسم مكان الموديل {شوف السطر الأول والرابع فيهم Hussain}

عبارة
Code:

هذه لعرض الموديل وممكن أنك تحط عدد لانهائي منها {لو تكرر إثنين فيهم نفس الإسم سيعرضون نفس الموديلات أي الشغل راح يكون مكرر}
ولحظ كلمة style يجي بعدها طريقة عرض الموديلات {في أكثر من طريقة عرض مختلفة}

ولاتنسى أن تفتح ملف templateDetails.xml الموجود داخل نفس ملف القالب وتضيف له التالي تحت
Code:
Hussain

هناك درس فيه تفصيل أكثر عن تصميم القوالب {أظن جملة عيون هم إلي سووه}

2:- في حالة إضافة صورة أو أي ملف في القالب وأردته أن يكون ذو تثبيت تلقائي {من Install في لوحة تحكم جملا}
فأضف التالي إلى templateDetails.xml تحت
Code:
index.php
component.php
templateDetails.xml
template_thumbnail.png
images/background.png
css/style.css

مثال كبير ولكن لترو أنه أي ملف يمكن أن يضاف بنفس الطريقة ولكن راعي أن تضع المسار والإمتداد مثل ماتشوف في الأمثلة

3:- عند البحث عن class أو id راعي الإضافات التي تضاف لنفس الموديل
مثل
_menu
_nav

حيث ستكون مضافة إلى نهاية class أو id

وهناك أكثر ولكنني حالما أرتب أفكاري سأضعها
========================
أتمنى أن تكونو قد فهمتم أنه التعريب والتعديل يعتمد بشكل أساسي على مساتواك في لغات البرمجة المذكورة وفهمك لتركيب البرنامج
========================
============================================

أتمنى أني أكون قدمت شيء مفيد

وأرحب بأي إقتراحات أو تنبيها أو طلبات أو أي شيء ممكن أقدمه لكم

وهذه مجرد البداية والقادم أعظم إنشاء الله

ولا أرجو منكم إلا الدعاء في الغيب لوالدي ولي {عندي إختبار مهم بعد العيد فدعواتكم}

والدرس ذو حقوق مفتوحة {يسمح النقل والإقتباس والتعديل ووو... ولكن يمنع حذف الحقوق وعند النقل أرجو ذكر المصدر }

وشكرا لكم

تحياتي

[/center]

MaxWorld

دورة تعديل القوالب وألأستيلات للمنتديات

دورة تعديل القوالب وألأستيلات للمنتديات

دخول

Google 1+

المتواجدون الآن ؟

بحـث

المواضيع الأخيرة