A webfejlesztők és a webhelytulajdonosok figyeljenek: be kell állítania egy retina-kompatibilis iOS-könyvjelző ikont. A könyvjelzőikonokat Apple Touch Icon-nak hívják, és ezek az egyéni képek az ikonokká válnak, amelyek a felhasználók kezdőképernyőjén jelennek meg, amikor iPaden könyvjelzővel látnak el egy webhelyet. iPhone vagy iPod touch iOS rendszeren, vagy a Safari OS X rendszerhez készült könyvjelzőpanelje.Egyedi apple-touch-ikon fájlkészlet nélkül a felhasználók unalmas és gyakran csúnya miniatűrt kapnak magáról a weboldalról, retina-ready ikon használata nélkül pedig a könyvjelzők ikonja pixelesnek és általában borzasztónak tűnik az új iPad képernyőjén.

Íme, mit kell tennie, hogy néhány egyszerű lépésben létrehozzon egy tökéletes retina Apple Touch Icont bármely webhelyhez.

1) Hozza létre a Retina-Ready iOS webhely ikonját

Használjon sablont, vagy tervezzen sajátot. Az előző bejegyzésben említett egyszerű DIY retina ikonkészletet használtam, ez egy PSD-fájl, amely egy-két kattintással egyszerűvé teszi a szép iOS-ikonok tervezését. Illesszen be egy webhelyet vagy vállalati logót, és máris készen áll. Ha nincs mit szerkesztenie a PSD-fájloknak, a Photoshop CS6 béta kiváló, ingyenesen letölthető és használható, amíg a végleges verzió ki nem jön az év folyamán.

2) Mentse el PNG-ként, és nevezze el a Retina webhely könyvjelzőikonját

Az ikonnak PNG-nek kell lennie, és két dolog egyikeként kell elnevezni. Mindegyik fájlnév kissé eltérő megjelenést biztosít az ikonnak, ahogyan a felhasználó kezdőképernyőjén megjelenik:

• “apple-touch-icon.png” kiemeli a buborékfedvényt az ikonhoz
• “apple-touch-icon-precomposed.png” az eredetileg létrehozott ikont jeleníti meg, kiemelés nélkül

Használja az utóbbi előre összeállított beállítást, ha saját kiemelést hozott létre, vagy ha azt szeretné, hogy az ikon laposabb legyen, mindenütt jelen lévő buborék nélkül, amely az Apple legtöbb alapértelmezett ikonján megjelenik.

3) Töltse fel a Webhely Könyvjelző Érintőikonját az alap webkönyvtárba

Használjon SFTP-klienst (az OS X tartalmazza az FTP-t a Finderben, a CyberDuck vagy a Filezilla pedig ingyenes) az apple-touch-icon.png fájl átmásolásához a webes gyökérkönyvtárba. Ez általában ugyanaz a hely, ahol a webhely fő indexfájlja található. A feltöltés után ellenőrizze, hogy a megfelelő helyen van-e. Ehhez nyissa meg a webböngészőt, nyissa meg a „http://SITEURL.com/apple-touch-icon.png” webhelyet, és ellenőrizze, hogy betöltődik-e.

Íme egy példa egy 512×512-es retina-kész könyvjelző ikonra az OSXDaily.com webhelyről:

Vegye észre, hogy a -precomposed zászló nélkül a fenti ikon megjeleníti a kiemelő buborékot. Láthatja a kettő közötti különbséget, ha összehasonlítja a tényleges ikont a képernyőképeken könyvjelzőként látható ikonnal.

4) Használjon iOS-eszközt, és vegye fel a webhelyet a könyvjelzők közé

Ez a legegyszerűbb rész, fogjon meg egy iOS-eszközt (lehetőleg egy iPad 3-at a retina-aspektus megerősítéséhez), és nyissa meg a Safarit.Frissítse azt a webhelyet, amelyre feltöltötte az ikont, majd koppintson a nyíl ikonra, és válassza a „Hozzáadás a kezdőképernyőhöz” lehetőséget, nevezze el a könyvjelzőt, majd térjen vissza a kezdőképernyőre, és ellenőrizze, hogy ott van-e.

Annak ellenére, hogy 512 x 512 pixeles, a retina ikon jól lecsökken a régebbi iPhone-okon és a nem retinás eszközökön. Ha igazán akarja, használhatja a CSS-t és a HTML-t, hogy különböző méretű ikonokat jelenítsen meg a különböző eszközökön, de ez tényleg nem szükséges.

Most, ha valaki könyvjelzővel látja el webhelyét retina kijelzővel rendelkező iPaden, az sokkal jobban fog kinézni a kezdőképernyőjén. Tényleg csak ennyi. És igen, már írtunk az Apple érintőképernyős ikonról, de most még egy említést érdemel, hogy az iPad 3 lényegesen nagyobb felbontású ikonokat és grafikát igényel.