כיצד ליצור & הגדר סמל סימנייה מוכנה לרשתית iOS עבור אתר אינטרנט

תוכן עניינים:

Anonim

מפתחי אתרים ובעלי אתרים שימו לב: עליכם להגדיר סמל סימנייה של iOS מוכן לרשתית. סמלי הסימניות נקראים Apple Touch Icon, ותמונות מותאמות אישית אלו הופכות לסמל המוצג במסך הבית של המשתמש כאשר הם מסמנים אתר באייפד, iPhone, או iPod touch ב-iOS, או חלונית הסימניות של Safari עבור OS X.ללא ערכת קבצים מותאמת אישית של Apple-Touch-Icon, המשתמשים יקבלו תמונה ממוזערת משעממת ולעתים קרובות מכוערת של דף האינטרנט עצמו, וללא שימוש באייקון מוכן לרשתית, סמל הסימניות ייראה מפוקסל ובאופן כללי נורא על מסך האייפד החדש.

הנה מה שאתה צריך לעשות כדי ליצור סמל אפל מגע מושלם ברשתית עבור כל אתר בכמה שלבים פשוטים.

1) צור את סמל אתר iOS מוכן לרשתית

השתמש בתבנית או עצב בעצמך. השתמשתי בערכת האייקונים של רשתית עשה זאת בעצמך קלה שהוזכרה בפוסט הקודם, זה קובץ PSD שהופך את עיצוב אייקוני iOS למראה יפה לקל כמו לחיצה או שתיים. הדבק לוגו של אתר אינטרנט או חברה ואתה די מוכן ללכת. אם אין לך משהו לערוך קבצי PSD, Photoshop CS6 בטא מעולה ובחינם להורדה ושימוש עד שהגרסה הסופית תצא בהמשך השנה.

2) שמור כ-PNG ותן שם לסמל סימניה של אתר הרשתית

הסמל חייב להיות PNG, וצריך לקרוא לו אחד משני דברים. כל שם קובץ מציע מראה מעט שונה של הסמל כפי שמוצג במסך הבית של המשתמש:

  • apple-touch-icon.png" יוסיף את שכבת העל של בועת ההדגשה לסמל
  • apple-touch-icon-precomposed.png" יציג את הסמל כפי שנוצר במקור, ללא שכבת העל

השתמש באפשרות האחרונה -המורכבת מראש אם יצרת הדגשה משלך, או אם אתה רוצה שהסמל ייראה שטוח יותר ללא בועה בכל מקום המופיעה ברוב אייקוני ברירת המחדל של אפל.

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 (רצוי אייפד 3 כדי לאשר את היבט הרשתית) ופתחו את Safari.רענן את אתר האינטרנט שאליו העלית את הסמל ולאחר מכן הקש על סמל החץ ובחר "הוסף למסך הבית" שם את הסימנייה, ואז חזור למסך הבית כדי לאשר שהוא שם.

למרות היותו 512 x 512 פיקסלים, סמל הרשתית יצטמצם היטב באייפונים ישנים יותר ובמכשירים שאינם רשתית. אם אתה באמת רוצה, אתה יכול להשתמש ב-CSS ו-HTML כדי להציג סמלים בגדלים שונים למכשירים שונים, אבל זה ממש לא הכרחי.

עכשיו אם מישהו מסמן את אתר האינטרנט שלך ב-iPad עם תצוגת רשתית, זה ייראה הרבה יותר טוב במסך הבית שלו. זה באמת כל מה שיש בזה. וכן, כבר כתבנו על סמל המגע של אפל בעבר, אבל הוא ראוי לאזכור נוסף כעת, כאשר אייפד 3 דורש סמלים וגרפיקה ברזולוציה גבוהה משמעותית.

כיצד ליצור & הגדר סמל סימנייה מוכנה לרשתית iOS עבור אתר אינטרנט