بين يديٍّ الكتاب
أجمعين , و بعد:
((لم يعد ال 1/60 اليوم مقتصراً بمهامه على تقديم المعلومة بشكلٌ نص بسيط , حيث أصبح من
المهم تقديم المحتوى بشكل و أسلوب أقرب ما يكون إلى الإعلامي, بل ريما هو كذلك فعلاً, فمن
النادر أن تجد في مواقع ال 0/80 اليوم -و أعني الجيدة منها- ما لا يقدم المعلومة بشكل مسموع
0ا6/لا ذاته كفهوم مع بدء التنتظير لما يعرف بال 2.0 10/80 عام 2006 (ل 2.0 10/80 حوّل
الويب من تلقين المعلومة إلى التتماح للمستخدمين بإنشائها بشكل تفاعليّ) , و مع بدء
التنظير لذ 3.0 10/80 هذه الأيام (الويب الدلاليّ) , و هذا ما أدّى بالنتيجة إلى ظهور الحاجة
لتطوير الأدوات و اللغات البرمجية التي كانت بين يدي مطوري و مصممي مواقع ال 10/800 و التي
أصبحت قاصرةً عن تحقيق متطلبات العملاء الطموحين بامتلاك مواقع ويب عصرية , و سرعان
ما قام من يهمه أمر التقنية بتطويرها و تقديم إصدارات جديدة منها أقوى و أكثر تأقلماً مع 1/0/6
اليوم, ذلك لأنّ "التأقلم يعتبر أساس النجاح في عالم ل 10/8)).!
مفاهيم الويب مع قفزات كبيرة أيضاً في تقنيّات تصنيع الهواتف الذَّكيّة فاشتعل التنافس بين
الشركات المصتّعة لها لاحتلال أكبر الحصص السوقيّة الممكنة , لدرجة أنني لا أبالغ حين أقول أنّ
الأسابيع في السّنوات الأخيرة -و ريّما الأيام- أصبحت تعرف لا بتواريخها بل بأسماء و "موديلات"
لمن مققمة كثبي يتلم 5 1471/1 و 3 055 لخطوة الأولى نحو البرمجة للويب).

الذكيّة في عالم اليوم دخلت كلّ بيت من بيوتنا فامتلكت بذلك الحصّة الأعظم على الإطلاق في
تاريخ سوق الحواسيب من حيث عدد المستخدمين.
هواة على حدّ سواء) فقد ازدهر سوق تطوير برمجيّات الهواتف الذكيّة بشكل مذهل و ازداد الطلب
المجاز أو المبالغة في التخييل الأدبي , بل أقولها بالمعنى الحرفي الدقيق و ذلك لأنّ ظهور أي
هاتف ذكي جديد ببساطة شديدة كان في الغالب يعني أنّ على المطوّر/المبرمج أن يتعلّم و يتعامل
مع بيئات تطوير/لغات برمجة جديدة و أنظمة تشغيل جديدة أيضاً قبل أن يفكّر في التطوير للهاتف
حاجة لمراعاة قضايا حقوق الملكيّة الفكريّة و غير ذلك متا هو معلوم للجميع.
أن يتعامل مع بيئة التطوير التي تعتمدها ثلك الشركة بالذات, و مع نظام التشغيل الذي تعتمده
أو 1080 مثلاً) يجب عليه أن يتعامل مع با
لما سبق ذكره فقد أصبح على من يريد أن يطوّر تطبيقاً لأجهزة شركة معيّنة
وّر تطبيقاً لأجهزة شركة 80018 لذكيّة (1011002
تطوير ©000)ل الخاصة بلتطوير لنظام تشغيل
5 , و المطوّر الذي يريد أن يطوّر تطبيقاً لأجهزة شركة 580050009 الذكيّة (هوائف 62:0
أو أجهزة /8:9ا68 اللّوحيّة مثلاً) يجب أن يتعامل مع 5014 8000010 و بيئة 501058 (أو
غيرها) و نظام تشغيل 8000010 , و المطوّر الذي يريد أن يطوّر لأجهزة شركة لاع 818008
الذكيّة يجب عليه أن يتعامل مع بيئة تطوير مختلفة و نظام تشغيل مختلف ... و هكذاء
على المستوى الشخصيّ, و كمطوّر قادم من خلفيّة اختصاصيّة في التطوير للويب فقد كان دخولي
إلى عالم التطوير للأجهزة الذكيّة يعني حاجتي لتعلّم عدّة

يتلم البرمجة
عقد العزم على تعلّم المزيد في أقرب الفرص.
ام 8000010 لأنه النظام الأكثر شعبيّة في بلدي و أتوثف عند هذا الحدّ , مع
شركة 80008 تسمح بتطوير تطبيقات لكافة الهواتف الذكيّة المصنّعة من كافة الشركات تقريباً
باستخدام تقنيّات تطوير الويب الكلاسيكيّة ذاتها , نعم ذاتها , بمعنى ألني أستطيع أن أطوّر تطبيقاً
تغطيته بعد أن يمر في صفحاته الأولى بإيجاز على بعض التقيّات الثأنويّة المساعدة في إنجاز
تطبيق عصريّ باستخدام 11006680
و قد رأيت بعد تأمل و دراسة مطوّلين أنّ التوزيع الأنسب لمحتوى هذا الكتاب على فصوله هو ما
1- الفصل الأول - تطوير واجهات الاستخدام:
0000 فيعرض بشكل موجز بعض الأفكار الأساسيّة المتعلّقة بواجهات الاستخدام
الخاصة بتطبيقات الويب الموجّهة للأجهزة الذكيّة و الفرق بينها و بين واجهات الاستخدام
ويب ملائمة للأجهزة الذكيّة و للحواسيب_التقليد:
معأ باستخدام
أ- المبحث الأول : َيه عانطما/1 لوتعسيوز.
ب- المبحث الثاني : ثقنيّة 80018080

ثم أضفت مبحثاً ثلثاً لمبدأ هام جدّاً في تطوير تطبيقات الهواتف المحمولة باستخدام
1006م ألا و هو مبدأ ال 6085 في طلبات ل تفلم
2- الفصل الثاني - أساسيّات م663 00م:
أأنا في الفصل الثاني فقد ناقشت أساسيّات تقنيّة 011008680 حيث بدك بالتعريف بها ثم
عرضت كيفيَّة تثبيتها و البدء باستخدامها مع الأمثلة الأولى البسيطة لإعطاء تصوّر أفضل
عن ماهيّتها و آليّة عملها , ثم عرضت طريقة تحزيم التطبيقات المكتوبة باستخدام
0006م و تحويلها لى
أنا في الفصل _لثالث فقد عرضت بأمثلة سريعة و بسيطة الهدف الأساسي من
7006680 و هو كيفيّة توظيفها لتعطي صفحات الويب العاديّة القدرة على التعامل مع
كامل منصّة العمل 012166000 للجهاز الذكيٌَ كالكاميرا و وسائط التخزين و تجهيزات ل
81080000 و ال 10/51 و سجل الأسماء و ال 1/106000008 و الستاعة .. لخ.
و قد افترضث أثناء كتابتي لمحتوى هذا الكتاب أنّ القارئ الكريم على معرفة و تجربة كافيتين
أنا عن طريقة عرضي للأفكار في هذا الكتاب فقد حاولت و اجتهدت ما استطعت كي أجعلها غير
التقصود بمنصّة العمل 7120117 لأي جهاز حاسوبي هو نظام
3 يمكن لمن يرغب بالاستزادة تحميل نسخ لكتروتيّة من كَتتيّ (لّ 5 147101 ر 3 055) ر ل /ا081ا0ز في

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

الفصل الأول
تطويرُ واجهاتٍ الاستخدام الرسوميّة

مقدمة
يناقش هذا الفصل تطوير واجهات الاستخدام الا6 للتطبيقات 800180005 التي تشتهدف
الهواتف الذكيّة 0110085 507811 و يعرض أهمّ الفروقات بينها و بين واجهات الاستخدام في
مستخدمتين بين المطوّرين 081/61008:8 على
مستوى العالم اليوم لتحقيق هذا الغرض و هما 1010116 لاعنيهز و 800151720
واجهات الاستخدام الرسوميّة 1016:13665 ١56لا‏ له116ا30+:6
في التعريف فإنّ واجهة الاستخدام الرسوميّة 1016:1868 :56لا 68011168 أو الا6 اختصاراً
هي : "مجموعة الأيقونات و الرسومات و وسائل التعبير الصوريّة التي يقدّمها مصتّعو الأجهزة
الإلكترونيّة لإعطاء المستخدمين إمكائيّة التفاعل مع أجهزتهم بشكلٍ ما * , و في مجال برمجيّات
الحاسب الآليّ فإنّ الأمثلة على مكّنات واجهات الاستخدام الرسوميّة عديدة نذكر منها على سبيل
المثال لا الحصر الأزرار 8002005 , و القوائم المنسدلة 515نا 00000 0000 , و المزليج
5 , و مربّعات إدخال النصوص 8078 76 , و صناديق الاختيار المتعدد 011606
85 , و صناديق الاختيار 80:88 88010... إلخ.
و قد جرت العادة منذ ظهور واجهات الاستخدام الرسوميّة في برمجيّات الحاسب الآليّ 50100/8:8
أل مرّة عام 1981 3 على أن تكون واجهة الاستخدام الرسوميّة بسيطة قدر الإمكان و مصممة
لتعمل بشكل ملائم لشاشة عرض 500680 معروفة الأبعاد 0010ا680» سلفاً , أو لعدّ ات
عرض معروفة الأبعاد سلفاً في أحسن حال , مع العلم المسبق بنوع الجهاز الذي ستعمل عليه

أنا في مجال برمجيّات الويب 8001681005 65/لا و لأنّ نوع الآلة التي ستستخدم لمشاهدة
الموقع 10/605118 و نظام تشغيلها .0.5 و نوع مستعرض الويب :8300/58 0/80 الخاص بها
كلّها من الأشياء المجهولة بالنسبة للمطوّر فقد جرت العادة حتّى فترة قصيرة على تصميم نسخة
واحدة تحوي مناطق لونيّة فارغة و قابلة للتّدد 8885 160016 بحيث يبدو التصميم بشكل
قبول نسبياً يا تكن دقة عرض الشاشة التي تستعرضه , و قد اعتبر هذا الحلّ على عيوبه , حلا
كافياً إلى أن ظهرت الهواتف و الأجهزة الذكيّة الجديدة و أحدثت معها ثورة حقيقة في مفاهيم
تصميم واجهات الاستخدام كان أبرزها مفهوم تصاميم الويب المتأقلمة 1/0/6 8680005076
تصاميم الويب المتأقلمة 0651905 10/65 865015176
في التعريف فإنّ تصاميم الويب المتأقلمة هي "التصاميم التي يبع مصتموها منهجيّة تصميم
خاصّة تمنح هذه التصاميم قدرة التأقلم (قدرة التغيّر التلقائيّ في الشكل و الحجم) مباشرةً مع أيٍّ
طبيعة منصّة العمل 01800007 في الأجهزة التي تستعرض هذه التصاميم ابتداءً من الأجهزة ذات
بالأجهزة الكقيّة و اللوحيّة .. إلخ” , الشكل التالي يوضّح الفكرة:
؟ ترجمة مصطلح 065190 60//ا 4680005178 إلى 'تصاميم الويب المتألمة” اجتراح اجترحثه آنا بعد أن بك
والم أجد أحداً قبلي قد سبقني إلى ترجمة هذا المصطلح الجديد و لم أعمد إلى نرجمة الصطلح معجميّاً بل حاولث أن نكون
ترجمثي متلق بشكل مباشر بالطبيحة الوظيفيّة لهذا المفهوم , و الله أعلم»
7 بر 0851917 _ماء تمع اتقصة مق6 تف ساون معتل مرواأسا. ]| متا

بسنا
الصورة 1 : توضيح فكوة تصميم صفحة الويب لمتأكلمة
لإنشاء ت ويب متأقلم يتمٌ الاستفادة تقنيًاً من الوسيط 076018 في 055 لتطبيق ورقة نمط
!506 501 مناسبة لكل دقّة شاشة بحيث تتولّى الورقة إعادة توزيع و تحجيم العناصر الخاصة
بالصفحة بما يناسب الشاشات التي تتزاوح أحجامها بين حد أدنى و حد أعلى معزّفين مسبقاً , و
بهذا فإنّ ما يحدث فعليًاً هو تصميم صفحة .1471/1 واحدة فقط مرّبطة مع عدّة أوراق أنماط (عدّة
ملفات 055) بحيث يتم تطبيق ورقة أنماط واحدة منها في كلّ مرة بناءً على دكّة الشاشة التي يجري
استعراض الصفحة عبرها حاليًاً.
انظر لشيفرة الصفحة التالية المصتمة بتقنيّة التصميم المتأقلم على سبيل المثال: