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

مشروع آخر

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

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

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

 قصة المغامرة

بدأت مغامرتي بمهمة تحضير المحتوى. وحيث اني قد وفرت النص القرآني من خلال مغامرة تطبيق “بيان” قمت فيها بمعالجة ملف الوورد الذي نشره موقع مجمع الملك فهد لطباعة المصحف الشريف وتحويله الى ملفا 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>

غذاء العين

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

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

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

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

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

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

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

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

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

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

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

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

سود مواقعنا

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

مواقع تدعمها إقتصاديات مجدية

 

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

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

 

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

  1. تحديد الغرض: ومع أن هذا ليس خاص بالتصميم البصري لصفحة الأنترنيب إلا أن تحديد الغرض وتطويع كافة التفاصيل لهذا الغرض يضفي نوعاً من الوحدة والتناسق في التصميم.
  2. التقسيم العام لمساحات الصفحة: وهذا التقسيم يأخذ شكل الجدول حيث يحتل في الغالب أسم الموقع أو موضوع الصفحة الخانة العلوية الأولى. وتوزع المواضيع في المساحات المختلفة وحسب أهمية الموضوع حيث تحتل المواضيع الرئيسية والأولى المساحة البصرية السائدة والتي تكون غالباً المساحة الأكبر وتتوسط مساحة الصفحة. ويتطلب هذا التقسيم تخطيطاً مسبقاً وهو في الغالب يتزامن مع مرحلة تخطيط الموقع بشكل عام وهو عند المصممين الجيدين يبدأ على الورق قبل الشاشة.
  3. المنظومة اللونية: وهي تحدد شخصية الصفحة. فاللون يقترن بمعاني نفسية. ومع التفسير المتباين عند الأشخاص للألوان هناك قواعد ثابتة في استخدام الألوان يشترك بها أغلب الناس الأصحاء. ويلعب العرف دوراً مهماً في نوع المنظومة اللونية المستخدمة. وهناك مواقع كثيرة تساعد في تكوين المنظومات اللونية لتصميم المواقع، والمفضلة لديّ هي: kuler وColorSchemer.
  4. أنواع الحروف الطباعية المستخدمة (الفونتات): ودور الحروف وظيفي في الأساس حيث يتم من خلالها توصيل المعنى الى مستخدم الموقع بوضوح وسهولة. كما يلعب الحرف دوراً مهماً في التصميم البصري وهو يكمل العنصران البصريان في أعلاه في تكوين البعد الجمالي لصفحة الموقع. إلا أن الفونتات التي يمكن عرضها على الصفحات تنحصر فقط في ما هو مثبت على أجهزة المستخدمين وهذا يحدد المصمم في استخدام ما يوزع من فونتات مع نظم التشغيل أي ما يأتي مع الويندوز أوالماك. وهناك حل سهل يكمن في تحويل بعض النصوص الى صور لتضمينها على الصفحات. كما يمكن استخدام طرق أكثر تعقيداً ولمن أراد التوسع يمكنه البحث على الوصلة التالية.
  5. المكملات: من الرسوم والأزرار والأدوات الأخرى. ومن الضروري أن تكون هذه المكملات ساندة للتصميم من حيث الوظيفة والتنسيق البصري.

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

ختاماً وتغييراً للموضوع، أهدي لكم قصيدة صفي الدين الحلي “سلي الرماح العوالي عن معالينا والتي يقول فيها:

بِيضٌ صَنائِعُنا، سودٌ وقائِعُنا،        خِضرٌ مَرابعُنا، حُمرٌ مَواضِينا