Els desenvolupadors web i els propietaris de llocs web presten atenció: heu de configurar una icona d'adreces d'interès d'iOS preparada per a la retina. Les icones d'adreces d'interès s'anomenen icona Apple Touch, i aquestes imatges personalitzades es converteixen en la icona que es mostra a la pantalla d'inici d'un usuari quan marquen un lloc web en un iPad, iPhone o iPod touch a iOS, o el tauler d'adreces d'interès de Safari per a OS X.Sense un conjunt de fitxers d'icones tàctils de poma personalitzat, els usuaris obtindran una miniatura avorrida i sovint lletja de la pròpia pàgina web, i sense utilitzar una icona preparada per a la retina, la icona d'adreces d'interès es veurà pixelada i generalment horrible a la pantalla de l'iPad nou.

Aquí teniu el que heu de fer per crear una icona Apple Touch perfecta per a la retina per a qualsevol lloc web en uns quants passos senzills.

1) Crea la icona del lloc web d'iOS preparada per a la retina

Feu servir una plantilla o dissenyeu la vostra. Vaig utilitzar el kit d'icones de retina de bricolatge fàcil esmentat en una publicació anterior, és un fitxer PSD que fa que dissenyar icones d'iOS d'aspecte agradable sigui tan fàcil com un clic o dos. Enganxeu el logotip d'un lloc web o d'una empresa i ja esteu a punt. Si no teniu res per editar fitxers PSD, Photoshop CS6 beta és excel·lent i gratuït per descarregar-lo i utilitzar-lo fins que la versió final surti més tard l'any.

2) Desa com a PNG i anomena la icona de marcador del lloc web de Retina

La icona ha de ser PNG i s'ha d'anomenar una de les dues coses. Cada nom de fitxer ofereix una aparença lleugerament diferent de la icona tal com es mostra a la pantalla d'inici de l'usuari:

• “apple-touch-icon.png” afegirà la superposició de la bombolla de ress altat a la icona
• “apple-touch-icon-precomposed.png” mostrarà la icona tal com es va crear originalment, sense la superposició de ress altat

Utilitzeu aquesta darrera opció precomposta si heu creat el vostre propi ress altat, o si voleu que la icona aparegui més plana sense bombolles omnipresents que apareixen a la majoria de les icones predeterminades d'Apple.

3) Carregueu la icona de toc del marcador del lloc web al directori web base

Utilitzeu un client SFTP (OS X inclou FTP al Finder, i CyberDuck o Filezilla són gratuïts) per copiar el fitxer apple-touch-icon.png al directori web arrel. Normalment és la mateixa ubicació on es troba el fitxer d'índex principal dels llocs. Un cop penjat, confirmeu que està a la ubicació adequada obrint un navegador web i anant a "http://SITEURL.com/apple-touch-icon.png" i assegurant-vos que es carregui.

Aquí hi ha un exemple d'una icona d'adreces d'interès de 512×512 preparada per a la retina d'OSXDaily.com:

Noteu que sense la bandera precomposta, la icona anterior mostrarà la bombolla de ress altat. Podeu veure la diferència entre els dos comparant la icona real amb la que es mostra a les captures de pantalla com a marcador.

4) Utilitzeu un dispositiu iOS i marqueu el lloc com a adreces d'interès

Aquesta és la part més fàcil, agafa un dispositiu iOS (preferiblement un iPad 3 per confirmar l'aspecte de la retina) i obriu Safari.Actualitzeu el lloc web al qual heu penjat la icona i, a continuació, toqueu la icona de fletxa i seleccioneu "Afegeix a la pantalla d'inici" anomena l'adreça d'interès i, a continuació, torna a la pantalla d'inici per confirmar que hi és.

Tot i ser de 512 x 512 píxels, la icona de la retina es reduirà bé als iPhones més antics i als dispositius sense retina. Si realment ho voleu, podeu utilitzar CSS i HTML per mostrar icones de diferents mides a diferents dispositius, però realment no és necessari.

Ara, si algú marca el vostre lloc web en un iPad amb una pantalla de retina, es veurà molt millor a la seva pantalla d'inici. Això és realment tot el que hi ha. I sí, ja hem escrit sobre la icona tàctil d'Apple abans, però mereix una altra menció ara que l'iPad 3 requereix icones i gràfics de resolució significativament més alt.