كيفية عمل & تعيين رمز إشارة مرجعية iOS جاهز لشبكية العين لموقع ويب

جدول المحتويات:

Anonim

مطورو الويب وأصحاب مواقع الويب ينتبهون: تحتاج إلى تعيين رمز إشارة مرجعية جاهز لشبكية العين.تسمى أيقونات الإشارات المرجعية بأيقونة Apple Touch، وتصبح هذه الصور المخصصة هي الأيقونة التي يتم عرضها على الشاشة الرئيسية للمستخدمين عند وضع إشارة مرجعية على موقع ويب على جهاز iPad ، iPhone أو iPod touch في iOS أو لوحة الإشارات المرجعية في Safari لنظام التشغيل OS X.بدون مجموعة ملفات مخصصة لرموز Apple-touch ، سيحصل المستخدمون على صورة مصغرة مملة وغالبًا ما تكون قبيحة لصفحة الويب نفسها ، وبدون استخدام رمز جاهز لشبكية العين ، سيبدو رمز الإشارات المرجعية منقسمًا ومروعًا بشكل عام على شاشة iPad الجديدة.

إليك ما عليك القيام به لإنشاء رمز Apple Touch مثالي لشبكية العين لأي موقع ويب في بضع خطوات سهلة.

1) أنشئ أيقونة موقع iOS جاهزة لشبكية العين

استخدم قالبًا أو صمم قالبًا خاصًا بك. لقد استخدمت مجموعة أيقونات شبكية العين السهلة DIY المذكورة في منشور سابق ، إنه ملف PSD الذي يجعل تصميم أيقونات iOS ذات المظهر الجميل أمرًا سهلاً مثل نقرة أو اثنتين. الصق موقع ويب أو شعار شركة وستكون جاهزًا للعمل. إذا لم يكن لديك شيء لتعديل ملفات PSD ، فإن Photoshop CS6 beta ممتاز ومجاني للتنزيل والاستخدام حتى يتم إصدار النسخة النهائية في وقت لاحق من العام.

2) حفظ باسم PNG وتسمية أيقونة إشارة موقع Retina

يجب أن تكون الأيقونة بصيغة PNG ، ويجب تسميتها بأحد شيئين. يقدم كل اسم ملف مظهرًا مختلفًا قليلاً للرمز كما هو معروض على الشاشة الرئيسية للمستخدم:

  • apple-touch-icon.png ” ستضيف تراكب الفقاعة المميزة إلى الرمز
  • apple-touch-icon-precomposed.png ” سيعرض الرمز كما تم إنشاؤه في الأصل ، بدون تراكب التمييز

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

3) قم بتحميل رمز اللمس للإشارة المرجعية لموقع الويب إلى دليل الويب الأساسي

استخدم عميل SFTP (OS X يتضمن FTP في Finder ، و CyberDuck أو Filezilla مجانيان) لنسخ ملف apple-touch-icon.png إلى دليل الويب الجذر. عادة ما يكون هذا هو نفس الموقع الذي يوجد به ملف الفهرس الرئيسي للمواقع. بمجرد التحميل ، تأكد من وجوده في المكان المناسب عن طريق فتح متصفح الويب والانتقال إلى "http://SITEURL.com/apple-touch-icon.png" والتأكد من تحميله.

فيما يلي مثال على رمز إشارة مرجعية جاهز لشبكية العين 512 × 512 من OSXDaily.com:

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

4) استخدم جهاز iOS وقم بوضع إشارة مرجعية على الموقع

هذا هو الجزء الأسهل ، احصل على جهاز iOS (يفضل أن يكون iPad 3 لتأكيد جانب شبكية العين) وافتح Safari.قم بتحديث موقع الويب الذي قمت بتحميل الرمز إليه ، ثم انقر فوق رمز السهم وحدد "إضافة إلى الشاشة الرئيسية" لتسمية الإشارة المرجعية ، ثم ارجع إلى الشاشة الرئيسية لتأكيد وجودها هناك.

على الرغم من كونه 512 × 512 بكسل ، فإن أيقونة شبكية العين ستتقلص بشكل جيد على أجهزة iPhone القديمة والأجهزة غير الشبكية. إذا كنت ترغب حقًا في ذلك ، يمكنك استخدام CSS و HTML لعرض رموز مختلفة الأحجام على أجهزة مختلفة ، ولكن هذا ليس ضروريًا حقًا.

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

كيفية عمل & تعيين رمز إشارة مرجعية iOS جاهز لشبكية العين لموقع ويب