Dezvoltatorii web și proprietarii de site-uri sunt atenți: trebuie să setați o pictogramă de marcaj iOS pregătită pentru retina. Pictogramele marcajului se numesc pictogramă Apple Touch, iar aceste imagini personalizate devin pictograma care este afișată pe ecranul de pornire al utilizatorilor atunci când marchează un site web pe un iPad, iPhone sau iPod touch în iOS sau panoul de marcaje din Safari pentru OS X.Fără un set de fișiere personalizat cu pictograme Apple Touch, utilizatorii vor obține o miniatură plictisitoare și adesea urâtă a paginii web în sine și, fără a utiliza o pictogramă pregătită pentru retină, pictograma marcajelor va arăta pixelată și, în general, groaznică pe noul ecran iPad.

Iată ce trebuie să faceți pentru a crea o pictogramă Apple Touch perfectă pentru retina pentru orice site web în câțiva pași simpli.

1) Creați pictograma site-ului iOS gata pentru retina

Folosește un șablon sau creează-ți propriul model. Am folosit setul de pictograme retină DIY ușor menționat într-o postare anterioară, este un fișier PSD care face proiectarea pictogramelor iOS cu aspect plăcut la fel de ușor ca un clic sau două. Lipiți un site web sau logo-ul companiei și sunteți destul de bine. Dacă nu aveți ceva de editat fișiere PSD, Photoshop CS6 beta este excelent și este gratuit pentru descărcare și utilizare până când versiunea finală apare mai târziu în cursul anului.

2) Salvați ca PNG și denumiți pictograma marcajului site-ului Retina

Pictograma trebuie să fie PNG și trebuie denumită unul dintre cele două lucruri. Fiecare nume de fișier oferă un aspect ușor diferit al pictogramei așa cum este afișat pe ecranul de pornire al utilizatorului:

• “apple-touch-icon.png” va adăuga suprapunerea cu balon de evidențiere la pictogramă
• “apple-touch-icon-precomposed.png” va afișa pictograma așa cum a fost creată inițial, fără suprapunerea evidențierii

Folosește ultima opțiune -precompusă dacă ai creat propriul evidențiere sau dacă vrei ca pictograma să apară mai plată fără balon omniprezent care apare pe majoritatea pictogramelor implicite Apple.

3) Încărcați pictograma Atingeți marcajul site-ului în directorul web de bază

Folosiți un client SFTP (OS X include FTP în Finder, iar CyberDuck sau Filezilla sunt gratuite) pentru a copia fișierul apple-touch-icon.png în directorul web rădăcină. Aceasta este de obicei aceeași locație în care se află fișierul index principal al site-urilor. Odată încărcat, confirmați că este în locația corectă deschizând un browser web și accesând „http://SITEURL.com/apple-touch-icon.png” și asigurându-vă că se încarcă.

Iată un exemplu de pictogramă de marcaj gata pentru retina de 512×512 de pe OSXDaily.com:

Rețineți că fără steag-precompus, pictograma de mai sus va afișa balonul de evidențiere. Puteți vedea diferența dintre cele două comparând pictograma reală cu cea afișată în capturi de ecran ca marcaj.

4) Utilizați un dispozitiv iOS și marcați site-ul la carte

Aceasta este cea mai ușoară parte, luați un dispozitiv iOS (de preferință un iPad 3 pentru a confirma aspectul retinei) și deschideți Safari.Reîmprospătați site-ul web în care ați încărcat pictograma, apoi atingeți pictograma săgeată și selectați „Adăugați la ecranul de pornire” denumiți marcajul, apoi reveniți la ecranul de pornire pentru a confirma că este acolo.

În ciuda faptului că are 512 x 512 pixeli, pictograma retinei se va micșora bine pe iPhone-urile mai vechi și pe dispozitivele fără retină. Dacă doriți cu adevărat, puteți utiliza CSS și HTML pentru a afișa pictograme de dimensiuni diferite pe diferite dispozitive, dar chiar nu este necesar.

Acum, dacă cineva vă marchează site-ul web pe un iPad cu ecran retină, va arăta mult mai bine pe ecranul de pornire. Asta este într-adevăr tot ceea ce este. Și da, am mai scris despre pictograma Apple touch, dar merită o altă mențiune acum că iPad 3 necesită pictograme și grafică cu rezoluție semnificativ mai mare.