iPhone et icône personnalisée du signet
Depuis quelques jours, je travaille sur une adaptation de thème (WPTouch pour WordPress), spécialement pour les utilisateurs iPhone et iPod Touch (mais aussi les autres mobiles, le thème étant idéal pour les petites résolutions). C'est en parcourant le code pendant des heures et des heures que je me suis aperçu qu'il existe quelques astuces propres à l'utilisateur sous Safari Mobile.
Lorsqu'un utilisateur sous iPhone décide d'ajouter un signet visible sur le SpringBoard (Fonction Ajouter à l'écran d'accueil) afin d'accéder plus rapidement à un site sans avoir à passer par l'icône Safari, une nouvelle icône est attribuée. Cette icône, si le site n'effectue pas l'astuce que je vais vous décrire, représente une capture d'écran de la page renvoyée sous Safari.
Il est donc très simple de personnaliser cela en disant à Safari d'utiliser votre propre icône.
Il est grand temps d'attaquer la partie monstrueusement technique et de faire peur à tout le monde. La ligne de code responsable de cette action se place juste avant la balise </head>, selon les plateformes, celle-ci se trouve dans le fichier template head.php ou header.php. Voici donc le fameux code :
<link href="http://www.chemin.de/votre/image.png" rel="apple-touch-icon" />
Une icône de 60x60 pixels devrait suffire.
J'ai une préférence pour le .png (gestion de la transparence) et j'avoue franchement que je ne sais pas si l'iPhone accepte d'autres formats à mettre sur le SpringBoard (c'est également le format utilisé pour les thèmes).
Vous pouvez maintenant faire joujou (je l'ai pas encore fait, il faut que je trouve un logo) et transformer votre favicon pour qu'il vienne éblouir les écrans des utilisateurs iPhone. ;)
TCho, Hamtaro.
A propos de l'auteur
Jeune (presque plus) passionné du web et plus particulièrement d'intégration et de webdesign, je fais comme tout bon geek qui se respecte sur la toile : je partage mon petit savoir ! ;)
![[PLUGIN] hamGravatar : Gravatar pour Pluxml](http://www.customtaro.fr//blog/plugins/plxZincious/timthumb.php?src=http://www.customtaro.fr/blog/data/images/previews/745.jpg&w=57&h=57&zc=1&q=90)
![[AVIS] HP TouchPad après quelques mois](http://www.customtaro.fr//blog/plugins/plxZincious/timthumb.php?src=http://www.customtaro.fr/blog/data/images/previews/743a.png&w=57&h=57&zc=1&q=90)
![[ECOUTE] Album : Mademoiselle K - Jouer dehors](http://www.customtaro.fr//blog/plugins/plxZincious/timthumb.php?src=data/images/previews/742.jpg&w=57&h=57&zc=1&q=90)
Bonjour,
ce que je me demande, c'est comment virer une icône du Springboard. Ripdev.com a installé la sienne d'autorité sur mon écran d'accueil et je souhaiterais m'en débarrasser.
Merci de votre aide,
François
~François : avec SBSettings, il est possible de cacher les icônes au choix dans une liste. BossPrefs fait la même chose il me semble.
Tout cela se trouve via Cydia. ;)
@ François
Salut ! Au cas où tu n'aurais pas trouvé et si tu ne veux pas seulement cacher l'icône, il y a CyDelete sur Cydia (Source : BigBoss and Planet-iPhones) qui affiche les petites croix aux autres Apps - en rouge, pour les distinguer.
Peut-être ça marche aussi pour l'écran d'accueil...?
Sinon il faut aller dans la prog par SSH, avec CyberDuck (mac) ou WinSCP (pc) :
Root Folder/private/var/stash/ThemesdDrTly/(ton thème)/UIImages/(ton icône)
et soit tu l'effaces, soit tu la déplaces au dossier /(ton thème)/icons/ comme ça elle apparaîtra sur le springboard.
voili :-)
bonjour à tous,
je suis novice en matière de ligne de commandes. je ne comprend pas comment on fais pour "dire a safari qu'on veut un autre icone. que celui de la capture d'écran.
balise </head> : c'est quoi et où?
<link href="http://www.chemin.de/votre/image.png" rel="apple-touch-icon" />
ceci ce rentre où?
très novice et la j'avoue n'avoir rien compris.
@Benjamin : tout ceci se réalise côté site web et non dans le téléphone. La balise est une balise présente dans le code d'une page sur internet. ;)
Bonjour, je suis tombé sur votre blog par hasard, plein d'articles très sympas, bravo!
Concernant celui ci et l'icone personnalisé, savez vous s'il y a un moyen de proposer automatiquement de mettre le signet sur le Springboard lorsqu'un utilisateur se connecte au site ?
Merci et bonne continuation !
@Herve : A ma connaissance, il n'existe pas de moyen de "forcer" Safari Mobile à créer un signet... Il va falloir chercher ailleurs qu'ici pour trouver une solution. Bon courage.
Merci pour la réponse :) je continue mes recherches alors^^
Bonjour,
Avez-vous une idée pour intégrer ce code sous joomla ?
@Stsoca : comme indiqué dans l'article, il s'agit de placer la balise dans le header du site. En ce qui concerne Joomla, je ne sais pas comment il fonctionne mais il faut tout simplement trouver le fichier responsable du header dans le thème et trouver la balise /head pour la placer avant. ;)