يُسمح للزوار بالتعليق.
محرر بلص - مميزات, أمثلة, شرح لآلية عمله و بنيته الأساسية.
هاني كتبه بتاريخ 23/08/2009 الساعة 2:05 ص
هاني عدله بتاريخ 14/09/2009 الساعة 9:40 م (إضافة صورة لخيارات المنتج)
هاني عدله بتاريخ 14/09/2009 الساعة 9:40 م (إضافة صورة لخيارات المنتج)
مبارك عليكم هذا الشهر الفضيل, شهر رمضان الكريم, و قبل أن تستمر في القراءة, أنصحك بالتبديل إلى الشكل المتمدد من أسفل الصفحة.
تكلمنا سابقاً في المقال "محرر بلص 1.0 - مقدمة عن المنتج الجديد" عما كنا نرغب بالوصول إليه في المحرر الجديد, و نعرض في هذا المقال التطور و خط سير العمل الذي مشينا عليه للوصول إلى مبتغانا.
كبداية, اعتمدنا في عملنا بشكلٍ أساسي على JavaScript, و لجأنا إلى الاستفادة من خاصية توسيع وظائف الدوال التي تتيح إمكانية إدخال وظائف جديدة لأي دالة موجودة بالأساس, بدلاً من اللجوء إلى الطريقة السيئة التي تعتمد على إجراء تعديلات ثقيلة على الملفات, مما سيتسبب بعدم التوافقية مع أي ترقيات جديدة للمنتدى, و حتى اشرح لكم طريقة توسيع وظائف الدوال بشكل مبسط, سأستخدم المثال التالي:
توجد دالة لا يمكن الاستغناء عنها في أي لغة برمجية, ألا و هي trim, و تكمن أهميتها في إزالة أي مسافات ببداية أو نهاية النص, و لكن للأسف هذه الدالة غير متوفرة في JavaScript, و لحسن الحظ, فإن مرونة JavaScript تمكننا من كتابة دالة تؤدي هذا الغرض بالتحديد على الشكل التالي:
رمز برمجي:
trim = function (t) {
return t.replace(/^\s+|\s+$/g, '');
};
رمز برمجي:
alert('a' + trim(' -b- ') + 'c');
رمز برمجي:
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
};
رمز برمجي:
alert('a' + ' -b- '.trim() + 'c');
و أنشأنا ملفات JavaScript لكل زر على حدة, من باب التحميل عند الحاجة, و غرضه الأساسي هو التنظيم و التقليل من زمن تحميل الصفحة, و استخدمنا في كل ملف من هذه الملفات دوال بدون أسماء مما يحد من تداخلها مع بعض أو الكتابة عليها. و أضفنا لكل واحدة منها ميزة التعرف على رمزها الذي تدرجه في المحرر. لتعيد بدورها تعيين الخيارات إلى مكانها الأساسي عند إجراء التنسيق على النص المحدد, و خاصية التعرف على الروابط و النصوص, لتنقلها إلى الحقول المخصصة لها. و للتوضيح, سنستخدم مثالين على ذلك:
المثال الأول:
حيث عند تحديد رابط و نص و الضغط على إدراج ملف وسائط, فستجد أن المحرر وضع الرابط في المكان المخصص له, و النص قام بتعيينه كعنوان للرابط.
المثال الثاني:
و من هذه الصورة التي رسمنا عليها خطوطاً متقاطعة للدلالة على المدى البرمجي المستخدم في تأدية ذلك العمل. و بعكس ما تعتقدونه, فإن ذلك لا يدل على تعقيدات برمجية, بل على مرونة عالية فيه, حيث أن رموزها البرمجية روعي فيها إمكانية نقص المتغيرات و اختلاف ترتيبها, و جلب ما هو موجود بالأساس و ترك القيمة افتراضية في حال عدمه.
لم نكتفي بذلك, فقد رتبنا المحتوى بالتسلسل الذي قد يتّبعه أي مستخدم في تعبئة الخانات من خلال ترقيم كل خانة و زر, موفراً بذلك الانتقال الصحيح عند الضغط على زر الإبدال في لوحة المفاتيح "Tab", و بالتأكيد استخدمنا الخيار tabindex الذي يمكن تعيينه داخل وسوم HTML.
كما وظفنا زر الهروب "Esc" ليعمل على إغلاق النافذة, و أكبر زر في لوحة المفاتيح "زر الإدخال Enter" ليؤدي نفس الدور الذي يقوم به زر الاعتماد عند الضغط عليه بالفأرة, و صحيح أن القليل منا يستخدم لوحة المفاتيح في تأدية مثل هذه الأمور, و السبب في ذلك يعود للحداثة في استخدام الحاسب ممزوجاً بعدم استثمار مثل هذه الخدمات في صفحات الويب. لكن مثل هذه الوظائف الصغيرة توفّر الكثير و الكثير من الجهد و الوقت. و كما يقولون, فالوقت من ذهب.
و لتسهيل الاستخدام أكثر, استفدنا من رسائل البالونات alt في أي وسم أو حقل, حاوياً بداخله أبسط و أسهل و أكثر العبارات شيوعاً في الاستخدام, لتساعده في معرفة المطلوب منه بالتفصيل تجاه ملئ الحقول. كما لجأنا إلى JavaScript في تلوين الحقول الإلزامية أو عرض رسائل توضيحية صديقة, متفادين بذلك استخدام الدالة alert التي تجمد كامل المتصفح حتى ينقر المستخدم على موافق, ليعيد الحياة للمتصفح. و هذا يعتبر من أبشع أساليب البرمجة الصديقة للمستخدم. فلا يجب أن تفرض على المستخدم أي ضغوطات أو أساليب محددة, حتى لا تعطي له الفرصة بأن يتبلور لديه أي سلبية تجاه الخدمات التي تقدمها له.
رغبنا أيضاً بتطبيق تقنية التشغيل بعد اكتمال التحميل, أي عرض محتوى بعد اكتمال تحميل الصفحة. مما سيضفي فتحاً أسرع للصفحات, و وضع كافة ملفات JS في آخر الصفحة, و الذي يعتبر أفضل مكان لملفات JavaScript, بالإضافة إلى استخدامنا لأسرع أمر في جلب ملفات الأنماط الانسيابية:
رموز HTML البرمجية:
<link rel="stylesheet" type="text/css" href="clientscript/pe/plusvb_poem.css?v=100" />
و أيضاً طبقنا تقنية التشغيل بعد اكتمال التحميل على الوسم embed حيث يتم تشغيل ملفات swf أي ("Flash") بعد تحميل الصفحة, بالإضافة إلى ملفات MP3 و YouTube و الوسائط و RealPlayer, و كانت فعّالة جداً في سرعة تحميل الصفحة. حيث تبدأ العملية بعرض وسم نصي مضافاً له اسم نمط انسيابي خاص به, يحدد من بعدها نوعه (RealPlayer, YouTube, Flash, ... الخ.):
رموز HTML البرمجية:
<span class="flash">http://www.example.com/simple.swf</span>
العملية نظرياً, ممتازة. لكن اكتشفنا أن التكرار يدور حول نفسه بعدد يتراوح بين 60 - 200 مرة حسب عدد وسوم span في الصفحة. لذلك قررنا أن نبحث عن وسم يقل استخدامه في الصفحات, فوجدنا غايتنا في الوسم bdo. و أصبح التكرار يتراوح بين انعدامه إلى عدد الوسوم الواجب توليدها بالصفحة (بالمتوسط 5).
كما شكل ذلك سرعة أعلى في التوليد و تنفيذ الدوال, و هذه كانت الغاية من تدشينه. لكن الخبر المحزن هو أن توليد وسوم embed من خلال JavaScript يتسم بعدم فعاليته, حيث يتسبب في بعض الأحيان في تجميد الصفحة, و بعض المتصفحات ترفض الطلبات المتكررة (أي تمل بسرعة جراء ذلك), لذلك استغنينا عن هذه التقنية في جميع وسوم embed, واستخدمناها في صقل القصيدة و غيرها من الوسوم التي تعمل عليها بشكل جيد.
أسدى لنا هذا التعديل خدمتين أساسيتين, الأولى و هي السرعة العالية, و الثانية هي أمكانية مشاهدة ملفات Flash و MP3 و YouTube و الوسائط و RealPlayer فعلياً في المحرر المتقدم, حيث يمكنك تعديل أبعاد ملفات Flash بالفأرة, بالنفس الطريقة التي تعدل بها أبعاد نافذة من على سطح مكتبك. فكان ذلك بمثابة البشرى السارة. حيث سيوفر ذلك سهولة عالية للمستخدمين .
لنعد الآن إلى الموضوع, و نتوجه مباشرةً إلى تنسيق القصيدة الشعرية الذي كان بمثابة عائقٍ كبير واجهنا أثناء تطوير المحرر. حيث استغرق منا 3 أشهر من البحوث و التطوير. حيث أن الألية يجب أن تكون أبسط ما يمكن, و في نفس الوقت تتسم بمرونة عالية, لتعمل في أي وقت و زمان و من على أي متصفح. و تم ذلك بالفعل من خلال استثمار رابح في CSS.
سار العمل بسلاسة حتى لزمنا أن نحدد عرض القصيدة, فعينا القيمة إلى 50% من الخلية التي تكون القصيدة بداخلها. لكن ذلك بقي حتى نكمل أساسياتها و نجد الآلية المناسبة لحساب العرض المناسب, و بعد بحث عن حجم الحروف. وجدنا أن متوسط عرض الحرف العربي هو 7 من النقاط على شاشة الحاسب, رغم أن هذا صحيح في حالة كان عرض الخط معيّن إلى الحجم الأوسط (14pt) و تم توليده داخل متصفح Internet Explorer. حيث أن ذلك يختلف بنسبة 10% مع باقي المتصفحات, لذلك رفعنا متوسط عرض الخط إلى 8.1. و تكون العملية الرياضية لحساب عرض القصيدة على الشكل التالي:
النسبة المؤوية لحجم الخط (ضرب) أكبر شطر في القصيدة (ضرب) 8.1 (ضرب) 2
حيث يعبر الرقم 2 عن شطري البيت (صدر و عجز البيت), و أكبر شطر يتم تعينه حسب عدد أحرفه مستثنين منه حروفاً لا تحتل أي مكانة من الحجم, مثل التشكيل (الضمة و الفتحة ... الخ). و المخرجات تمثلت بعرض مقبول جداً للقصيدة, رغم تغيير طفيف بين أنواع الخطوط. فطمعنا بشيء أكثر من مجرد معادلة تعمل على PHP, طمعنا بشيء يمس القصيدة بكاملها مهما كانت أبعادها و حجم خطها و حتى اختلاف محتواها. فشاهِدنا فلم بدأ بالمغامرة و الحيرة, و توسطته مأساة, و ختم باستهلاك أقل للموارد (أحسبت بأني سأكمل جملتي بالخير منتصراً على الشر!).
بدأت العمل على دالة بلغة JavaScript, تقلص عرض القصيدة 5 نقاط كل مرة, حتى ينكسر أي شطر ما بالقصيدة (انكسار بالشكل لا بالوزن), ثم أجعلها تضيف 5 نقاط على آخر عرض كسر السطر. و الكسر عملت على حسابه من خلال تفقد طول القصيدة عند كل تقليص, و تغييره يدل على كسر. و الفكرة في غاية البساطة و غاية الكفاءة, و كان بمثابة السهل الممتنع لي. حيث أن الحل لهذه المعضلة لم أصل إليه إلا في منامي!, و حصلت بذلك على أفضل عرض يمكن الوصول إليه. لكن فرحتي لم تطل, فتنفيذ هذه العمليات يستغرق أربع ثوانٍ من زمن فتح الصفحة, و لا يمكن أن أسمح كمثل هذا زمن, فكررت نفس الرمز البرمجي المعني بالتقليص, لكن بقيمة أعلى من 5 نقاط, حيث عينته على ثمن العرض من خلال هذه المعادلة البسيطة:
رمز برمجي:
tw = Math.round(w / 8);
رمز برمجي:
function MPR(o)
{
var w2 = 0, i = 0, j = 0, tw = 0,
p = o.parentNode,
w = parseInt(YD.getStyle(p, 'width'), 10),
h = p.offsetHeight;
tw = Math.round(w / 8);
for (j = (w - tw); j >= 50; j = j - tw)
{
YD.setStyle(p, 'width', j + 'px');
if (p.offsetHeight > h)
{
tw = j + tw;
break;
}
}
tw -= 4;
for (i = tw; i >= 50; i = i - 4)
{
YD.setStyle(p, 'width', i + 'px');
if (p.offsetHeight > h)
{
w2 = 4 + i;
YD.setStyle(p, 'width', w2 + 'px');
break;
}
}
}
كفانا حديثاً بالطلاسم و التي لا تعني الكثير لغير المبرمجين, و لنسرد لكم المزايا الأساسية ملخصة على النحو التالي:
- جميع النوافذ تحوي على زر معاينة للروابط المدرجة بها.
- زر MP3 و مشغل خاص به. يعمل على أي نظام تشغيل و في أي متصفح عالمي.
- زر RealPlayer لإدراج ملفات RM, RAM, RMV.
- زر إدراج ملفات Media لإدراج AVI, MPEG,WMA.WMV... الخ.
- زر إدراج ملفات فلاش, مع خاصية تحديد عرض أقصى لها.
- زر إدراج مقاطع YouTube, مع إمكانية تحويل الروابط تلقائياُ عند إدراجها في المحرر و استخدام مشغلات خاصة تزيل رابط العودة إلى موقع YouTube.
- زر تنسيق القصائد الشعرية, متوافق مع كافة المتصفحات.
- زر إدراج المعادلات الرياضية.
- مفكرة العضو, مدعمة بخاصيتي إدراج ما تحويه إلى المحرر و جلب ما به إليها.
- زر تحويل الحروف الإنجليزية إلى عربية, مع التعرف على الوسوم الخاصة بالمحرر و عدم المساس بها.
- زر خاص بإزالة جميع أنواع الوسوم بالمحرر.
- تركيب سهل, فقط رفع للملفات (و التي تتم في الغالب عن طريق بلص إلى موقع العميل) و استيراد المنتج, و بعدها سيعمل بشكل مباشر.
- إمكانية تعطيل أي خاصية بالمحرر, من خلال لوحة تحكم بسيطة و أنيقة.
- جميع وظائف المنتج تعمل على أي متصفح عالمي.
- استخدام أقل رموز و عمليات برمجية تساهم في سرعة تحميل و فتح الصفحة بشكل كبير.
- تحميل العناصر المطلوبة فقط, مما يساهم ذلك من تقليل زمن التحميل و استهلاك معدل نقل البيانات للموقع.
- واجهة صديقة بسيطة جداً للمستخدم, تمكنه من التنقل بين الخيارات ببساطة و سهولة كبيرة.
- لا يوجد بالمنتج أي استعلام أياً كان نوعه.
- كل الرموز البرمجية تم اختبارها عدة مرات ليتم التأكد من أنها لا تسبب أي ضغط من أي نوع على الخادم أو حتى التسبب بتعليق المتصفح.
خيارات المنتج
و التالي عبارة عن صورة لكل وضيفة متبوعة بمثال قدر المستطاع:
ملف MP3
بدون عنوان للملف
مع عنوان للملف
------------------------
ملف RealPlayer
بدون عنوان للملف
مع عنوان للملف
------------------------
ملف وسائط
بدون عنوان للملف
مع عنوان للملف
------------------------
ملف Flash
------------------------
مقطع فيديو من youtube
------------------------
تنسيق قصيدة شعرية
| إذا غامَرْتَ في شَرَفٍ مَرُومِ | |
| فَلا تَقنَعْ بما دونَ النّجومِ | |
| فطَعْمُ المَوْتِ في أمْرٍ حَقِيرٍ | |
| كطَعْمِ المَوْتِ في أمْرٍ عَظيمِ |
------------------------
معادلة رياضية
نكتب مثلاً المعادلات التالية:
pi=sum{n=0}{+infty}{{(n!)^2 2^{n+1}}/{(2n+1)!}}
pi=22/7-int{0}{1}{{x^4 (1-x)^4}/{1+x^2}dx}
pi=3/4 sqrt{3}+24 int{0}{1/4}{sqrt{x-x^2}dx}
pi=22/7-int{0}{1}{{x^4 (1-x)^4}/{1+x^2}dx}
pi=3/4 sqrt{3}+24 int{0}{1/4}{sqrt{x-x^2}dx}
نحددهن و نضغط على الزر
, ثم تصبح المخرجات على الشكل التالي:
------------------------
مفكرة العضو
و يتبقى بعض المزايا التي لم نتممها بعد, لذلك أعتقد بأني سأؤجل عرضها للمستقبل. كخاصية الجدول و إضافة مشغل أخر لمقاطع YouTube, الذي أصبح أمرا لا بد منه في المنتديات الاجتماعية. بالإضافة إلى بعض الكماليات التي تصنفها بعض المنتديات على أنها من الأولويات.
و كخاتمة, فإن للأشياء الصغيرة قوة تظهر عندما تمزج مع بعضها البعض. و عندما تكون الواحدة منها قد بنيت بإتقان, فإنها تشكل مجتمعة شيئاً يوازي في إتقانه قيمة تتعدى ضعف إتقان كل أجزائه الصغيرة, حيث أن المعادلة الرياضية التي تتمثل بـ ( 1 + 1 = 2 ) لا تنطبق عليها. فالبحر تشكل من قطرة, و العسل اجتهدن به ألاف النحلات. فنشكر جميع العملاء الذين لم يتركوا صغيرة و لا حتى كبيرة إلا و لفتوا انتباهنا إليها, بالإضافة إلى أعضائهم الذين لا يقلّون روعةً عنهم باستثمارهم للكثير من أوقاتهم الغالية عليهم في التواصل معنا و إبداء آرائهم حول هذا المنتج, فشكراً لكم مجتمعين على كل صغيرة و كبيرة تقدمتم بها لبلص و لمحررها.
دمتم بالسلامة.
إجمالي التعليقات 10
التعليقات
-
مبارك عليك الشهر الفضيل يا أستاذ هاني وكل عام وأنتم بخير ..
وأبارك لكم أيضا على هذا التطور في المنتج الجميل ( محرر بلص ) متمنياً لكم مزيداً من التوفيق والتطور .ABUSAIF كتبه بتاريخ 23/08/2009 الساعة 2:22 ص 
-
ما شاء الله بالتوفيق يا هاني
وبإنتظار باقي الإبدااااعاتد.الشبكة كتبه بتاريخ 23/08/2009 الساعة 3:47 ص
-
استـاذ بكل ما تعنيه الكلمة من معنى ..
مبارك عليك الشهر و يسرّ الله لك قيامه و صيامه
و اتمنى ان نرى دروس برمجية
صقر كتبه بتاريخ 23/08/2009 الساعة 4:42 ص
-
ابداع × ابداع يا ابوسعدالبدو كتبه بتاريخ 31/08/2009 الساعة 1:11 ص
-
ما شاء الله تبارك الرحمن,,,
ما كنت اعلم بمدى مرونة الجافا سكربت بالشكل هذا,,,
الله يوفقك,,,من ارض الغربة كتبها بتاريخ 02/09/2009 الساعة 5:40 م -
ما شاء الله تبارك الله
الله يعطيك العافية يا ابو سعد بحق انت انسان رائع و متمكن الله يحفظكmedicalacademy كتبه بتاريخ 06/09/2009 الساعة 6:19 م
-
بارك الله فيكم على هذه الردود الطيبةهاني كتبه بتاريخ 07/09/2009 الساعة 6:30 ص
-
ماشاء الله
كل عام وانتم بخير
يعطيك العافية على المحرر
شغل متعوب عليه ماشاء اللهعابر سبيل كتبها بتاريخ 15/09/2009 الساعة 2:32 ص -
ماشاء الله ^_^
ابداع × ابداع يا ابوسعدالليل الصامت كتبه بتاريخ 05/10/2009 الساعة 3:29 م
-
>> السلام عليكم ورحمة من الله وبركاته
مـاشآء الله تبآرك الله .. حقيقة محرر جميل جداً
ومن أروعـ مارأيت .. بارك الله بك أخي الكريم أبى سعد
ونفعـ المولى بما تقدم للجميع
,,مسلمة كتبه بتاريخ 22/03/2010 الساعة 2:42 ص
كتابة تعليق
|
مجموع التعقبات 0
