استخدم تويتر بوتستراب لمواقعك العربية

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

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

وبما أني أملك من الكسل ما يمنعني من المرور على حوالي خمسة آلاف سطر CSS لتعديلها بما يناسب اتجاه اللغة العربية، فقد كدت أن أستسلم، لكن بحثاً أخيراً يائساً جاءني بالحل.

استخدم تويتر بوتستراب لمواقعك العربية

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

كان الحل على الشكل التالي:

  1. تنصيب Node.js.
  2. تنصيب حزمة خاصة بـ Node.js اسمها R2 باستخدام NPM.
  3. تحويل ملفات CSS التي تنتجها Twitter Bootstrap باستخدام R2.
  4. كل حل يولد مشاكل جديدة.

لا تخف من الأسماء الجديدة، سنمر عليها خطوة بخطوة.

1. Node.js:

Node.js منصة برمجية مبنية على Chrome’s JavaScript runtime لتسهيل بناء تطبيقات سريعة وقابلة للتوسع على الشبكات بشكل عام. شعبيتها تزداد حالياً بشكل كبير نظراً لسهولة تعلمها وسرعتها الفائقة وإدارتها الممتازة للموارد.

للتعرف على Node.js بشكل أكبر أنصحكم بمتابعة هذه السلسلة القصيرة من الدروس التعريفية حيث أننا لن نتوسع كثيراً في هذا الموضوع لعدم الخروج عن موضوعنا الرئيسي. كل ما عليك فعله هو تحميل Node.js من موقعها الرسمي وتنصيبها كأي برنامج عادي (إذا كنت تعمل ضمن بيئة ويندوز، هناك تعليمات للعمل ضمن البيئات الأخرى).

الصفحة الرئيسية لموقع NodeJS

للتأكد من صحة تنصيب Node.js نقوم بتشغيل سطر الأوامر بضغط زر ويندوز على لوحة المفاتيح وحرف R، ضمن الحقل النصي ندخل cmd ونضغط OK.

تشغيل واجهة سطر الأوامر

ضمن سطر الأوامر ننفذ الأمر التالي:


node --version

إذا لم يظهر رقم الإصدار في السطر التالي فهناك مشكلة ما، قد تحتاج أحياناً لإعادة إقلاع الحاسب بعد تنصيب Node.js مباشرة للعمل عليها بشكل صحيح.

التحقق من صحة تنصيب NodeJS

الجزء الذي يهمنا من Node.js هو مدير الحزم Node Package Manager (اختصاراً NPM). تتمثل مهمة NPM في إدارة وتنصيب تطبيقات أو حزم برمجية مكتوبة ضمن بيئة Node.js لاستخدامها على أي حاسب يحوي Node.js، بشكل مشابه – نوعاً ما – لبيئة تشغيل جافا (JRE).

سنستخدم NPM في الخطوة التالية.

2. تنصيب R2 باستخدام NPM:

حزمة R2 موجودة كمشروع على Github  ويمكنك الحصول عليها بثلاث طرق:

  1. زيارة صفحة R2 على Github وضغط زر التحميل (ZIP) ثم فك ضغط الملف الذي قمت بتحميله.
  2. في حال كنت تستخدم GIT لإدارة الشيفرات البرمجية (وهو ما أنصح به بشدة) يمكنك استخدام الأمر التالي:
    git clone https://github.com/ded/R2.git
    

    وهنا يتولى GIT مهمة نسخ الملفات من الإنترنت لحاسبك.

  3. استخدام NPM مباشرة لتحميل وتنصيب الحزمة كما سنرى بعد قليل.

صفحة R2 على github

لتنصيب حزمة ما، نقوم باستخدام الأمر (npm install) وتمرير اسم الحزمة المطلوبة (أو مسارها على القرص الصلب في حال وجودها عليه)، وفي حالتنا هنا سنستخدم الخيار (global– أو g-) لجعل R2 قابلة للاستخدام ضمن سطر الأوامر بغض النظر عن المجلد المحدد حالياً:


npm install R2 -g

تنصيب R2

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

R2 بعد التنصيب

لتجربة R2 سنستخدم المثال الموجود على موقعها الرسمي ضمن ملف CSS بسيط (وليكن اسمه test.css).

مثال

ننفذ R2 ضمن سطر الأوامر كما يلي (بعد الانتقال للمجلد الذي يحوي ملف المثال):


r2 test.css test-rtl.css

أمر التحويل

إذا تمت العملية بنجاح سنجد ملفاً اسمه test-rtl.css (مررنا اسم ملف الخرج ضمن الأمر)، وسيحتوي هذا الملف نفس قواعد التنسيق مع عكس الاتجاه عند الحاجة.

ملاحظة: تقوم R2 بضغط ملفات الخرج بإزالة الفراغات والتعليقات، لكن تم إعادة تنسيق الملف لتوضيح المثال.

شيفرة CSS بعد التحويل

3. Twitter Bootstrap:

نصل الآن للعنصر الأساسي، مكتبة تويتر بوتستراب، والتي يمكن الحصول عليها بإحدى طريقتين:

  1. تحميلها مباشرة من موقعها الرسمي.
  2. تحميل نسخة مخصصة.

الموقع الرسمي لـ Twitter Bootstrap

حسب الطريقة التي تتبعها، ستجد ضمن المكتبة ملف bootstrap.css، وقد يكون مرفقاً بملف آخر اسمه bootstrap-responsive.css. ليس عليك سوى استخدام R2 للتحويل:

r2 bootstrap.css bootstrap-rtl.css
r2 bootstrap-responsive.css bootstrap-responsive-rtl.css

مع أننا أتممنا عملية التحويل، لكن الحياة ليست بتلك السهولة!

4. نواقص ومشاكل

فعلاً كما قال مورفي “كل حل يولد مشاكل جديدة”، إذاً ما الذي حصل هنا:

أولاً- ضغط الملفات:

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

ملف CSS مضغوط

معالجة هذه المشكلة غاية في السهولة إذا كنت تملك الأداة المناسبة، نستخدم هنا Adobe Dreamweaver، حيث نقوم بفتح الملف المطلوب والانتقال لقائمة Command ثم Apply Source Foramtting.

ملاحظة: ينصح بعد الانتهاء من التعديلات إعادة إنشاء نسخة مضغوطة (minified) من ملفات CSS باستخدام أدوات مثل YUI Compressor لاختزال حجوم الملفات وتسريع التحميل وتحسين الأداء.

إعادة شيفرة CSS إلى حالة قابلة للقراءة

ثانياً- مشكلة Media Queries:

لاحظت عند أول استخدام وجود بعض المشاكل في عرض الصفحة، وبعد البحث وجدت أن R2 لم يقم بتحويل أول قاعدة من أول محدد من كل قسم يبدأ بـ media@.

انتبه! المشكلة في أول قاعدة من أول محدد فقط (السطر المحدد ضمن الصورة).

مشكلة Media Queries

ثالثاً- الأقواس المكررة:

لاحظت أحياناً تكرار أقواس الإغلاق بدون سبب، الحل هو البحث عن قوسين متتاليين مع اختيار خاصية (Ignore whitespace) وحذف أحد القوسين عند الحاجة.

انتبه! تأكد أنك لا تحذف قوس إغلاق لـ Media Query، عليك حذف الأقواس الزائدة فقط.

مشكلة الأقواس

رابعاً- غباء إنترنت إكسبلورر:

يوجد ضمن ملفات CSS الخاصة بـ Bootstrap الكثير من الاستخدامات لقواعد تنسيق مسبوقة بمحرف النجمة (*)، وهو حل لإجبار متصفح Internet Explorer على استخدام قيم تهملها باقي المستعرضات، المشكلة هنا أن R2 لا يرى هذه القواعد لسبب ما ولا يقوم بتحويلها، مثال:


*padding-left: 20px;

للأسف، اضطررت هنا للبحث عن جميع أماكن استخدام النجمة يدوياً، لتسهيل البحث يمكن استخدام التعبير العمومي (Regular Expression) الموجود في الصورة التالية عوضاً عن البحث عن محارف النجمة فقط.

لا تنسى تحديد الخيار المناسب (Use regular expression).

مشكلة القواعد المسبوقة بـ *

خامساً- جافاسكريبت:

تضم مكتبة تويتر بوتستراب مجموعة مفيدة من إضافات jQuery، لكن بعضها قد لا يعمل بشكل صحيح عندما يصبح اتجاه الصفحة من اليمين لليسار.

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

في الختام

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

النتيجة النهائية

نرجو أن تكونوا قد أفدتم من هذا الدرس، وأن تحمسكم هذه المقدمات المتواضعة للتعرف على تقنيات لم تكونوا تستخدمونها مثل Node.js و Git و Github.

تسعدنا مشاركاتكم ويسرنا الرد على أسئلتكم ضمن التعليقات.

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

14 thoughts on “استخدم تويتر بوتستراب لمواقعك العربية

  1. سلام عليكم و شكرا على الموضوع الجميل و المفيد
    عندي سؤال .. أنا لم افهم بعد تحديدا ما هو البوتستراب
    هل هو cms اي مثل ووردبريس تستطيع ان تكتب المواضيع من لوحة احكم خاصة ام ماذا ؟
    أم تصمم به فقط الواجهة و أنت تقوم ببرمجة الموقع ؟
    و شكرا :)

    • بوتستراب مكتبة لبناء واجهات الاستخدام، ميزتها أنها تحوي الكثير من الستايلات التي تلزم عند البدء بأي مشروع، ومجموعة من إضافات جافاسكريبت، بتوافق جيد مع كافة المستعرضات. أي أنها لا تضم ميزات إدارة ونصوص برمجية للتعامل مع قواعد البيانات، هي ببساطة HTML و CSS و JavaScript.

      أنصحك بقراءة مستندات الدعم على الموقع الرسمي (القائمة العلوية).

      وأود أشير أن المكتبة مبنية باستخدام لغة LESS التي تسرع من إنتاج ملفات CSS، لكن لم أذكر ذلك سابقاً لعدم رغبتي بالتوسع في الموضوع أكثر من اللازم.

      شكراً لتخصيصك الوقت للقراءة على مدونتنا :)

  2. السلام عليكم ورحمة الله وبركاته..
    مثلما وقعت في الحب من أول نظرة بمكتبة Twitter Bootstrap، فإنني وقعت في حب مدونتكم من أول نظرة فبارك الله فيكم :)
    هذا أول تعليق لي، وبقراءتي لمشكل اتجاه العربية أحببت هنا أن أشارككم أداة أستعملها دائما في مثل هذه الحالات، أي تعريب كود css بكل سهولة، ولا أرى فيها المشاكل التي واجتهتها هنا مع R2، ثم إنها فقط خدمة على الويب أي لا تحتاج إلى كل تلك الأمور في التنصيب والضبط وخلافه، لكنني لم أجرب تحويل ملف خاص بموقع responsive لكن أظنها ستنجح فيه، ورابط الخدمة هو:
    http://cssjanus.commoner.com/
    لك أن تجربها أخي محمود ولعله لا بأس من تخصيص تدوينة عنها إن وجدتها تستحق..
    شكرا لك، ومع تحياتي الخالصة لك يا طيب..

    • شكراً لكلماتك أخ عبد الهادي، جربت الأداة ووجدتها ممتازة، وهي من السهولة بحيث لا تحتاج لتخصيص موضوع عنها، ولكن سأشاركها مع متابعينا على شبكات التواصل الاجتماعي، نرجو أن نراك هنا 😉

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

  3. بارك الله فيك على الموضوع القيم أخي محمود، لكن أريد أن أنبه لنقطة سلبية في العالم التقني العربي:
    نهتم دائما بالحلول الشخصية و المؤقتة لمثل هذه المشاكل مما يجعلنا نبطأ عجلة التقدم. بحيث يمكن لأي مطور عربي أن يساهم في بوتستراب على GitHub و يقترح الحلول المناسبة للإستعمال العربي ليتم دمجها مع المشروع الأصلي أو حتى التفرع منها إلى مشروع آخر يناسبنا مستقبلا. و لا أستثني نفسي من النقد، لكن سأحاول أن أساهم بقدر المستطاع في حل المشكل بعد أن أتفرغ.
    أظن بأن سبب تهاوننا في الأمر يعود إلى نقص المنافسة العربية في هذا المجال.
    جرب مثلا أن تبحث عن كلمة Arab أو Arabic على موقع GitHub و ستفهم المقصود.

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

    آسف جدا على الإطالة، و لكن كنت أفرغ ما بالقلب من هم و برمجيات طفيلية ترسبت برأسي من زمان بعيد.

    • معك خق أخ محمد، وقد قمت بالفعل بالتبليغ عن الأخطاء على GitHub فور اكتشافها، ولم يتم العمل عليها حتى الآن، وكنت لأقوم بالعمل المطلوب لو كان لدي خبرة أكبر مع Node.js (هذا ليس عذراً طبعاً، لكنه أضعف الإيمان)… وبالنسبة للتواجد العربي على الإنترنت فهذا الموضوع يقتلني منذ سنين، وهو سبب إنشاء هذه المدونة، لكني أعتقد أن الوضع بدأ بالتحسن مؤخراً مع إنشاء مدونات تقنية احترافية، وازدياد التواجد العربي على منصات تواصل المصممين والمطورين مثل Behance

  4. هناك موقع ايراني معرب البوتستراب باللغه الايرانيه لكن لا يهم ذلك فالاحرف عربيه ^_^ يعني فقط نزل النسخه وتمتع بدون مشاكل باستخدام اللغه العربيه
    الموقع
    http://rbootstrap.ir/

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

  6. شكرا لك لكن تمنيت لو أن هناك من المصممين العرب والمطورين من قامو بتعريبه بالكامل لأنه بلات فورم مفيد للبرمجين والصممين معا ..

  7. اشكرك جزيلا على مجهودك الرائع . اتمنى لك كل التوفيق والنجاح فأنت شخص مستحق لذلك

اترك رداً على مبرمج إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *