تصميم تطبيقات الهاتف المحمول / دليل المبتدئين ديف ل jQuery موبايل

على مدى السنوات 2-3 الماضية ، شهدنا نمواً هائلاً في دعم المستعرض ونظام التشغيل لمواقع الجوال. وأبرزها Apple و iOS و Google منصات Android تتبادر إلى الذهن. لكن آخرين مثل PalmOS و Blackberry لا يزالون في المزيج. حتى وقت قريب ، كان من الصعب للغاية مطابقة سمة واحدة للهاتف المحمول في جميع هذه المنصات.

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

الميزات ودعم نظام التشغيل

السبب أقترح تعلم jQuery Mobile على أي أطر أخرى هو البساطة. تم بناء الكود على جوهر jQuery ولديه فريق نشط من المطورين الذين يكتبون النصوص وتحرير الأخطاء. من بين العديد من الميزات ، دعم HTML5 وروابط التنقل التي تدعمها Ajax ومعالجات الأحداث التي تعمل باللمس / التمرير السريع.

يختلف الدعم بين الهواتف وينقسم إلى مخطط يتكون من 3 فئات من A-C. A هي المستوى الأعلى الذي يتمتع بدعم كامل من jQuery Mobile ، B لديه كل شيء ما عدا Ajax بينما C هو HTML الأساسي مع جافا سكريبت قليل إلى لا. لحسن الحظ ، فإن معظم أنظمة التشغيل الشائعة مدعومة بالكامل - لقد أضفت قائمة أدناه ببعض الأمثلة فقط.

• Apple iOS 3-5
• أندرويد 2.1 ، 2.2 ، 2.3
• ويندوز فون 7
• بلاك بيري 6.0 ، بلاك بيري 7
• Palm WebOS 1.4-2.0، 3.0

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

قالب HTML القياسي

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

يجب أن تكون العناصر الأجنبية الوحيدة هنا هي علامتي meta. الأعلى العرض تعمل العلامة على تحديث متصفحات الجوال لاستخدام تأثير تكبير / تصغير كامل. تحديد القيمة العرض = جهاز العرض سيتم تعيين عرض الصفحة في بالضبط عرض شاشة الهاتف. والأهم من ذلك كله أنه لا يقوم بتعطيل ميزات التكبير / التصغير لأن jQuery Mobile يمكنه أن يتكيف مع تخطيطات التبديل.

علامة التعريف التالية X-UA-متوافق فقط يجبر Internet Explorer على تقديم HTML في أحدث التكرار. ستحاول المتصفحات الأقدم وخاصة المحمول التنقل حول أخطاء العرض غير المألوفة.

بناء محتوى الجسم

الآن هذا هو المكان الذي يصبح فيه jQuery mobile صعبًا. كل صفحة من صفحات HTML ليست بالضرورة صفحة واحدة على موقع الجوال. يستخدم الإطار سمات بيانات HTML5 ، والتي يمكنك إنشاؤها في نزوة من خلال الإلحاق البيانات- سلفا. بطريقة مماثلة دوره البيانات = "الصفحة" يمكن تعيينه على divs متعددة في ملف HTML واحد ، مما يتيح لك أكثر من صفحة واحدة.

ستنتقل بعد ذلك بين هذه الصفحات باستخدام روابط ربط ومعرف فريد. يعد هذا الإعداد فكرة جيدة للتطبيقات الأساسية البسيطة. إذا كنت تحتاج فقط إلى 3-5 صفحات ، فلماذا لا تخزنها كلها في ملف واحد؟ ما لم يكن لديك الكثير من المحتوى المكتوب ، في هذه الحالة ، فإن استخدام PHP يشمل توفير الوقت.

تحقق من مثال الكود أدناه إذا فقدت.

 
 
 
شريط العنوان العلوي
 
 
 
عرض صفحة أخرى??
 
تلميح: انقر فوق الزر أدناه!
 
معلومات عنا
 
  
 
 
 
الصفحة 2 هنا
 
 
 
فقط بعض المحتوى الإضافي كذلك.
 
أقصد ، يمكنك ذلك عد في أي وقت.
 
 
   

ألق نظرة على رابط الربط من صفحة الفهرس للحظة. لاحظ أنني أضفت السمة بيانات دور = "زر" لإعداد الرابط كزر. ولكن بدلاً من استخدام الأنماط الافتراضية التي ندرجها بيانات موضوع = "ج". ينتقل هذا بين قوالب واحدة من 5 (سمات a-e) والتي يتم حزمها افتراضيًا كأنماط CSS داخل jQ Mobile.

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

أشرطة رأس وتذييل الصفحة

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

أزرار شريط الأعلى

بشكل افتراضي ، يدعم الشريط العلوي مجموعة من رابطين (2) بطريقة مشابهة لتطبيقات الأجهزة المحمولة الأخرى. يتم استخدام iOS بشكل افتراضي لاستخدام “الى الخلف” زر إلى اليسار وغالبا “خيارات” أو “التكوين” على اليمين.

 
 الإعدادات 
الصفحة 2 هنا
 
 

يركز الرمز أعلاه فقط على حاوية div لصفحة About الخاصة بنا إلى جانب محتوى الرأس. سمة HTML إضافية البيانات الإضافية العودة BTN = "صحيح" ستعمل فقط عند إضافتها إلى دور بيانات الصفحة. والغرض من ذلك هو تضمين زر الرجوع تلقائيًا الذي يعمل على غرار زر الرجوع في المتصفح.

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

تذييل التنقل

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

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

• معاينة لايف التجريبي

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

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

اياكس وصفحات ديناميه

لقد فتح الجزء الأول بالفعل النقاط الرئيسية لإنشاء تطبيق جوال باستخدام jQuery. ولكني أريد أن أبدأ تطبيقًا جديدًا يقوم بتحميل البيانات من صفحة خارجية. سأكون باستخدام البرنامج النصي PHP بسيط جدا لتحقيق $ _REQUEST [] متغير وعرض تسديدة صغيرة تقطر وفقا لذلك. يجب أن يوفر لك عرض الشاشة أدناه فكرة عما سنقوم ببنائه.

أولاً ، سأقوم بإنشاء صفحة index.html في القالب الافتراضي. بالنسبة إلى هذه الشاشة الرئيسية ، أستخدم إعداد عرض القائمة لعرض كل رابط بالترتيب. ويتم ذلك في مجال المحتوى مع دوره البيانات = "listview" السمة على حاوية القائمة. استبعاد العناصر رأس نفسه كما كان من قبل ، أضفت كل التعليمات البرمجية من صفحة الفهرس الجديدة أدناه.

 
 
 
أكتوبر 2011 لقطات
 
 
 
 
الصورة الأولى
 
الصورة الثانية
 
الصورة الثالثة
 
الصورة الرابعة
 
 
  
   

يشير كل رابط من روابط الربط في عرض القائمة إلى نفس الملف - index.php. لكننا نمر في المعلمة imgid كمتغير طلب. في ملف image.php ، نأخذ المعرّف ونختبره مقابل 4 قيم محددة مسبقًا. إذا كان هناك أي تطابق ، فإننا نستخدم عنوان URL وعنوان الصورة المطابقين ، وإلا فإننا نعرض فقط لقطة Dribbble الافتراضية.

صورة محمل البرنامج النصي

لا يزال في البرنامج النصي image.php إضافة قالب الجوّال الافتراضي jQuery إلى الكود. إنه يشارك بالفعل رأس وتذييل الصفحة متشابهين للغاية ، باستثناء إضافة سمة الارتباط الخلفي الخاصة بنا البيانات الإضافية العودة BTN = "صحيح". لاحظ أن هذا الزر لن يظهر إلا إذا أتينا من index.html أولاً! حاول تحميل image.php مباشرة ولن يظهر أي شيء لأنه لا يوجد “الى الخلف” لتنتقل إلى.

أعتقد أننا يمكن أن نفهم الكود قليلاً عن طريق فحص منطق PHP الخاص بي أولاً. نحن نستخدم مفتاح كهربائي / قضية طريقة للتحقق من 4 معرفات مختلفة وتقديم عنوان رأس وعنوان URL للصورة ورابط مصدر الفنان الأصلي.

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

 
 
 
 
 
 عرض الأصل
 
 
  
 

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

يتوهم التصميم مع قائمة المصغرات

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

لبدء فتح Photoshop وإنشاء مستند 80 × 80 بكسل. سأقوم بتغيير حجم كل صورة بسرعة وحفظ الصور المصغرة لتتناسب مع كل صورة. ثم قم بتحديث عناصر عرض القائمة التي يجب أن تتضمن بعض العناصر الإضافية.

تحقق من الكود أدناه والمثال التجريبي لمعرفة ما أقصده.

[معاينة لايف التجريبي]

 
 
  
المهام Wunderkit
 
من سيباستيان شيرير
 
  
Colleeeeeeeeeeeeege
 
سكوت هيل
 
  
تطبيق منتدى فيسبوك
 
بواسطة ايونوت Zamfir
 
  
تغريد
 
بواسطة سام جونز
 
 
 

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

أو بدلاً من ذلك ، يمكنك البدء في إنشاء نظام خلفي لتحميل صور جديدة وتقليص الصور المصغرة تلقائيًا لتضمينها في القائمة. هناك قدر كبير من المرونة مع jQuery Mobile ، حيث لا يمكنك وصفها كمكتبة JavaScript فقط. إنها أكثر من إطار HTML5 / CSS / jQuery بأكمله لبناء تطبيقات محمولة سريعة وقابلة للتطوير.

استنتاج

حتى كتابة هذا المقال ، قام فريق jQuery Mobile بوضع RC1.0 رسميًا لمكتبة الأكواد. هذا يعني أن معظم إصلاحات الأخطاء الرئيسية ، إن لم تكن كلها ، قد تم سحقها ، والآن يستعد المختبرون للإصدار الكامل. لهذا السبب لن تجد مجموعة كبيرة من المعلومات على الويب.

ولكن مع تقدم الأشهر ، من المؤكد أن مطوري الويب سوف يستفيدون من هذا الاتجاه. تزداد شعبية تطبيقات الهاتف المحمول وحتى تخطيطات الويب للجوال مع الزيادة الكبيرة في الهواتف الذكية. ليس لدى مطوري الويب الوقت لتعلم لغة برمجة كاملة لإنشاء تطبيقات Android / iOS. وبالتالي jQuery Mobile هو بديل بسيط يتضمن دعمًا لمعظم برامج صناعة الأجهزة المحمولة ، ويستمر في النمو كل يوم مع مجتمع مطور نشط.