Posted by: خالد محمد خالد | سبتمبر 2, 2016

مصحف الإنترنت

مشروع آخر

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

شكل صفحة مصحف الإنترنت

شكل صفحة مصحف الإنترنت على متصفح الكروم على نظام تشغيل الويندوز.

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

 قصة المغامرة

بدأت مغامرتي بمهمة تحضير المحتوى. وحيث اني قد وفرت النص القرآني من خلال مغامرة تطبيق “بيان” قمت فيها بمعالجة ملف الوورد الذي نشره موقع مجمع الملك فهد لطباعة المصحف الشريف وتحويله الى ملفا xml، بقي عليّ ان اوفر نصوص التفاسير ومعاني الكلمات في ملفات مشابهة.  فقمت ببرمجة أداة كشط معلومات كما تسمى مخصصة لهذا الغرض وتركتها تزور المواقع وتجمع لي ما أحتاجه من التفاسير ومعاني الكلمات مما كان متوفر لعموم الناس على الإنترنت. وقد كانت برمجة هذه الأداة وتشغيلها دورة رائعة في برمجة تطبيقات انترنت بلغة #C.

أداة كشط المعلومات من صفحات الإنترنيت في وسط منصة التطوير

أداة كشط المعلومات من صفحات الإنترنيت في وسط منصة التطوير

ثم اردفت ذلك بدورة أخرى حول بناء مواقع الانترنت الديناميكية والتي يتم فيها تكوين الصفحات عند لحظة طلب الصفحة من الموقع. وفرض ذلك عليّ تعلم لغة برمجة جديدة هي لغة php كما كان عليّ تحديث معلوماتي عن الـ html والـ javascript وتعلم النسخة الجديدة من برمجة الـ CSS3. ومن الكنوز الصغيرة التي اكتشفتها خلال هذه الجولة من المغامرة هو طريقة بناء مزود خدمة إنترنت على حاسبتي الخاصة أو ما يسمى الـ AMP وهو متخصر لـ Apache, MySQL, PHP. وقد كانت النسخة التي استخدمتها تسمى الـxmapp وهو تطبيق يمكن تثبيته على الويندوز لمحاكاة مزود خدمة الإنترنيت ويمكن بناء المواقع على حاسبتكم دون الحاجة الى خدمة إنترنت حقيقية.

ولكن المفصل الرئيسي الذي جعل المشروع ممكناً هو عبارة الـ font-face@ في برمجة الـ CSS والتي مكنتني من إستخدام الفونت المناسب للنص القرآني. وفيما يلي مثال من شفرة المصدر لكيفية إستخدام الخط الرقمي الذي طوره مجمع الملك فهد لطباعة القرآن الكريم في المدينة المنورة في صفحات الويب:

<!doctype html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">
<title>إستخدام الفونتات في صفحات الويب</title>
<style>
/* Typography */
@font-face{
	font-family:'fntUthmani';
	src:url('./fonts/UthmanicHafs1 Ver09.otf') format('truetype');
}
.uthmani {
	font-family:'fntUthmani';
}
</style>
</head>
<body>
	<span class="uthmani">خط المصاحف بالرسم العثماني</span>
</body>
</html>

غذاء العين

كان ابن عمي خالد الحسن يقول حينما أُعلق على اهتمامه بصينية الشاي أيام كنّا نشربه سوية في عصاري بغداد في السبعينات كان يرد عليّ: “العين هم تاكل”، بمعنى أن العين تحتاج الى جمال يغذيها كما يحتاج الجسم الى الطعام. وكلمة “هم” في لهجتنا العراقية مأخوذة عن التركية وهي تعني “أيضاً”. وقد تعرفت يوماً على شخص من أوزبكستان ويبدو أن زهوة مدينة بغداد القديمة كما كانوا يرونها لم تنطفئ عندهم. فهو حينما عرف أني في الأصل من مدينة بغداد أخبرني بمثلين جميلين يتداولها الأوزبك الى هذا اليوم. وأنا أعرف أنكم محبون للأمثال مثلي لذا لا ضير من إنعطافة على طريقة محمد حسنين هيكل لذكرهما. فأما المثل الأول فهو بالأوزبكية “بغداد ده تينجليك” وتقال رداً للسلام وتعني “السلام في بغداد” أي أن المجيب يطمن أنه بخير ما دامت بغداد بخير. والمثل الثاني يستعملونه حينما يبحث الأوزبكي عن شئ ولا يجده فيقول له أخوانه الاوزبكيون: “بغداد ده هم يوك” بمعنى لا تتعب نفسك فإنك لن تجد ما تبحث عنه حتى في بغداد. والشاهد في هذه الأمثال هو كلمة “هم” في المثل الثاني والتي تعني أيضاً كما ذكرنا. ولنعد الآن بعد هذه الإنعطافة الهيكلية الى موضوعنا قبل أن تهربوا الى موقع آخر.

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

مصدر إلهامي هو المصاحف القديمة التي لم نعد قادرين على عمل شئ مثلها

مصدر إلهامي هو المصاحف القديمة التي لم نعد قادرين على عمل شئ مثلها

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

خط قرآني جاهز للمطورين من إنتاج موقع مجمع الملك فهد لطباعة القرآن الكريم في المدينة المنورة.

خط قرآني جاهز للمطورين من إنتاج موقع مجمع الملك فهد لطباعة القرآن الكريم في المدينة المنورة.

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

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

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

المنصة المفتوحة

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

وختاماً لسنعرض بعض جوانب المشروع:

أدوات التصفح وأخرى للتحكم مخبأة في أسفل الصفحة.

أدوات التصفح وأخرى للتحكم مخبأة في أسفل الصفحة.

من بين ما يمكن التحكم به هو حجم الحرف حيث يمكن تكبيرة لرؤية أوضح

من بين ما يمكن التحكم به هو حجم الحرف حيث يمكن تكبيرة لرؤية أوضح

كما يمكن تصغير الحرف لرؤية أشمل للصفحة وكل حسب تفضيله.

كما يمكن تصغير الحرف لرؤية أشمل للصفحة وكل حسب تفضيله.

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

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

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

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

أداة لتوليد علامات نهاية الآيات من تصاميم الإليسترتور. وقد كانت أدوات الأدوبي قد عوضت قيمة الـخمسين دولاراً ثمن إشتراكي بها.

أداة لتوليد علامات نهاية الآيات من تصاميم الإليسترتور. وقد كانت أدوات الأدوبي قد عوضت قيمة الـخمسين دولاراً ثمن الإشتراك الشهري.

يوفر مصحف الإنترنت إمكانية تعديل طريقة وشكل عرض النص من قائمة خيارات.

يوفر مصحف الإنترنت إمكانية تعديل طريقة وشكل عرض النص من قائمة خيارات.

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

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

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

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

كما يمكن عرض تفسير الآية والإختيار من بين إهمهات التفسير للوصول على معنى الآية.

كما يمكن عرض تفسير الآية والإختيار من بين إهمهات التفسير للوصول على معنى الآية.

وآخر دعوانا أن الحمد لله رب العالمين والصلاة والسلام على خاتم الأنبياء وسيد المرسلين محمد وعلى آله وصحبه أجمعين.


Responses

  1. جزاكم الله كل خير أستاذنا العزيز، يسرّني أن أهنّئكم على ولادة هذا المشروع المبارك، وأن أشدّ على يديكم داعيًا لكم بالتوفيق لإتمامه على أحسن وجه، ولكم مني أطيب تحية.

    • بارك الله فيك اخي ابو الحسن ونسأل الله لنا ولكم التوفيق وعسى ان يكون في هذا المشروع الفائدة للناس


أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

تصنيفات

%d مدونون معجبون بهذه: