يُمكننا دائماً و من خلال أي مُتصفح حفظ بعض المواقع الهامة أو التي أعجبتنا و نُريد زيارتها لاحقاً، وذلك من خلال الضغط على Cmd+D و سيتم حفظ الموقع ضمن قائمة المُفضلة للمُتصفح الذي نستخدمه، ولكن ماشد إنتباهي أنه إثناء تصفّحي بإستخدام سفاري الموجود على جهاز الآيفون هو أمكانية إضافة الموقع إلى الشاشة الرئيسية لديك وكأنه تطبيق من ضمن تطبيقات جهازك، لرُبما لم توضح الصورة بعد ولكن دعوني أشرح لكم من خلال هذه الصورة :
و بينما كُنت أتصفح موقع Google Buzz من خلال الآيفون ظهرت لي نافذة صغيرة :
كما تُلاحظون النافذة تقول : لإضافة تطبيق الويب هذا إلى الشاشة الرئيسية إضغط على إشارة “+” و بعد الضغط على هذه الإشارة و إختيار “إضافة إلى الشاشة الرئيسية” أو “Add to home screen” ستجد أن التطبيق بالفعل موجود
و كما تُلاحظون كفكرة جميلة جداً، حيث يُمكننا عمل قائمة خاصة للمواقع التي نزورها أو نرغب بزيارتها من أجل سرعة الوصول إليها، ومن ثم قُمت بعمل حفظ لموقع المشروع، فالنتيجة كانت كالتالي :
كما تُلاحظون أن أيقونة موقع المشروع هي عبارة عن صورة من محتويات الموقع ولم تظهر أي أيقونة، قُمت بالبحث و وصلت للنتيجة، وهي عبارة عن كود صغير جداً نضعه في رأس الصفحة، وهذا الكود هو نفسه فكرة أيقونة الموقع أو الــ FavIcon، و الكود هو :
<link rel="apple-touch-icon" href="رابط الأيقونة هُنا">
الأيقونة يُفضّل أن تكون قياستها 50 بيكسل لكل من الطول و العرض على الأقل، قُمت بصناعة أيقونة لموقعي لكي ترو النتيجة بأعينكم
كما تُلاحظون الأيقونة ظهرت و بنجاح، ارجو منكم التجربة و إخباري بالنتيجة.
درس جميل ولو سمحت تضيف صورة كتابة الكود اذا امكن نكون لك من الشاكرين
Faisal.cs
@ Faisal.cs :
لم أفهم قصدك أخي الكريم، ماذا تقصد بإضافة صورة كتابة الكود؟ هل تقصد الكود على شكل صورة ؟
فعلا اخي أنا احفظ مواقعي المفضلة بهذه الطريقه من فتره طويله ومنها موقع عالم ابل
بكل بساطة ادخل على موقع مفضل لديك ومن ثم أضغط على زر الزائد وبطلع لك خيارات اختر منها عمل اختصار على شاشة الهوم
كلامك صحيح أخي الكريم، ولكن عندما يتم عمل هذا الإختصار، لاتظهر أيقونة مُخصصة للموقع، إنما تظهر لك صورة كاملة من الموقع، مثلما هو الحال في الصورةالأولى، أيقونة المشروع الموجودة بجانب برنامج Skype .
تسلم والله يا فراس والله حركة حلوة و خصوصاً اني على قبالة شراء ايبود تاتش .. 🙂 تسلم
شكرا فراس على الشرح الحلو
^_^
لتسهيل عرض الكود استخدم:
<code style=”direction:ltr”>
</code>
50 بيكسل على الأقل؟؟ ماذا عن 32 بيكسل، عادتا حجم الأيقونات يكون 32 بيكسل.
فكره جميله جداً ولك جزيل الشكر لافادتنا
شكرا لك .. قد اكون تاخرت قليلا في الرد
لكن ثمت سؤال هنا …
ما تكرمت بطرحه هو لمن يملك موقع ويريد من اضافه تظهر هذه الايقونة
لكن سوالي ماذا لو اردت اضافة موقع جريدة الرياض مثلا واريده ان يجعل الايقونة شكل مخصص عندي ؟؟
اخوي انا قدرات اضيف الموقع الي ابيع على شاشة الايفون
لكن سوالي كيف اسوي الايقونه خاصة للموقع ياليت تكثف الشرح
حاولة اسويها ع مدونة بلوجر ولكن ما تضبط معي اتمنى الشرح بالفيديو او بالصوره ولكن بشكل اوضح ويليت الشرح يكون ع مدونات بلوجر
السلام عليكم أخي الكريم، الطريقة أصبحت أسهل الآن، فقط قُم بإنشاء ملف الصورة ويجب أن تكون أبعاده ١٢٠ x ١٢٠ بيكسل وقُم بتسميته بـ apple-touch-icon.png وارفعه إلى المُجلد الرئيسي للموقع عندك، ويُمكنك متابعة شرح بسيط لهذه الفكرة هنا :
http://bit.ly/WaS4H5
تحياتي لك.