Weboví vývojári a vlastníci webových stránok venujú pozornosť: musíte nastaviť ikonu záložky iOS pripravenú na sietnicu. Ikony záložiek sa nazývajú Apple Touch Icon a tieto vlastné obrázky sa stanú ikonou, ktorá sa zobrazí na domovskej obrazovke používateľa, keď si uloží webovú stránku do záložiek na iPade, iPhone alebo iPod touch v systéme iOS alebo panel so záložkami Safari pre OS X.Bez vlastnej sady ikon dotykového jablka získajú používatelia nudnú a často škaredú miniatúru samotnej webovej stránky a bez použitia ikony pripravenej na sietnicu bude ikona záložiek na obrazovke nového iPadu vyzerať pixelovo a vo všeobecnosti hrozne.

Tu je to, čo musíte urobiť, aby ste v niekoľkých jednoduchých krokoch vytvorili dokonalú dotykovú ikonu Apple pre sietnicu pre akúkoľvek webovú stránku.

1) Vytvorte ikonu webovej lokality iOS pripravenej na sietnicu

Použite šablónu alebo si vytvorte vlastnú. Použil som jednoduchú DIY sadu ikon sietnice uvedenú v predchádzajúcom príspevku, je to súbor PSD, vďaka ktorému je navrhovanie pekne vyzerajúcich ikon iOS také jednoduché ako jedno alebo dve kliknutia. Vložte webovú stránku alebo logo spoločnosti a môžete začať. Ak nemáte niečo na úpravu súborov PSD, Photoshop CS6 beta je vynikajúci a môžete si ho bezplatne stiahnuť a používať, kým jeho konečná verzia nevyjde neskôr v tomto roku.

2) Uložiť ako PNG a pomenovať ikonu záložky webovej lokality Retina

Ikona musí byť vo formáte PNG a musí byť pomenovaná jednou z dvoch vecí. Každý názov súboru ponúka mierne odlišný vzhľad ikony, ako sa zobrazuje na domovskej obrazovke používateľa:

• „apple-touch-icon.png“ pridá bublinu zvýraznenia k ikone
• “apple-touch-icon-precomposed.png” zobrazí ikonu tak, ako bola pôvodne vytvorená, bez prekrytia zvýraznením

Použite druhú možnosť, ak ste si vytvorili vlastné zvýraznenie, alebo ak chcete, aby ikona vyzerala plochejšie bez všadeprítomnej bubliny, ktorá sa zobrazuje na väčšine predvolených ikon Apple.

3) Nahrajte dotykovú ikonu záložky webovej stránky do základného webového adresára

Na skopírovanie súboru apple-touch-icon.png do koreňového webového adresára použite klienta SFTP (OS X obsahuje FTP vo Finderi a CyberDuck alebo Filezilla sú zadarmo). Toto je zvyčajne rovnaké umiestnenie, v ktorom sa nachádza hlavný indexový súbor lokality. Po nahraní potvrďte, že je na správnom mieste otvorením webového prehliadača a prejdením na „http://SITEURL.com/apple-touch-icon.png“ a uistite sa, že sa načíta.

Tu je príklad ikony záložky pripravenej na sietnicu 512×512 z OSXDaily.com:

Všimnite si, že bez príznaku -precomposed sa na ikone vyššie zobrazí bublina zvýraznenia. Rozdiel medzi nimi môžete vidieť porovnaním skutočnej ikony s ikonou zobrazenou na snímkach obrazovky ako záložka.

4) Použite zariadenie so systémom iOS a uložte stránku do záložiek

Toto je najjednoduchšia časť, vezmite si iOS zariadenie (najlepšie iPad 3 na potvrdenie sietnice) a otvorte Safari.Obnovte webovú stránku, na ktorú ste ikonu nahrali, a potom klepnite na ikonu šípky a vyberte možnosť „Pridať na domovskú obrazovku“, pomenujte záložku, potom sa vráťte na domovskú obrazovku a potvrďte, že tam je.

Napriek tomu, že má veľkosť 512 x 512 pixelov, ikona sietnice sa na starších telefónoch iPhone a zariadeniach bez sietnice jemne zmenší. Ak naozaj chcete, môžete použiť CSS a HTML na zobrazenie ikon rôznej veľkosti na rôznych zariadeniach, ale naozaj to nie je potrebné.

Ak si teraz niekto uloží vašu webovú stránku do záložiek na iPade s displejom sietnice, bude to na jeho domovskej obrazovke vyzerať oveľa lepšie. To je naozaj všetko. A áno, o dotykovej ikone Apple sme už písali, ale teraz si zaslúži ďalšiu zmienku, pretože iPad 3 vyžaduje ikony a grafiku s výrazne vyšším rozlíšením.