Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK
Code

تكوين تطبيق ويب iPhone باستخدام العلامات الوصفية

by
Difficulty:BeginnerLength:ShortLanguages:

Arabic (العربية/عربي) translation by Salma Abu Oriban (you can also view the original English article)

يتم الاستهانة بتطبيقات iPhone على الويب في تطوير iPhone. ومع ذلك، فهي سهلة الإعداد بشكل مدهش. تتطلب العملية بضع العلامات الوصفية فقط.


الخطوة 1: النظر في تطبيق الويب

من الأفضل إنشاء تطبيق الويب أولاً ثم الانتقال إلى تكوينه في تطبيق ويب لـ iPhone.

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


الخطوة 2: إعداد اسم التطبيق

هذا ربما يكون أبسط من جميع الخطوات. كل ما هو مطلوب هو تغيير علامة العنوان إلى اسم تطبيق الويب الخاص بك


الخطوة 3: إعداد رمز التطبيق

الخطوة التالية هي تعيين رمز التطبيق. هذا هو الرمز 57px في 57px والذي يظهر على الشاشة الرئيسية لجهاز iPhone. على أجهزة عرض شبكية العين، هذا رمز 114px من 114px، ويمكنك أن تستوعب كلاهما ببساطة عن طريق استخدام رمز دقة أعلى بدلاً من ذلك (الأجهزة القديمة ستغير حجمها تلقائيًا). سأستخدم الرمز التالي لهذا البرنامج التعليمي:

Build an iPhone Web App

هناك خياران لإعداد هذا الرمز. الأول هو استخدام الأيقونة كما هو، كل ما يتم إضافته عبارة عن زوايا دائرية. للقيام بذلك، نستخدم العلامة الوصفية هذه:

الخيار الثاني يعطي الرمز لمعان Apple القياسي:

لقد اخترت الرمز الذي تم إعداده مسبقًا وكانت النتيجة النهائية كما يلي:

Build an iPhone Web App

الخطوة 4: إعداد شاشة البدء

أثناء تحميل تطبيق الويب الخاص بك، يمكنك اختيار عرض شاشة البداية. يجب أن تكون هذه الصورة 320 بكسل × 460 بكسل. لإعداد هذا، استخدم علامة التوصيف هذه في رأس المستند الخاص بك.

هذه هي النتيجة النهائية لشاشة البداية.

Build an iPhone Web App

الخطوة 5: جعل التطبيق ملء الشاشة

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


الخطوة 6: إعداد نمط شريط الحالة

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

الأول هو التدرج الرمادي العادي:

والثاني هو شريط الحالة الخلفي الثابت، وهذا هو الخيار الأفضل في الغالب:

الأخير هو شريط حالة يظهر بشكل شفاف، وهذا يسمح للمستخدم بمشاهدة شريط الحالة:

شريط الحالة النهائي لدينا:

Build an iPhone Web App

الخطوة 7: إعداد منفذ العرض

تخبر علامة الوصف هذه الجهاز بعرض الصفحة المراد عرضها، وقيمة التكبير القصوى والأدنى، وقيمة التكبير الأولية وما إذا كان المستخدم لديه القدرة على التكبير والتصغير. إذا كان موقعك على الويب أقل من 980 بكسل (العرض الافتراضي لعرض صفحة الويب)، فيجب تعيين العرض باستخدام هذه العلامة. أيضًا، إذا كان التطبيق خاص بجهاز iPhone، فيجب تعيين العرض على عرض جهاز iPhone أو iPad أو iPod Touch. يجب أيضًا مراعاة أنه بدلاً من استخدام القيمة الفعلية لعرض الشاشة وارتفاعها، يجب استخدام قيم "عرض الجهاز" و "ارتفاع الجهاز". فيما يلي بعض العلامات سبيل المثال:

فيما يلي جميع الخيارات المتاحة:

  • العرض - عرض إطار العرض بوحدات البكسل. [النطاق: 980 ، المدى: 200 - 10000]
  • الإرتفاع - ارتفاع إطار العرض بوحدات البكسل. [النطاق: محسوبًا بنسبة العرض ونسبة العرض إلى الارتفاع للجهاز، المدى: 223 - 10000]
  • مقياس أولي - المقياس الأولي لإطار العرض. [النطاق: محسوب لملاءمة صفحة الويب في المنطقة المتاحة، المدى: محسوب مع خصائص الحد الأدنى والمقياس الأقصى.]
  • الحد الأدنى - مقياس الحد الأدنى من إطار العرض. [النطاق: 0.25، المدى:> 0 - 10]
  • المقياس الأقصى - الحد الأقصى لمقياس العرض. [النطاق: 1.6، المدى:> 0 -10]
  • قابلية التوسع في المستخدم - ما إذا كان يمكن للمستخدم التكبير والتصغير. [النطاق: نعم ، الخيارات: نعم أو لا]

الخطوة 8: اختبار تطبيق الويب

لقد انتهينا الآن من إعداد تطبيق الويب، دعنا نضيفه إلى جهازنا.

  • تصفح موقع التطبيق على موقع الويب الخاص بك.
  • اضغط على زر "زائد" في الجزء السفلي من الشاشة.
Build an iPhone Web App
  • اضغط على "إضافة إلى الشاشة الرئيسية".
Build an iPhone Web App
  • اضغط على "إضافة"
Build an iPhone Web App

تم الآن تثبيت تطبيق الويب بشكل فعال.


الاستنتاج

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

قم بمعاينة التطبيق النهائي عن طريق تنزيل ملف zip المرفق. من أجل اختباره على جهاز iOS الخاص بك، سوف تحتاج إلى وضع الشفرة على الإنترنت.

آمل أن تكونوا قد استمتعت بهذا البرنامج التعليمي وشكرا لكم على القراءة.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.